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

Question

I want to create a persistent BottomSheet with rounded corners, but not able to achieve the results. I have already tried the code give in link "How to create a modal bottomsheet with circular corners in Flutter?" but it implements modal sheet.

I have tried it for persistent sheet but with no luck. Please help on how can i do that.

The below code works and shows a bottomsheet, but the corners do not come rounded.

void _showBottomSheet() {
    _scaffoldKey.currentState.showBottomSheet<void>((BuildContext context) {
      final ThemeData themeData = Theme.of(context);
      return new Container(
          padding: const EdgeInsets.all(0),
          width: double.infinity,
          color: Colors.transparent,
          decoration: BoxDecoration(
              borderRadius: new BorderRadius.only(
                  bottomLeft: const Radius.circular(10.0),
                  bottomRight: const Radius.circular(10.0)),
          ),
          child: new Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              BottomNavigationBar(
                currentIndex: 0, // this will be set when a new tab is tapped
                items: [
                  BottomNavigationBarItem(
                    icon: new Icon(Icons.share),
                    title: new Text('Share'),
                  ),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.bookmark),
                      title: Text('Bookmark')
                  )
                ],
                onTap: (index)
                {
                  if(index ==0)
                  {
                    final RenderBox box = context.findRenderObject();
                    Share.share('Hello this is a test',
                        sharePositionOrigin:
                        box.localToGlobal(Offset.zero) & box.size);
                  }
                },
              ),
          ])
      );
    })
      .closed.whenComplete(() {
      if (mounted) {
        setState(() { // re-enable the button
          _showBottomSheetCallback = _showBottomSheet;
          print ("_showBottomSheetCallback enable");
        });
      }

    });
  }

Can you update your question with the code you tried? And what was the result? — Phuc Tran, Feb 13 '19 at 14:32
Yes, I have updated the code . but it does not round the corner. — user1734642, Feb 13 '19 at 14:37
Are you trying to make the bottomLeft and bottomRight corners rounded? Or did you mean topLeft and topRight? — Jerome Escalante, Feb 13 '19 at 14:50

score 3 · Accepted Answer · answered Feb 13 '19 at 15:46

You can use - ClipRRect widget .

void _showBottomSheet() {
    _scaffoldKey.currentState
        .showBottomSheet<void>((BuildContext context) {
          final ThemeData themeData = Theme.of(context);
          return Theme(
            data: themeData.copyWith(canvasColor: Colors.orangeAccent,),
            child: DecoratedBox(
              decoration: BoxDecoration(color: Colors.transparent),
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(22.0),
                    topRight: Radius.circular(22.0)),
                child:
                    new Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  BottomNavigationBar(
                    currentIndex: 0, // this will be set when a new tab is tapped
                    items: [
                      BottomNavigationBarItem(
                        icon: new Icon(Icons.share),
                        title: new Text('Share'),
                      ),
                      BottomNavigationBarItem(
                          icon: Icon(Icons.bookmark),
                          title: Text('Bookmark'))
                    ],
                    onTap: (index) {
                      if (index == 0) {
                        final RenderBox box = context.findRenderObject();
//                      Share.share('Hello this is a test',
//                          sharePositionOrigin:
//                          box.localToGlobal(Offset.zero) & box.size);
                      }
                    },
                  ),
                ]),
              ),
            ),
          );
        })
        .closed
        .whenComplete(() {
          if (mounted) {
//        setState(() { // re-enable the button
//          _showBottomSheetCallback = _showBottomSheet;
//          print ("_showBottomSheetCallback enable");
//        });
          }
        });
  }

Output:

score 0 · Answer 2 · answered Feb 02 '23 at 11:43

The simple way to create a bottom sheet with rounded corners.

  child: TextButton.icon(
                  onPressed: () {
                    showModalBottomSheet<void>(
                      context: buildContext,
                      shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.vertical(
                          top: Radius.circular(20),
                        ),
                      ),
                      clipBehavior: Clip.antiAliasWithSaveLayer,
                      builder: (BuildContext context) {
                        return Flexible(

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

2 Answers2