Change gray overlay background of BottomSheet
Short answer : you can't.
The color is hardcoded into the
_ModalBottomSheetRoute class (as linked by @pskink) and there is no way to change its value.
New Flutter UPDATE allows you to change the
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
Now import it like so
import 'package:projectname/bottom_sheet.dart' as my;- the
as myallows 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
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!
How to change the background color of BottomSheet in Flutter?