Flutter bottom sheet corner radius - dart

Question

I am writing an app that needs to have a bottomsheet with corner radius. Something like you can see in the Google Task app.
Here is the code I have
showModalBottomSheet(
context: context,
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"),
)),
);
});
Is still shows the sheet without the border radius.
Okay, I found a reason. It is indeed displaying the rounded corner but the background of the Container is staying white due to Scaffold background color.
Now the question is how do I override the Scaffold background color.

Answer 1

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

Answer 2

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

Answer 3

_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

Answer 4

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:

Answer 5

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

Answer 6

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();

Answer 7

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(),
});

Answer 8

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.

Answer 9

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
],
),
),
),
);
}
}

Answer 10

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