Flutter 如何改变对话框的位置

Question

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

下面是我的代码示例。

  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 的对齐方式。

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

示例代码：

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：您可以根据您的需要为设置的文字样式 AlertDialog的title和content文字样式由来自扑本身默认设置。

编辑：

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

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;
      },
    );
  }