颤振：-显示BottomSheet透明度

Question

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

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

Answer 1

我也遇到了那个烦人的事情，我尝试了很多事情，很多想法等等。对我来说最简单的方法就是设置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"),
        ),
      ),
    )

Answer 2

很容易只在主工具上实现

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

看图片

上面代码的上下文截图

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