flutterflutter-layout

How to create a modal bottomsheet with circular corners in Flutter?


showModalBottomSheet does not provide any styling or decorations. I want to create something like the Google Tasks bottomsheet.

google tasks bottomsheet


Solution

  • This is the modalBottomSheet function needed.

        void _modalBottomSheetMenu(){
            showModalBottomSheet(
                context: context,
                builder: (builder){
                  return new Container(
                    height: 350.0,
                    color: Colors.transparent, //could change this to Color(0xFF737373), 
                               //so you don't have to change MaterialApp canvasColor
                    child: new Container(
                        decoration: new BoxDecoration(
                            color: Colors.white,
                            borderRadius: new BorderRadius.only(
                                topLeft: const Radius.circular(10.0),
                                topRight: const Radius.circular(10.0))),
                        child: new Center(
                          child: new Text("This is a modal sheet"),
                        )),
                  );
                }
            );
          }
    

    Also the most important part of this working properly is, in MaterialApp set canvasColor to transparent like the one shown below.

    return new MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Tasks',
          theme: new ThemeData(
            primarySwatch: Colors.teal,
            canvasColor: Colors.transparent,
          ),
          home: new TasksHomePage(),
        );
      }
    

    I have tested the code and it works fine as I was also making a clone of the Google Tasks app which will be opensourced in my github.