loading...
Cover image for How to Create a Context Menu in Flutter?

How to Create a Context Menu in Flutter?

irangareddy profile image Ranga Reddy ・3 min read

Context Menu's most widely used UI Component in Mobile Development and with Flutter we can build it much more easily but, let's look at what is Contextual Menu is? (Contextual/Context referred as same)⁣

What is a Contextual Menu?

A contextual menu is a type of menu that appears on demand and contains a small set of relevant actions related to a control, an area of the interface, a piece of data in the application, or a view of the application.⁣

Let's Build a Context Menu


This is actually what we going to make by the end of this article. Load up your energy and let's get started.

Create a List

const List<String> choices = <String>[
"Item 1",
"Item 2",
"Item 3",
];
Enter fullscreen mode Exit fullscreen mode

The choices are a list of String that represents the items in the Context Menu.

Create a Stateful Widget

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}


class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
        Text("Just Created a Stateful Widget")
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

MainScreen is a Stateful widget that manages the state of the context menu selection.

Add these Variables to _MainScreenState

  final GlobalKey<ScaffoldState> _scaffoldkey = new GlobalKey<ScaffoldState>();
  String _selectedChoices;
Enter fullscreen mode Exit fullscreen mode
  • _scaffoldKey is a GlobalKey that provides access to ScaffoldState and this helps identify the state uniquely.
  • _selectedChoices is a String to store the current choice.

Note: underscore before a variable refers as a private variable in dart

Adding Context Menu to the MainScreen

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldkey,
      appBar: AppBar(
        title: Text('Context Menu'),
        elevation: 0,
        centerTitle: false,
        backgroundColor: kPrimaryColor,
        actions: <Widget>[
          PopupMenuButton(
            onSelected: _select,
            padding: EdgeInsets.zero,
            // initialValue: choices[_selection],
            itemBuilder: (BuildContext context) {
              return choices.map((String choice) {
                return  PopupMenuItem<String>(
                value: choice,
                child: Text(choice),
              );}
              ).toList();
            },
          )
        ],
      ),
      body: BodyWidget(selection: _selectedChoices),
    );
  }
Enter fullscreen mode Exit fullscreen mode

We need to manage three things while adding the Context Menu

  1. Assign the _scaffoldkey to the key property in the Scaffold.
  2. Actions in AppBar
  3. Body Content in MainScreen

Actions in AppBar

PopupMenuButton has itemBuilder property we use choices.map to load each item into PopupMenuItem and display the content with child property.

value is the property which will be returned to on selection of the item

PopupMenuButton has onSelection property which gets the choice of the selection from value and passes the value to _select function.

  • _select
  void _select(String choice) {
    setState(() {
      _selectedChoices = choice;
    });
    showSnackBar(choice);
  }
Enter fullscreen mode Exit fullscreen mode

_select is a function that will be called from onSelected property of the PopupMenuButton which stores the choice of the user to a _selectedChoices and call's the snowSnackBar

  • showSnackBar
void showSnackBar(String selection) {
    final snackBarContent = SnackBar(
            content: Text('Selected: $selection',style: kBodyTextStyle,),
            action: SnackBarAction(
              label: 'Undo',
              textColor: kSecondaryColor,
              onPressed: () {
                // Some code to undo the change.
              },
            ),
          );
    _scaffoldkey.currentState.showSnackBar(snackBarContent);
  }
Enter fullscreen mode Exit fullscreen mode

showSnackBar is a function that accepts the current selection of the context menu an displays the SnackBar over a Scafolld using _scaffoldkey.currentState.showSnackBar(snackBarContent) and we can also add more functionality to the SnackBar with onPressed property.

Body Content in MainScreen

class BodyWidget extends StatelessWidget {
  const BodyWidget({
    Key key,
    @required String selection,
  }) : _selection = selection, super(key: key);

  final String _selection;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        _selection != null ? 
        Center(child: Text("Selected: $_selection",style: kBodyTextStyle,),) : 
        Center(child: Text("Welcome to Flutter UI Components Library",style: kBodyTextStyle,),),
      ],
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

BodyWidget is a StatelessWidget class which accepts the _selection of the context menu and displays the current selection of the context menu if _selection is null then displays the sample text.

Conclusion

Adding Context Menu to the Application gives more flexibility to the user for smaller actions. With simple PopupMenuButton you easily add a Context Menu in a few lines of code. The functions help you add much more functionality to show a SnackBar and changing a state in the body.

GitHub Link

If you like to improve your App Development Skills, even more in Flutter and SwiftUI. Feel free to dm me on Instagram or tweet to me on Twitter if you have any additional tips or feedback.

Thanks for reading!

Posted on by:

irangareddy profile

Ranga Reddy

@irangareddy

App Developer | Apple WWDC Scholar |SwiftUI | Flutter. Writing a new blog post every week related to Flutter, SwiftUI, iOS, and Xcode. ♻️ Learn, Code, Enjoy

Discussion

pic
Editor guide