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), ), ); } } |