更改BottomSheet的灰色叠加背景

Question

使用showModalBottomSheet时是否可以更改覆盖背景色？

现在颜色始终是灰色，但是我想使用其他颜色，例如绿色，如下所示。

这是演示中使用的代码供参考

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

Answer 1

新的Flutter UPDATE允许您更改barrierColor中的showModalBottomSheet()

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

Answer 2

您实际上可以更改此设置，但是为此您必须创建此小部件文件的副本才能自定义它。 （以下步骤适用于vscode）

但是，执行此操作后，Flutter不会自动更新该小部件，因为它不再是SDK的一部分。

创建要自定义的小部件的副本

1. 右键单击窗口小部件并选择Go to definition-这会将您带到窗口小部件的原始文件

2. 复制所有代码并将其粘贴到具有相同名称的新.dart文件中-您会发现由于缺少依赖项，现在将出现错误。

3. 对于BottomSheet，您只需添加import 'package:flutter/material.dart';

4. 现在像这样import 'package:projectname/bottom_sheet.dart' as my;- as my允许它使用相同的.dart文件名

   导入它。

5. 现在引用它时，只需像这样先添加my.

my.showModalBottomSheet(
        context: (context),
        isScrollControlled: false,...

自定义背景叠加颜色

现在在bottom_sheet.dart中，只需搜索 barrierColor 并将Colors.black54更改为所需的颜色即可！

我希望这会在将来对任何人有帮助！

---

相关问题

How to change the background color of BottomSheet in Flutter?

Answer 3

简短的回答：您不能。

颜色被硬编码到_ModalBottomSheetRoute类中（通过@pskink链接），无法更改其值。