Flutter – Create Option Menu for ListView

ListView is the efficient widget to display a list of items. Sometimes we need some options on individual items in the ListView. To create an options menu for a ListView in Flutter, you can use the PopupMenuButton widget along with PopupMenuItem or PopupMenuItemBuilder. This allows you to display a popup menu when the user taps a specific area of the ListView. In this article, we are going to create a ListView and apply the Options menu to it. A sample video is given below to get an idea about what we are going to do in this article.

Basic Syntax of ListView Widget

ListView(
  // Property to specify the scroll direction (vertical or horizontal)
  scrollDirection: Axis.vertical, // or Axis.horizontal
  
  // Property to define the children widgets in the list
  children: <Widget>[
    // List items go here
    ListTile(
      title: Text('Item 1'),
    ),
    ListTile(
      title: Text('Item 2'),
    ),
    // ... add more items as needed
  ],
)

Basic Syntax of PopupMenuButton Widget

PopupMenuButton<T>(
  // Define the type parameter T to specify the type of values for the menu items
  
  onSelected: (T value) {
    // Callback function that is called when an item is selected
    // Handle the selection here
  },
  
  itemBuilder: (BuildContext context) {
    // Define the menu items in a function
    return <PopupMenuEntry<T>>[
      // Add PopupMenuItem or PopupMenuItemBuilder entries here
      PopupMenuItem<T>(
        value: value1, // Value that corresponds to this item
        child: Text('Option 1'),
      ),
      PopupMenuItem<T>(
        value: value2,
        child: Text('Option 2'),
      ),
      // ... add more menu items
    ];
  },
)

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

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

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,

      home: MyListView(),
    );
  }
}

Step 5: Create MyListView Class

In this class we are going to create a ListView with a number of item (ListView containing number of ListTile) then we are going to add Options Menu with the help of PopupMenuButton widget in Flutter . Then we the user clicked a option an snackbar will appear and tell which option is selected.

ListView(
              children: <Widget>[
                // Create a ListView with a list of items, each having a PopupMenuButton
                for (int i = 1; i <= 5; i++)
                  ListTile(
                    title: Text("List Item $i"),
                    trailing: PopupMenuButton<int>(
                      onSelected: (value) {
                        // Handle the selection from the PopupMenuButton
                        if (value == 0) {
                          _showSnackbar(context, "Option 1 selected");
                        } else if (value == 1) {
                          _showSnackbar(context, "Option 2 selected");
                        }
                      },
                      itemBuilder: (BuildContext context) {
                        // Define the menu items for the PopupMenuButton
                        return <PopupMenuEntry<int>>[
                          PopupMenuItem<int>(
                            value: 0,
                            child: Text("Option 1"),
                          ),
                          PopupMenuItem<int>(
                            value: 1,
                            child: Text("Option 2"),
                          ),
                        ];
                      },
                    ),
                  ),
              ],
            ),

Dart

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView with Options Menus'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                // Create a ListView with a list of
                // items, each having a PopupMenuButton
                for (int i = 1; i <= 5; i++)
                  ListTile(
                    title: Text("List Item $i"),
                    trailing: PopupMenuButton<int>(
                      onSelected: (value) {
                        // Handle the selection from the PopupMenuButton
                        if (value == 0) {
                          _showSnackbar(context, "Option 1 selected");
                        } else if (value == 1) {
                          _showSnackbar(context, "Option 2 selected");
                        }
                      },
                      itemBuilder: (BuildContext context) {
                        // Define the menu items for the PopupMenuButton
                        return <PopupMenuEntry<int>>[
                          PopupMenuItem<int>(
                            value: 0,
                            child: Text("Option 1"),
                          ),
                          PopupMenuItem<int>(
                            value: 1,
                            child: Text("Option 2"),
                          ),
                        ];
                      },
                    ),
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // Display a Snackbar with the provided message
  void _showSnackbar(BuildContext context, String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false,

      home: MyListView(),
    );
  }
}

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView with Options Menus'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                // Create a ListView with a list of items,
                // each having a PopupMenuButton
                for (int i = 1; i <= 5; i++)
                  ListTile(
                    title: Text("List Item $i"),
                    trailing: PopupMenuButton<int>(
                      onSelected: (value) {
                        // Handle the selection from the PopupMenuButton
                        if (value == 0) {
                          _showSnackbar(context, "Option 1 selected");
                        } else if (value == 1) {
                          _showSnackbar(context, "Option 2 selected");
                        }
                      },
                      itemBuilder: (BuildContext context) {
                        // Define the menu items for the PopupMenuButton
                        return <PopupMenuEntry<int>>[
                          PopupMenuItem<int>(
                            value: 0,
                            child: Text("Option 1"),
                          ),
                          PopupMenuItem<int>(
                            value: 1,
                            child: Text("Option 2"),
                          ),
                        ];
                      },
                    ),
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // Display a Snackbar with the provided message
  void _showSnackbar(BuildContext context, String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
      ),
    );
  }
}

Output: