Question 193400 in Flutter Question posted in
The official Flutter documentation can be found here.

Get top rounded corners on Flutter's DraggableScrollableSheet

I have an issue.

I need rounded corners on the top right and top left radius of my DraggableBottomSheet.

To achieve that I was advised to set my app global canvas color in my theme file to transparent as shown below:

...
ThemeData.light().copyWith(
    ....
    canvasColor: Colors.transparent,

After making the above change I implemented the curved corners as shown below:

showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return DraggableScrollableSheet(
          expand: false,
          initialChildSize: 0.4,
          minChildSize: 0.4,
          builder: (context, scrollController) {
            return Container(
              decoration: BoxDecoration(
                color: Theme.of(context).colorScheme.background,
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0),
                ),
              ),

Now, the big issue is that I have several DropdownButtons in my UI. I just noticed that simply because I set canvasColor to transparent in my app wide theme all the background colors of my DropdownPopups are now transparent, thereby messing my entire UI.

Unfortunately, if I set the canvasColor to white, the rounded corners of the bottomsheet are all gone.

This is weird. How can I make the roundedcorners of the bottomsheet work with the app wide canvasColor set to white?

Or, is there a way to explicitly set the background color of all Dropdown buttons in my app wide theme so that I can set the canvasColor back to transparent?

Tags:

2

Answers


  1. 0

    To make the corners rounded in the bottom sheet you need to make the modal background color to transparent and then use some container to wrap up your widgets and provide the background color (use theme.of(…) for theme colors ) also making your modal corners rounded . And there’s no need for setting up canvas colors to transparent.

    Here’s an example implementation

    
    showModalBottomSheet(
      backgroundColor: Colors.transparent,
      clipBehavior: Clip.hardEdge,
      context: context,
      builder: (context) => DraggableScrollableSheet(
          expand: false,
          initialChildSize: 0.4,
          minChildSize: 0.4,
          builder: (context, scrollController) {
            return Container(
              padding: const EdgeInsets.all(10.0),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(20.0),
              ),
              height: 100,
              child: const Text("hello"),
            );
          }),
    );
    Login or Signup to reply.
  2. 0

    showModalBottomSheet provides shape parameter, you can use it to provide rounded corner.

     showModalBottomSheet(
            context: context,
            isScrollControlled: true,
            clipBehavior: Clip.antiAlias,// default is Clip.none 
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20.0),
                topRight: Radius.circular(20.0),
              ),
            ),
            builder:
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search