Flutter - 弹出底部菜单Show Modal Bottom Sheet

在很多安卓App上,有很多底部弹出的菜单,这个在Flutter上同样可以实现。

先看一下效果

Flutter - 弹出底部菜单Show Modal Bottom Sheet

嗯,就是这样子的,当用户点击菜单区域以外的时候,菜单会自动关闭。

下面就看一下Dart语言实现

floatingActionButton: new FloatingActionButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context){
return new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new ListTile(
leading: new Icon(Icons.photo_camera),
title: new Text("Camera"),
onTap: () async {
imageFile = await ImagePicker.pickImage(source: ImageSource.camera);
Navigator.pop(context);
},
),
new ListTile(
leading: new Icon(Icons.photo_library),
title: new Text("Gallery"),
onTap: () async {
imageFile = await ImagePicker.pickImage(source: ImageSource.gallery);
Navigator.pop(context);
},
),
],
);
}
);
},
foregroundColor: Colors.white,
child: Text('点我'),
),

可见,showModalBottomSheet只需要制定上下文context,在自己设计bulider即可。

上一篇:git 使用教程 --基础二


下一篇:FPGA笔试必会知识点2—FPGA器件