是否可以在对话框上禁用阴影/覆盖?

时间:2018-12-18 16:03:32

标签: dialog flutter overlay shadow

我想知道是否有办法禁用对话框的阴影/覆盖?基本上,这样我就可以在该图像的右侧获得一个对话框,就像它一样:

我的最佳尝试是使用包含我的自定义对话框的堆栈,然后将其切换为显示或不显示,但是我无法滚动每个自定义对话框自己的ListView,而又不会弄乱另一个对话框。我知道这违反了材料设计指南,但是我正在尝试从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:只是一幅图像,说明上述代码的变化,表明我到目前为止已经能够禁用深色覆盖,但是对话框上仍然有高程,我似乎无法摆脱:< / p>

enter image description here

编辑3:我认为,如果我能够在AlertDialog的{​​{1}}中更改showGeneralDialog,那么我可以使其正常工作,但是我很难安装是Builder但不会占用整个屏幕的内容。

3 个答案:

答案 0 :(得分:1)

我已经使用下面的代码实现了结果。技巧是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);
    },
  );

答案 1 :(得分:0)

开始工作!您必须在Builder方法的showGeneralDialog中创建自己的对话框,例如Widget,并将barrierColor设置为null

enter image description here

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: null,
  transitionDuration: const Duration(milliseconds: 150));

答案 2 :(得分:0)

朋友,将参数“海拔”设置为0。有效。

AlertDialog(
 elevation: 0,
),