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");
        });
      }

    });
  }

Answer 1

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: