Flutter Options Menu Example | Flutter Widget for Creating a Simple Option Menu

This tutorial will teach you how to add a simple options menu to your Flutter app using the PopupMenuButton widget. An options menu provides a list of actions that the user can select to perform a particular action. 

With the help of this tutorial, you will learn how to create a basic options menu with three options and handle the selection of each option.

Here are the step-by-step instructions for creating a Flutter widget that displays a simple option menu with three items: 

• Open your Flutter project in your favorite code editor.
• Create a new Dart file and name it option_menu_simple.dart.
• Import the required packages and libraries by adding the following import statement at the top of the file:

import 'package:flutter/material.dart';

..

Create a new stateful widget by defining a class called OptionMenuSimple that extends StatefulWidget. 

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

  @override
  State<OptionMenuSimple> createState() => _OptionMenuSimpleState();
}

..

Create a private state class called _OptionMenuSimpleState that extends State<OptionMenuSimple>.

class _OptionMenuSimpleState extends State<OptionMenuSimple> {
  // add code here
}

..

Override the build method in the _OptionMenuSimpleState class to define the layout of the widget.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Simple Option Menu Example'),
      actions: [
        PopupMenuButton(
          // add code here
        ),
      ],
    ),
    body:  Center(
      child: Column(
        children: [
          // add code here
        ],
      ),
    ),
    floatingActionButton: PopupMenuButton(
      // add code here
    ),
  );
}

..

Define the PopupMenuButton widget inside the actions property of the AppBar widget to create the menu button in the app bar.

PopupMenuButton(
  itemBuilder: (BuildContext context) => [
    const PopupMenuItem(
      value: 1,
      child: Text('Option 1'),
    ),
    const PopupMenuItem(
      value: 2,
      child: Text('Option 2'),
    ),
    const PopupMenuItem(
      value: 3,
      child: Text('Option 3'),
    ),
  ],
  onSelected: (value) {
    switch (value) {
      case 1:
        // handle option 1
        break;
      case 2:
        // handle option 2
        break;
      case 3:
        // handle option 3
        break;
    }
  },
),

..

Define a Column widget inside the body property of the Scaffold widget to center the page and add any additional content.

body:  Center(
  child: Column(
    children: [
      // add any additional content here
    ],
  ),
),

..

Define the PopupMenuButton widget inside the floatingActionButton property of the Scaffold widget to create the floating action button.

floatingActionButton: PopupMenuButton(
  itemBuilder: (BuildContext context) => [
    const PopupMenuItem(
      value: 1,
      child: Text('Option 1'),
    ),
    const PopupMenuItem(
      value: 2,
      child: Text('Option 2'),
    ),
    const PopupMenuItem(
      value: 3,
      child: Text('Option 3'),
    ),
  ],
  onSelected: (value) {
    switch (value) {
      case 1:
        // handle option 1
        break;
      case 2:
        // handle option 2
        break;
      case 3:
        // handle option 3
        break;
    }
  },
  child: const FloatingActionButton(
    onPressed: null,
    child: Icon(Icons.add),
  ),
),
``

..

Code:

import 'package:flutter/material.dart';

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

  @override
  State<OptionMenuSimple> createState() => _OptionMenuSimpleState();
}

class _OptionMenuSimpleState extends State<OptionMenuSimple> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Option Menu Example'),
        actions: [
          PopupMenuButton( // creates the option menu button in the app bar
            itemBuilder: (BuildContext context) => [ // defines the options in the menu
              const PopupMenuItem(
                value: 1,
                child: Text('Option 1'),
              ),
              const PopupMenuItem(
                value: 2,
                child: Text('Option 2'),
              ),
              const PopupMenuItem(
                value: 3,
                child: Text('Option 3'),
              ),
            ],
            onSelected: (value) { // handles the option menu item selection
              switch (value) {
                case 1:
                // Handle option 1
                  break;
                case 2:
                // Handle option 2
                  break;
                case 3:
                // Handle option 3
                  break;
              }
            },
          ),
        ],
      ),
      body:  Center(
        child: Column(
          children: [
            Container(height: 125), // adds empty space to center the page


          ],
        ),
      ),
      floatingActionButton: PopupMenuButton( // creates the option menu button as a floating action button
        itemBuilder: (BuildContext context) => [ // defines the options in the menu
          const PopupMenuItem(
            value: 1,
            child: Text('Option 1'),
          ),
          const PopupMenuItem(
            value: 2,
            child: Text('Option 2'),
          ),
          const PopupMenuItem(
            value: 3,
            child: Text('Option 3'),
          ),
        ],
        onSelected: (value) { // handles the option menu item selection
          switch (value) {
            case 1:
            // Handle option 1
              break;
            case 2:
            // Handle option 2
              break;
            case 3:
            // Handle option 3
              break;
          }
        },
        child: const FloatingActionButton( // creates the add icon button for the floating action button
          onPressed: null,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

..