如何更改 position 的对话框 Flutter

Question

我创建了一个对话框，当注册新用户时 Firestore 中存在一个数字时会显示该对话框。 但是，默认情况下 Android 似乎将对话框定位在显示屏的中央。 有没有办法 position 对话框让我们在调用它的小部件的 position 说，在我的情况下，它是 Raised 按钮回调。 还想知道如何在按钮上方的弹出窗口中显示验证消息，

下面是我的代码示例。

  numberExistsDialog(BuildContext context) {
var numberDialog = AlertDialog(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
  title: Text(
    'Number Already Exists',
    style: TextStyle(color: Colors.red),
    textAlign: TextAlign.center,
  ),
  content: Text(
    'Use another number',
    textAlign: TextAlign.center,
  ),
);
showDialog(
    context: context,
    builder: (BuildContext context) {
      return numberDialog;
    });

}

Answer 1

我不知道它是否可以用现有的AlertDialog来完成，但我曾经通过制作自定义对话框更改了Dialog的alignment。

您可以使用Align小部件并根据需要对齐对话框小部件。 在示例中，我将其设置为Alignment(0, 1)的bottomCenter 。

示例代码：

Align(
      alignment: Alignment(0, 1),
      child: Material(
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
        child: Padding(
          padding: const EdgeInsets.all(32.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text(
                'Number Already Exists',
                style: TextStyle(color: Colors.red),
                textAlign: TextAlign.center,
              ),
              Text(
                'Use another number',
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );

PS：您可以根据需要设置 TextStyle ，因为AlertDialog的title和content TextStyle 默认设置自 Flutter 本身。

编辑：

你可以像下面这样使用它：

numberExistsDialog(BuildContext context) {
    var numberDialog = Align(
      alignment: Alignment(0, 1),
      child: Material(
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
        child: Padding(
          padding: const EdgeInsets.all(32.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text(
                'Number Already Exists',
                style: TextStyle(color: Colors.red),
                textAlign: TextAlign.center,
              ),
              Text(
                'Use another number',
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return numberDialog;
      },
    );
  }

Answer 2

截屏：

使用带有showGeneralDialog的开箱即用的 showGeneralDialog。

Scaffold(
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {
      showGeneralDialog(
        context: context,
        barrierColor: Colors.black54,
        barrierDismissible: true,
        barrierLabel: 'Label',
        pageBuilder: (_, __, ___) {
          return Align(
            alignment: Alignment.bottomLeft,
            child: Container(
              color: Colors.blue,
              child: FlutterLogo(size: 150),
            ),
          );
        },
      );
    },
  ),
)