Flutter-弹出底部菜单ShowModalBottomSheet

和showBottomSheet相比,主要的区别在于ShowModalBottomSheet在顶部有蒙层,点击会消失,然而showBottomSheet是没有的。

showBottomSheet效果图:

Flutter-弹出底部菜单ShowModalBottomSheet_第1张图片

ShowModalBottomSheet 先看一下效果。


Flutter-弹出底部菜单ShowModalBottomSheet_第2张图片

下面就看一下Dart语言实现

floatingActionButton: new FloatingActionButton(

        onPressed: () {

          showModalBottomSheet(

              context: context,

              builder: (BuildContext context){

                return new Column(

                  mainAxisSize: MainAxisSize.min,

                  children: [

                    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('点我'),

      ),

你可能感兴趣的:(Flutter-弹出底部菜单ShowModalBottomSheet)