Change gray overlay background of BottomSheet

Question

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

see https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/bottom_sheet.dart#L270 — pskink, Nov 12 '18 at 10:31
does anyone know if we can have a custom element instead of the overlay, write cancel in the grayed area for example — Martin Dinev, Mar 21 '23 at 06:49

score 22 · Accepted Answer · answered Jun 03 '20 at 08:59

22

New Flutter UPDATE allows you to change the barrierColor in showModalBottomSheet()

showModalBottomSheet(
      barrierColor: Colors.yellow.withOpacity(0.5),

answered Jun 03 '20 at 08:59

LP Square

927
1
10
17

Perfect! That makes it a lot easier – tyirvine Jul 07 '20 at 16:21
but, not change this status bar color.How this possible – AL MAMUN Feb 28 '22 at 19:46

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

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?

score 2 · Answer 3 · answered Nov 12 '18 at 17:00

2

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.

answered Nov 12 '18 at 17:00

Muldec

4,641
1
25
44

Change gray overlay background of BottomSheet

3 Answers3

Linked