我想在 flutter 中创建如下图所示的底部工作表对话框

Question

Please help me,. I m new in flutter i want to create like this in my flutter app on button click

Answer 1

Try below code,

showModalBottomSheet(
      context: context,
      builder: (BuildContext cntx) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.camera),
              title: Text("Camera"),
              onTap: () async {
          
              },
            ),
            ListTile(
              leading: Icon(Icons.image),
              title:  Text("Files")),
              onTap: () async {
              },
            ),
            Container(
              height: 50,
              color: prefix0.appBackgroundColcor,
              child: ListTile(
                title: Center(
                  child: Text(
                    "Cancel",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            )
          ],
        );
      });

Answer 2

Using get plugin

GestureDetector(
        onTap: () {
          Get.bottomSheet(
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                height: 200,
                color: Colors.transparent,
                child:Column(
                  children: [
                    Container(
                      width: double.infinity,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.greenAccent
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(18),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text('Use Camera', style: TextStyle(fontSize: 16),),
                            SizedBox(height: 20,),
                            Text('Upload from File', style: TextStyle(fontSize: 16),),
                            SizedBox(height: 20,),
                            Text('Upload from Dropbox', style: TextStyle(fontSize: 16),),
                          ],
                        ),
                      )
                    ),
                    SizedBox(height: 10,),
                    Container(
                      width: double.infinity,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.greenAccent
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(15),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text('Cancel', style: TextStyle(fontSize: 16, color: Colors.red),),
                          ],
                        ),
                      )
                    ),
                  ],
                )
              ),
            ),
            isDismissible: true,
            enableDrag: false,
          );
        },
        child: Container(
          width: 100,
          height: 50,
          child: Text('Open Bottom Sheet')
        ),
      ),

Answer 3

You can use cupertino bottom modal to achieve something like that. See below code for implementation:

void show() {
    showCupertinoModalPopup(
        context: context,
        builder: (BuildContext cont) {
          return CupertinoActionSheet(
            actions: [
              CupertinoActionSheetAction(
                onPressed: () {
                  print('Camera');
                },
                child: Text('Use Camera'),
              ),
              CupertinoActionSheetAction(
                onPressed: () {
                  print('Upload files');
                },
                child: Text('Upload from files'),
              ),
              CupertinoActionSheetAction(
                onPressed: () {
                  print('Dropbox');
                },
                child: Text('Upload from DropBox'),
              )
            ],
            cancelButton: CupertinoActionSheetAction(
              onPressed: () {
                Navigator.of(cont).pop;
              },
              child: Text('Cancel', style: TextStyle(color: Colors.red)),
            ),
          );
        });
  }

Call the show function with the press of any button. You will see something like this.

If you don't want the divider between actions you have to create your own custom popup.