Flutter bottom sheet corner radius

For those who still trying to resolve this:

for some reasons Colors.transparent does not work, so all you need to do is change color to : Color(0xFF737373)

showModalBottomSheet(
        context: context,
        builder: (builder) {
          return new Container(
            height: 350.0,
            color: Color(0xFF737373),
            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"),
                )),
          );
        });

use shape property inside show showModalBottomSheet and give it RoundedRectangleBorder.

showModalBottomSheet(
        context: context,
        shape : RoundedRectangleBorder(
            borderRadius : BorderRadius.circular(20)
        ),
        builder: (builder) {
          return new Container(
            height: 350.0,
            color: Color(0xFF737373),
            child: new Container(
                child: new Center(
                  child: new Text("This is a modal sheet"),
                )),
          );
        });

  _settingModalBottomSheet(context) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext bc){
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(ScreenUtil().setWidth(16)),
              topRight: Radius.circular(ScreenUtil().setWidth(16))
            ),
          ),
        );
      }
    );
  }

It looks like this: result_1

After add below code in main.dart:

return MaterialApp(
  theme: ThemeData(
    canvasColor: Colors.transparent
  ),
);

It looks like this: result_2

Use this code, it's working perfectly for me!

shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0))

Here is the full code.

showModalBottomSheet(
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(10.0),
       ),
        context: context,
        builder: (BuildContext bc) {
          return StatefulBuilder(
              builder: (BuildContext context, StateSetter state) {
            return SingleChildScrollView(
                child: InkWell(
                    onTap: () {},
                    child: Container(
                        margin:
                            EdgeInsets.only(left: 10, right: 10, bottom: 10),
                        child: Column(
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: Container()))));
          });
        });

Output:

Okay, so changing the canvasColor in my app's main theme to Colors.transparent worked.

USE ClipRRect Widget like below.

showMaterialModalBottomSheet(
                backgroundColor: Colors.transparent,
                context: context,
                builder: (context, scrollController) =>
                    ClipRRect(
                      borderRadius: BorderRadius.circular(16),
                      child: Container(
                        height:
                        MediaQuery.of(context).size.height *
                            0.95,
                        child: whateverChild();

Use shape property.

showModalBottomSheet(
    context: context,
    shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                  topRight: Radius.circular(40),
                  topLeft: Radius.circular(40),
                  ),
    ),
    builder: (builder) {
      return new Container(
        height: 350.0,
        color: Colors.transparent,
        child: YourWidget(),
    });

You should also check the widgets on the sheet. Even if the border is applied, it seems that other widgets fill the space and are not applied. Use padding, etc. to secure the upper space of the seat.

main_screen file:

@override
Widget build(BuildContext context) {
  return Scaffold(
      key: _scaffoldKey,
      body: Column(
          children: [
              InkWell(
                onTap: () {
                    _scaffoldKey.currentState!
                        .showBottomSheet(
                    (context) => const AddItemBottomSheet(),
                    backgroundColor: Colors.transparent,
                    );
                },
                child: Column(children: [
                    const Icon(
                    Icons.add_circle_outline_rounded,
                    size: 32,
                    ),
                    Text(
                    'Add Item',
                    ),
                ]),
                ),
          ]
      )
  );
}

add_item_bottom_sheet.dart

class AddItemBottomSheet extends StatefulWidget {
  const AddItemBottomSheet({Key? key}) : super(key: key);

  @override
  State<AddItemBottomSheet> createState() => _AddItemBottomSheetState();
}

class _AddItemBottomSheetState extends State<AddItemBottomSheet> {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
      color: Colors.white,
      boxShadow: [
        BoxShadow(
            blurRadius: 60.0,
            color: Colors.black.withOpacity(0.2),
            spreadRadius: 50,
            offset: const Offset(0.0, -10.0)),
       ],
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(20.0),
        topRight: Radius.circular(20.0),
      ),
     ),
     child: SingleChildScrollView(
     child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
          
              //Your UI items on BottomSheet

          ],
        ),
     ),
    ),
  );
 }
}

I had exactly the same issue when I was using the modal_bottom_sheet library. but after I set the backgroundColor to transparent... it worked like magic

showModalBottomSheet(
    context: context,
    backgroundColor: Colors.transparent, // Add this line of Code

    builder: (builder) {
      return new Container(
        height: 350.0,
        color: Colors.transparent,
        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"),
            )),
      );
    });