Question

我想打开一个showBottomSheet。这是我的代码，可以正常工作，我可以打开ButtomSheet，但是没有提供透明效果。我可以在此工作表的后面看到，即使我也尝试了Opacity也不起作用。

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

Answer 1

非常容易，仅在主程序中实现

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

查看图片

Screenshot of the above code in context

Answer 2

我也面临着烦人的事情，我尝试了很多事情，很多想法等。对我来说，最简单的方法就是设置barrierColor: Colors.black.withAlpha(1)，这太愚蠢了。 .withAlpha(1)的范围是0到255，因此，将其设置为1时，barrierColor会接受它，因为它的数量非常小，您看不到颜色XD。

我当前的版本为：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"),
        ),
      ),
    )

Answer 3

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: ...);

Answer 4

尝试通过这种方式来存档全屏底部工作表的透明主题：

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

然后

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

Answer 5

在showModelBottomSheet内部尝试

showModalBottomSheet(
        backgroundColor: Colors.transparent,
)

Answer 6

添加不透明度为 0 的 barrierColor 对我来说效果很好。

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

颤振：-显示BottomSheet透明度

6 个答案: