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即可。