颤振 - 具有透明背景的小部件

Question

我正在创建一个具有透明背景的 StatefulWidget。相同的代码是：

return Scaffold(
  body: Builder(
    builder: (context) => Material(
          color: Colors.black.withOpacity(0.75),
          child: new SafeArea(
            child: Center(
              child: Container(
                color: Colors.white,
                child: ListView(
                  children: <Widget>[
                    resetPasswordLabel,
                    inputFields,
                    doneButton(context),
                  ],
                ),
                height: 250.0,
                margin: EdgeInsets.only(left: 20.0, right: 20.0),
              ),
            ),
          ),
        ),
  ),
);

问题：当我使用 Navigator 打开此小部件时，透明颜色可见 1 - 2 秒，然后变为黑色背景。

输出：

接受的输出应该是：

请在这里帮助我。

Answer 1

当你打开一个带有推送状态的新“页面”时，旧的“页面”或状态会被释放，直到你调用Navigator.pop(context)。如果您想要在您提供的屏幕截图中显示效果，请使用dialog。

Answer 2

您可以创建一个自定义对话框并使用下面的行打开它...

Navigator.of(context).push(
    PageRouteBuilder(
        pageBuilder: (context, _, __) => CustomAlertDialog(), opaque: false),
);

opaque: false 将保持背景透明。