Code Samples: popup-menu

In flutter, popup menu button widget simply a popup / overflow menu in android and ios. It is similar to flutter dropdownButton but has additional features. We will learn how to attach a popup menu button widget in flutter and its properties in details.






In flutter, popup menu button widget displays an overflow menu when pressed. When we select an item the onSelected callback will be fired and the menu is dismissed as well. The value of the menu item selected by the end user will be available with onSelected callback. We can use the value to trigger actions as of our requirements.





The itemBuilder property is required which means without using it will throw an error. We have to use the Stateful widget as popup menu button will have a change in the state based on the user selection.







We should use either child or icon property but not both as it will throw an error.






The icon property is used to change the icon of the popup menu. By default, the popup menu displays an overflow menu(three dots) icon even if we don’t use the icon property.







We will use the itemBuilder property to add items to Popup Menu Button. It accepts a list of PopupMenuItems.






We will use the elevation property to apply elevation to the popup menu. Elevation makes the popup menu look as it is lifted upward from the background.







  Full example given below:


import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: ApplicationAppBar(),
        body: const MyHomePageImpl()
    );
  }
}

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

  @override
  _MyHomePageImpl createState() => _MyHomePageImpl();
}

class _MyHomePageImpl extends State<MyHomePageImpl> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: Column(
        children: [
          const SizedBox(height: 5),
          Row(
            children: [
              Expanded(
                  child: Text("Hello")
              ),
              Container(
                child: PopupMenuButton(
                    icon: Icon(Icons.more_horiz),
                    elevation: 40,
                    shape: const OutlineInputBorder(
                        borderSide: BorderSide(
                            color: Colors.green,
                            width: 2
                        )
                    ),
                    enabled: true,
                    onSelected: (value) {
                      print("Menu [$value] selected");
                    },
                    onCanceled: () {
                      print("None selected");
                    },
                    itemBuilder: (context) => [
                      PopupMenuItem(
                        child: Text("Menu 1"),
                        value: "menu_1",
                      ),
                      PopupMenuItem(
                        child: Text("Menu 2"),
                        value: "menu_2",
                      ),
                      PopupMenuItem(
                        child: Text("Menu 3"),
                        value: "menu_3",
                        enabled: false,
                      ),
                    ]
                ),
                //padding: const EdgeInsets.all(6.0),
                decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.lightGreen,
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(23)),
                ),
              )
            ],
          ),
        ],
      ),
    );
  }
}

class ApplicationAppBar extends AppBar {
  ApplicationAppBar({Key? key}) : super(key: key,
    title: const Text("Popup Menu Button"),
    actions: [
      IconButton(icon: const Icon(Icons.add), onPressed: () {}),
    ],
  );
}



  Ouptu screenshot as below:



    
    
    
    
    
    
    
    
  
Pages

Saturday, October 9, 2021

Flutter Popup Menu Button Example Tutorial
