是否可以禁用对话框上的阴影/覆盖？

Question

我想知道是否有办法禁用对话框的阴影/覆盖影响？基本上这样我就可以得到一个类似于该图像右侧的对话框：

我对此的最佳尝试是使用包含自定义对话框的堆栈，然后将其切换为显示或不显示，但随后我无法滚动每个自定义对话框自己的 ListView 而不会弄乱另一个对话框。我知道这违反了 Material Design 指南，但我正在尝试从 dribble.com 复制 UI。

谢谢！

编辑：

我已经通过编辑

showGeneralDialog

方法几乎实现了这种效果，但仍然存在高程阴影：

await showGeneralDialog(
    context: context,
    pageBuilder: (BuildContext buildContext,
        Animation<double> animation,
        Animation<double> secondaryAnimation) {
      return SafeArea(
        child: Builder(builder: (context) {
          return AlertDialog(
             content: Container(
                 color: Colors.white,
                 width: 150.0,
                 height: 150.0,
                 child: Center(child: Text("Testing"))));
        }),
      );
    },
    barrierDismissible: true,
    barrierLabel: MaterialLocalizations.of(context)
        .modalBarrierDismissLabel,
    barrierColor: null,
    transitionDuration:
        const Duration(milliseconds: 150));

编辑2：只是一张图像来说明上述代码的更改，显示到目前为止我已经能够禁用深色叠加层，但对话框上仍然存在我似乎无法摆脱的高程：

编辑3：我想如果我能够更改

AlertDialog

的

showGeneralDialog

中的

Builder

那么我就可以让它工作，但我在放入一些

Material

但不不要占据整个屏幕。

Answer 1

开始工作了！您必须在

Builder

方法的

showGeneralDialog

中创建自己的对话框（如 Widget），并将

barrierColor

设置为

null

:

await showGeneralDialog(
  context: context,
  pageBuilder: (BuildContext buildContext,
      Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return SafeArea(
      child: Builder(builder: (context) {
        return Material(
            color: Colors.transparent,
            child: Align(
                alignment: Alignment.center,
                child: Container(
                    height: 200.0,
                    width: 250.0,
                    color: Colors.white,
                    child:
                        Center(child: Text('Testing')))));
      }),
    );
  },
  barrierDismissible: true,
  barrierLabel: MaterialLocalizations.of(context)
      .modalBarrierDismissLabel,
  barrierColor: Colors.transparent,
  transitionDuration: const Duration(milliseconds: 150));

Answer 2

朋友，设置参数“elevation”=0。就可以了。

AlertDialog(
 elevation: 0,
),

Answer 3

我使用下面的代码实现了结果。技巧是showDialog方法中的barrierColor属性，我将其设置为白色，不透明度值为零，并且屏障阴影消失了

AlertDialog alert = AlertDialog(
    backgroundColor: Colors.transparent,
    elevation: 0,
    content: new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Loader(),
      ],
    ),
  );
  showDialog(
    barrierColor: Colors.white.withOpacity(0),
    barrierDismissible: false,
    context: context,
    builder: (BuildContext context) {
      return WillPopScope(
            onWillPop: (){},
          child: alert);
    },
  );

Answer 4

只需在showDialog中将barrierColor参数设置为Colors.transparent即可。 示例：

showDialog(
            context: context,
            barrierColor: Colors.transparent, // Here the solution
            builder: (context) => myDialog(),
          );