Popup Menu Flutter Example

This article explains you how to create popup menu in flutter applications to show options to users. Popup Menu is used to display drop down menu to users in app bar or other part of UI.

We can navigate user to other pages after selection of any particular item in popup menu. We can also add options manually or dynamically in popup menu in flutter applications.

There are many properties of popup menu such as itemBuilder, initialValue, elevation, onSelected, onCanceled etc. itemBuilder is used to make list of items. initialValue property highlights a value by default. We can change value using this property.

onSelected property is used to navigate to other pages in flutter applications based on user selection. onCanceled property is called when user does not select any value from dropdown menu.

We use PopupMenuButton widget to display dropdown widget in flutter applications. PopupMenuItem widget is used to display UI part in popup menu in flutter applications.

When we click on popup menu item then onSelected method will be called. We also get value from onSelected method so we can navigate user to new screens according to this value. In this example, we are displaying list of football players with options icon.

 

Popup Menu Flutter

List<FootballPlayer> listFootballPlayers = [];
listFootballPlayers.add(FootballPlayer(‘Cristiano Ronaldo’, ‘Juventus’, ‘Portugal’, 36));
listFootballPlayers.add(FootballPlayer(‘Lional Messi’, ‘Barcelona’, ‘Argentina’, 33));
listFootballPlayers.add(FootballPlayer(‘Neymar Jr.’, ‘Paris Saint-Germain’, ‘Brazil’, 29));

ListView.builder(
itemCount: 3,
itemBuilder: (context, index) {
return Card(
child: Container(
padding: EdgeInsets.all(15),
child: Stack(
children: [
Text(listFootballPlayers[index].name,
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
Positioned(
child: PopupMenuButton(
onSelected: (value) {

},
itemBuilder: (context) => [
PopupMenuItem(
    value: 1,
    child: Row(
        children: <Widget>[
            Padding(
                padding: const EdgeInsets.all(5),
                child: Icon(Icons.edit),
            ),
            Text(‘Edit’)
        ],
    )),
PopupMenuItem(
    value: 2,
    child: Row(
        children: <Widget>[
            Padding(
                padding: const EdgeInsets.all(5),
                child: Icon(Icons.share),
            ),
            Text(‘Share’)
        ],
    )),
PopupMenuItem(
    value: 3,
    child: Row(
        children: <Widget>[
            Padding(
                padding: const EdgeInsets.all(5),
                child: Icon(Icons.delete),
            ),
            Text(‘Delete’)
        ],
    )),
]),
right: 0,
)
]
)
)
);
})

 
 
 
popup menu flutter
 

Leave a Reply