颤振：- 显示底页透明答案

【问题标题】：Flutter:- show BottomSheet transparency颤振：- 显示底页透明
【发布时间】：2019-03-10 19:59:37
【问题描述】：

我想打开一个 showBottomSheet。这是我的代码，它工作正常，我可以打开 ButtomSheet，但它没有产生透明效果。我可以在这张纸的后面看到，即使我也尝试过不透明也不起作用。

 showBottomSheet(
            context: context,
            builder: (context) {
              return Opacity(
                opacity: .1,
                child: Container(
                  height: 400.0,
                  color: Colors.transparent,
                ),
              );
            });

【问题讨论】：

标签： android dart flutter

【解决方案1】：

添加不透明度为 0 的屏障颜色对我来说效果很好。

showModalBottomSheet(
      barrierColor: Colors.white.withOpacity(0),
      backgroundColor: Colors.transparent,
);

【讨论】：

【解决方案2】：

在 showModelBottomSheet 中试试这个

showModalBottomSheet(
        backgroundColor: Colors.transparent,
)

【讨论】：

这是最简单的，对我有用！谢谢！

【解决方案3】：

尝试用这种方式归档全屏底页的透明主题：

MaterialApp(
   theme: ThemeData(canvasColor: Colors.transparent)
),

还有，

showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    barrierColor: Colors.white.withOpacity(0.05),
    builder: (context) => CustomWidget(),
)

【讨论】：

【解决方案4】：

很简单，只需要在main中实现：

bottomSheetTheme: BottomSheetThemeData(
            backgroundColor: Colors.black.withOpacity(0)),

另外，请看下图。

【讨论】：

“在此处输入图片描述”应替换为有用的文字。
谢谢，如果它工作得很好，那么不需要修改内部代码。并且无法打开您的图片网址。你试过这段代码吗？
这对我有用。我进行了快速编辑以修复图像链接描述。

【解决方案5】：

我也遇到过那个烦人的事情，我尝试了很多事情，很多想法等等。对我来说最简单的方法就是设置barrierColor: Colors.black.withAlpha(1)，它太愚蠢了。 .withAlpha(1)他的取值范围是0到255，所以当你设置为1的时候barrierColor就接受了，只是小到你看不到颜色XD。

我目前的flutter版本是：Channel master, v1.15.1-pre.35

这是完整的例子：

showModalBottomSheet(
      context: context,
      elevation: 0,
      barrierColor: Colors.black.withAlpha(1),
      backgroundColor: Colors.transparent,
      builder: (context) => Container(
        height: _height * 0.45,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: const Radius.circular(50.0),
            topRight: const Radius.circular(50.0),
          ),
        ),
        child: Center(
          child: Text("Modal content goes here"),
        ),
      ),
    )

【讨论】：

【解决方案6】：

BottomSheet 使用默认的背景颜色MaterialType.canvas，因此为了将其设置为对整个应用透明，您可以像这样初始化MaterialApp：

new MaterialApp(
  title: 'Transparent Bottom Bar',
  theme: new ThemeData(
    canvasColor: Colors.transparent
  ),
  home: new YourAppPage()

作为替代方案，您可以使用 Theme 小部件为一个小部件设置它：

@override
Widget build(BuildContext context) {
  return
    Theme(
      data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
      child: ...);

【讨论】：

他可能不希望整个应用程序都是透明的。
当然可以，但我已经在测试应用程序上尝试过这个解决方案，但并非一切都变得透明。同样，总是可以使用 Widgets 嵌套来限制范围。
很高兴你成功了！如果您发现我的回复有用，请接受它，以便其他人看到它有效，或分享您的最终解决方案。让我们一起让 Flutter 对社区更加友好?
感谢大家，终于我做到了，通过修改内部类showModalBottomSheet。
我刚刚编辑了showModalBottomSheet的内部代码，这是我的代码。我不能评论整个代码，我做了什么，我创建了一个 customshowModalBottomSheet，然后。我根据要求修改了它。 final Widget bottomSheet = new Material( key: _childKey, child: BackdropFilter( filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0), child: widget.builder(context)), color: Colors.white30, );