Flutter - Create Option Menu for ListView
Last Updated :
24 Apr, 2025
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:
Similar Reads
Flutter - Create Fortune Wheel Spin
Deciding what to eat can be a daily dilemma, especially when you have a plethora of options to choose from. To make this decision-making process more exciting and interactive, in this article, we will be creating – the Lunch Spinning Wheel app.Steps to Implement Fortune Wheel in FlutterStep 1: Creat
6 min read
Flutter - Grouping Navigation Drawer Menu Items
Grouping navigation drawer menu items involves organizing the items into sections or categories. This makes it easier for users to navigate through the app and find the options that the user wants. Grouping Drawer Menu Items, In Flutter, we can group navigation drawer menu items using the ExpansionT
5 min read
Flutter - Create Instagram Login UI
Instagram is one of the most popular social media apps out there, with over 1 billion active users. As a developer, you may be interested in replicating its login UI using Flutter, one of the most popular cross-platform app development frameworks available. In this article, we will guide you through
5 min read
ListView Class in Flutter
In Flutter, ListView is a scrollable list of widgets arranged linearly. It displays its children sequentially in the scrolling direction, either vertically or horizontally. There are different types of ListViews :ListViewListView.builderListView.separatedListView.customConstructor of ListView Class:
6 min read
Flutter - Create Rating Star Bar
In the android application, you need to make a rating bar where user rate your craft. For example, GeeksforGeeks also make this feature for tutorials where users can give ratings to the tutorials. A sample video is given below to get an idea about what we are going to do in this article. How to Use?
3 min read
Flutter - Set Custom Height for Widget in GridView
To set the Custom Height and Width of Grid View we can use the property childAspectRatio of the grid view. childAspectRatio takes the ratio of width and height. childAspectRatio: (itemWidth / itemHeight) Then we can assign itemWidth and ItemHeight with values. Dart // size of the screen var size = M
3 min read
How to Create a Zoomable Image in Flutter?
In Flutter, you can create a zoomable image using the GestureDetector and Transform widgets. The GestureDetector widget can be used to detect pinch gestures on the image, and the Transform widget can be used to apply the zoom transformation to the image. How to Use:Container( child: PhotoView( image
3 min read
Flutter - Navigate From One Screen to Another
Flutter apps may have multiple screens or pages. Pages are groups of functionalities. The user navigates between different pages to use different functionalities. Concepts like pages are called routes in Flutter. We can use Navigator.push() to navigate to a new route and Navigator.pop() to navigate
3 min read
Listview.builder in Flutter
ListView is a very important widget in a flutter. It is used to create the list of children But when we want to create a list recursively without writing code again and again then ListView.builder is used instead of ListView. Â ListView.builder creates a scrollable, linear array of widgets. ListView.
3 min read
Flutter - Send Data to Screen
Interaction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(i.e., page). In this article, we will expl
4 min read