flutter - How to use PopupMenuButton onSelected

Flutter - PopupMenuButton onSelected

The PopupMenuButton class allows us to display a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to use the PopupMenuButton widget’s onSelected callback. Here we used the PopupMenuButton class’s onSelected property to set the PupupMenuButton widget’s item selection callback.

The PopupMenuButton class’s onSelected property value is a PopupMenuItemSelected instance that is called when the user selects a value from the popup menu created by this button. But if the popup menu is dismissed without selecting a value, the onCanceled is called instead.

The PopupMenuItemSelected is a signature for the callback invoked when a menu item is selected. The argument is the value of the PopupMenuItem that caused its menu to be dismissed.

In this flutter example code, we used the PopupMenuButton widget’s onSelected callback to display the user-selected menu item in a Text widget.

main.dart

import 'package:flutter/material.dart';

void main() {runApp(const MyApp());}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.indigo),
        home: const MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _selectedValue = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text("PopupMenuButton onSelected"),
          actions: [
            PopupMenuButton(
                onSelected: (String value){
                  setState(() {
                    _selectedValue = value;
                  });
                },
                offset: const Offset(0,56),
                itemBuilder: (context)=>[
                  const PopupMenuItem(
                    child: Text("Share Location"),
                    value: "Location",
                  ),
                  const PopupMenuItem(
                    child: Text("File Upload"),
                    value: "Upload",
                  ),
                  const PopupMenuItem(
                    child: Text("Send Email"),
                    value: "Contact",
                  )
                ]
            )
          ]
      ),
      body: Center(
        child: Text(
            "Selected : $_selectedValue",
            style: const TextStyle(fontSize: 26)
        ),
      ),
    );
  }
}