1. 程式人生 > >Flutter - 彈出底部選單Show Modal Bottom Sheet

Flutter - 彈出底部選單Show Modal Bottom Sheet

在很多安卓App上,有很多底部彈出的選單,這個在Flutter上同樣可以實現。

先看一下效果

 

嗯,就是這樣子的,當用戶點選選單區域以外的時候,選單會自動關閉。

下面就看一下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即可。