I want to create bottom sheet dialog like this image below in flutter

Viewed 76

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

enter image description here

2 Answers

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);
                },
              ),
            )
          ],
        );
      });

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.

enter image description here

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

Related