Widgets 14 | PopupMenuButton
In this tutorial, you will learn how to use the PopupMenuButton in the flutter.
Before starting our tutorial, we should create a page to contain our code.
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';
class PopupMenuButtonPage extends StatefulWidget {
@override
_PopupMenuButtonState createState() => _PopupMenuButtonState();
}
class _PopupMenuButtonState extends State<PopupMenuButtonPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(PageName.POPUP_MENU_BUTTON),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
//our code.
SizedBox(height: 600)
],
),
),
);
}
}
This is an empty page with a title.
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.Widget _simplePopup() => PopupMenuButton<int>(
itemBuilder: (context) => [
PopupMenuItem(
value: 1,
child: Text("First"),
),
PopupMenuItem(
value: 2,
child: Text("Second"),
),
],
);
It will show three points in the picture. When you click it, it will show you a menu to choose.
Let's look at its constructor for more use.
PopupMenuButton({
Key key,
@required this.itemBuilder,
this.initialValue,
this.onSelected,
this.onCanceled,
this.tooltip,
this.elevation = 8.0,
this.padding = const EdgeInsets.all(8.0),
this.child,
this.icon,
this.offset = Offset.zero,
})
The constructor has some parameters we have used them before, but some are not, so let's use them one by one.
This parameter defines as the blow.
final PopupMenuItemBuilder<T> itemBuilder;
If you just look at this, you may do not know how to use it. You should look at the detail of the builder.
typedef PopupMenuItemBuilder<T> = List<PopupMenuEntry<T>> Function(BuildContext context);
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.
Widget _threeItemPopup() => PopupMenuButton(
itemBuilder: (context) {
var list = List<PopupMenuEntry<Object>>();
list.add(
PopupMenuItem(
child: Text("Setting Language"),
value: 1,
),
);
list.add(
PopupMenuDivider(
height: 10,
),
);
list.add(
CheckedPopupMenuItem(
child: Text(
"English",
style: TextStyle(color: TEXT_BLACK),
),
value: 2,
checked: true,
),
);
return list;
},
icon: Icon(
Icons.settings,
size: 50,
color: Colors.white,
),
);
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. 
In this part, I will give you an example as below.
Widget _selectPopup() => PopupMenuButton<int>(
itemBuilder: (context) => [
PopupMenuItem(
value: 1,
child: Text("First"),
),
PopupMenuItem(
value: 2,
child: Text("Second"),
),
],
initialValue: 2,
onCanceled: () {
print("You have canceled the menu.");
},
onSelected: (value) {
print("value:$value");
},
icon: Icon(Icons.list),
);
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.
I/flutter ( 5472): value:1
I/flutter ( 5472): You have canceled the menu.
This is very similar to us, so I just give an example to show the effect and see which part will change.
Widget _paddingPopup() => PopupMenuButton<int>(
itemBuilder: (context) => [
PopupMenuItem(
value: 1,
child: Text(
"English",
style:
TextStyle(color: PURPLE, fontWeight: FontWeight.w700),
),
),
PopupMenuItem(
value: 2,
child: Text(
"Chinese",
style:
TextStyle(color: PURPLE, fontWeight: FontWeight.w700),
),
),
],
elevation: 4,
padding: EdgeInsets.symmetric(horizontal: 50),
);
The
elevation controls the shadow of the menu. The padding sets the distance of the button.
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. Widget _childPopup() => PopupMenuButton<int>(
itemBuilder: (context) => [
PopupMenuItem(
value: 1,
child: Text(
"Earth",
style: TextStyle(
color: TEXT_BLACK, fontWeight: FontWeight.w700),
),
),
PopupMenuItem(
value: 2,
child: Text(
"Moon",
style: TextStyle(
color: TEXT_BLACK, fontWeight: FontWeight.w700),
),
),
PopupMenuItem(
value: 3,
child: Text(
"Sun",
style: TextStyle(
color: TEXT_BLACK, fontWeight: FontWeight.w700),
),
),
],
child: Container(
height: 50,
width: 200,
decoration: ShapeDecoration(
color: GREEN,
shape: StadiumBorder(
side: BorderSide(color: TEXT_BLACK, width: 2),
),
),
child: Icon(Icons.airplanemode_active),
),
);
It will show as follows. The button will show our custom shape.
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.Widget _offsetPopup() => PopupMenuButton<int>(
itemBuilder: (context) => [
PopupMenuItem(
value: 1,
child: Text(
"Flutter Open",
style: TextStyle(
color: TEXT_BLACK, fontWeight: FontWeight.w700),
),
),
PopupMenuItem(
value: 2,
child: Text(
"Flutter Tutorial",
style: TextStyle(
color: TEXT_BLACK, fontWeight: FontWeight.w700),
),
),
],
icon: Icon(Icons.library_add),
offset: Offset(0, 100),
);
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.
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 4yr ago