Widgets 14 | PopupMenuButton
In this tutorial, you will learn how to use the PopupMenuButton in the flutter.
Before Start
Before starting our tutorial, we should create a page to contain our code.
1
import "package:flutter/material.dart";
2
import 'package:flutter_widgets/const/_const.dart';
3
​
4
class PopupMenuButtonPage extends StatefulWidget {
5
@override
6
_PopupMenuButtonState createState() => _PopupMenuButtonState();
7
}
8
​
9
class _PopupMenuButtonState extends State<PopupMenuButtonPage> {
10
@override
11
Widget build(BuildContext context) {
12
return Scaffold(
13
appBar: AppBar(
14
title: Text(PageName.POPUP_MENU_BUTTON),
15
),
16
body: SingleChildScrollView(
17
child: Column(
18
children: <Widget>[
19
//our code.
20
SizedBox(height: 600)
21
],
22
),
23
),
24
);
25
}
26
}
Copied!
This is an empty page with a title.
Simple Use
The
PopupMenuButton is similar with the DropdownButton, but has a bit different with it. The PopupMenuButton shows the menu but do not change the current button,you can do more things than the DropdownButton. So let's look at an example.1
Widget _simplePopup() => PopupMenuButton<int>(
2
itemBuilder: (context) => [
3
PopupMenuItem(
4
value: 1,
5
child: Text("First"),
6
),
7
PopupMenuItem(
8
value: 2,
9
child: Text("Second"),
10
),
11
],
12
);
Copied!
It will show three points in the picture. When you click it, it will show you a menu to choose.
Constructor
Let's look at its constructor for more use.
1
PopupMenuButton({
2
Key key,
3
@required this.itemBuilder,
4
this.initialValue,
5
this.onSelected,
6
this.onCanceled,
7
this.tooltip,
8
this.elevation = 8.0,
9
this.padding = const EdgeInsets.all(8.0),
10
this.child,
11
this.icon,
12
this.offset = Offset.zero,
13
})
Copied!
The constructor has some parameters we have used them before, but some are not, so let's use them one by one.
itemBuilder
This parameter defines as the blow.
1
final PopupMenuItemBuilder<T> itemBuilder;
Copied!
If you just look at this, you may do not know how to use it. You should look at the detail of the builder.
1
typedef PopupMenuItemBuilder<T> = List<PopupMenuEntry<T>> Function(BuildContext context);
Copied!
It is a function and should return list with a type of the
PopupMenuEntry. It is an abstract class, so we should use its subclasses. The relationship of the extends is below.
So we can add the three classes to the list.So let's use them at the same time.
1
Widget _threeItemPopup() => PopupMenuButton(
2
itemBuilder: (context) {
3
var list = List<PopupMenuEntry<Object>>();
4
list.add(
5
PopupMenuItem(
6
child: Text("Setting Language"),
7
value: 1,
8
),
9
);
10
list.add(
11
PopupMenuDivider(
12
height: 10,
13
),
14
);
15
list.add(
16
CheckedPopupMenuItem(
17
child: Text(
18
"English",
19
style: TextStyle(color: TEXT_BLACK),
20
),
21
value: 2,
22
checked: true,
23
),
24
);
25
return list;
26
},
27
icon: Icon(
28
Icons.settings,
29
size: 50,
30
color: Colors.white,
31
),
32
);
Copied!
It will show as follows. When you click the button with a setting icon, it will show the right part, the upper item is the
PopupMenuItem, the middle line the PopupMenuDivider, the bottom one is the CheckedPopupMenuItem. 
onSelected
In this part, I will give you an example as below.
1
Widget _selectPopup() => PopupMenuButton<int>(
2
itemBuilder: (context) => [
3
PopupMenuItem(
4
value: 1,
5
child: Text("First"),
6
),
7
PopupMenuItem(
8
value: 2,
9
child: Text("Second"),
10
),
11
],
12
initialValue: 2,
13
onCanceled: () {
14
print("You have canceled the menu.");
15
},
16
onSelected: (value) {
17
print("value:$value");
18
},
19
icon: Icon(Icons.list),
20
);
Copied!
The
initialValue will highlight the item with a grey background when showing the menu. The onCanceled is the function that will be called when you click the area that out of the menu.The onSelected is also a function with a value parameter that is the same as the value of the PopupMenuItem. The icon shows our button for us to click. The result is below.
When you click the item of the menu or other areas that outside of the menu. It will print in the console like this.
1
I/flutter ( 5472): value:1
2
I/flutter ( 5472): You have canceled the menu.
Copied!
padding
This is very similar to us, so I just give an example to show the effect and see which part will change.
1
Widget _paddingPopup() => PopupMenuButton<int>(
2
itemBuilder: (context) => [
3
PopupMenuItem(
4
value: 1,
5
child: Text(
6
"English",
7
style:
8
TextStyle(color: PURPLE, fontWeight: FontWeight.w700),
9
),
10
),
11
PopupMenuItem(
12
value: 2,
13
child: Text(
14
"Chinese",
15
style:
16
TextStyle(color: PURPLE, fontWeight: FontWeight.w700),
17
),
18
),
19
],
20
elevation: 4,
21
padding: EdgeInsets.symmetric(horizontal: 50),
22
);
Copied!
The
elevation controls the shadow of the menu. The padding sets the distance of the button.
child
This parameter will draw a widget for the button, but you should know, you can only choose either
child or icon, do not use both of them.1
Widget _childPopup() => PopupMenuButton<int>(
2
itemBuilder: (context) => [
3
PopupMenuItem(
4
value: 1,
5
child: Text(
6
"Earth",
7
style: TextStyle(
8
color: TEXT_BLACK, fontWeight: FontWeight.w700),
9
),
10
),
11
PopupMenuItem(
12
value: 2,
13
child: Text(
14
"Moon",
15
style: TextStyle(
16
color: TEXT_BLACK, fontWeight: FontWeight.w700),
17
),
18
),
19
PopupMenuItem(
20
value: 3,
21
child: Text(
22
"Sun",
23
style: TextStyle(
24
color: TEXT_BLACK, fontWeight: FontWeight.w700),
25
),
26
),
27
],
28
child: Container(
29
height: 50,
30
width: 200,
31
decoration: ShapeDecoration(
32
color: GREEN,
33
shape: StadiumBorder(
34
side: BorderSide(color: TEXT_BLACK, width: 2),
35
),
36
),
37
child: Icon(Icons.airplanemode_active),
38
),
39
);
Copied!
It will show as follows. The button will show our custom shape.
offset
This can control the location of the menu. So you should set this parameter to show your menu in the fit position. Let's see if we just set it to the
Offset(0,100), which position it will be.1
Widget _offsetPopup() => PopupMenuButton<int>(
2
itemBuilder: (context) => [
3
PopupMenuItem(
4
value: 1,
5
child: Text(
6
"Flutter Open",
7
style: TextStyle(
8
color: TEXT_BLACK, fontWeight: FontWeight.w700),
9
),
10
),
11
PopupMenuItem(
12
value: 2,
13
child: Text(
14
"Flutter Tutorial",
15
style: TextStyle(
16
color: TEXT_BLACK, fontWeight: FontWeight.w700),
17
),
18
),
19
],
20
icon: Icon(Icons.library_add),
21
offset: Offset(0, 100),
22
);
Copied!
It will show like this.
If you don't set the offset, it will use the default value
Offset.zero.It will show as below.
Conclusion
In this tutorial, we have learned many parameters of the
PopupMenuButton. A bit difficult one is the itemBuilder, it isn't very obvious to a newer, it is a function that return list. The others will be easy to understand. Thanks for your reading!
The end.
Facebook Page
Twitter
GitHub
Medium
Last modified 3yr ago