Is there a way to change the overlay background color when using showModalBottomSheet
?
Right now the color is always a gray color, but I want to use a different color like green as shown below.
Here is the code used in the demo for reference
showModalBottomSheet<void>(context: context, builder: (BuildContext context) {
return Container(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Text('This is the modal bottom sheet. Tap anywhere to dismiss.',
textAlign: TextAlign.center,
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 24.0
)
)
)
);
});
because I needed the rounded corners, I knew that changing the canvasColor in the materialApp would do the trick, but other widgets would also change colors. showModalBottomSheet < Null > (context: context, builder: (BuildContext context) { return Theme( data: Theme. of(context). copyWith(canvasColor: Colors.
To make a bottom sheet with a transparent background: Select "Background Color" and make sure the opacity is set to 0% - this will give you "transparent" instead of "unset. Set the barrier color to whatever you want and your bottom sheet will have no set background color.
New Flutter UPDATE allows you to change the barrierColor
in showModalBottomSheet()
showModalBottomSheet(
barrierColor: Colors.yellow.withOpacity(0.5),
You can actually change this but in order to do so you have to create a copy of this widget file in order to customize it. (steps below are for vscode)
However, by doing this, the widget won't be automatically updated by Flutter because it'd no longer be part of the SDK.
Create A Copy of A Widget To Customize
Right-click widget and select Go to definition
- this will bring you to the widget's original file
Copy all of the code and paste it into a new .dart file with the same name - you'll notice there will now be errors due to a lack of dependencies.
In the case of BottomSheet you just need to add import 'package:flutter/material.dart';
Now import it like so import 'package:projectname/bottom_sheet.dart' as my;
- the as my
allows it to use the same .dart file name
Now when referencing it just add my.
prior like so
my.showModalBottomSheet(
context: (context),
isScrollControlled: false,...
Customize Background Overlay Color
Now in bottom_sheet.dart
just search for barrierColor and change Colors.black54
to whatever color you want!
I hope this will help anyone in the future!
Related Question
How to change the background color of BottomSheet in Flutter?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With