更改 BottomSheet 的灰色叠加背景答案

【问题标题】：Change gray overlay background of BottomSheet更改 BottomSheet 的灰色叠加背景
【发布时间】：2018-11-12 05:05:02
【问题描述】：

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

【问题讨论】：

见github.com/flutter/flutter/blob/master/packages/flutter/lib/src/…

标签： dart flutter

【解决方案1】：

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

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

【讨论】：

完美！这使它更容易
但是，不要改变这个状态栏的颜色。这怎么可能

【解决方案2】：

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

但是，通过这样做，Flutter 不会自动更新小部件，因为它不再是 SDK 的一部分。

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

右键单击小部件并选择Go to definition - 这将带您进入小部件的原始文件
复制所有代码并将其粘贴到具有相同名称的新 .dart 文件中 - 您会注意到现在由于缺少依赖项而出现错误。
对于BottomSheet，您只需添加import 'package:flutter/material.dart';
现在像 import 'package:projectname/bottom_sheet.dart' as my; 那样导入它 - as my 允许它使用相同的 .dart 文件名
现在在引用它时只需添加 my. 之前这样

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

自定义背景叠加颜色

现在在 bottom_sheet.dart 中搜索 barrierColor 并将 Colors.black54 更改为您想要的任何颜色！

我希望这对将来的任何人都有帮助！

【讨论】：

【解决方案3】：

简短的回答：你不能。

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

【讨论】：