如何改变对话框的位置 翩翩起舞

Question

我已经创建了一个对话框，当注册一个新用户时，当一个号码存在于Firestore中时，这个对话框就会显示。然而，默认情况下，Android似乎将对话框定位在显示屏的中心。有没有一种方法来定位对话框，让我们说在其调用的widget的位置，对于我的情况下，它的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来做，但我曾经通过制作一个自定义对话框来改变对话框的对齐方式。

你可以使用 Align 小组件，并根据你的需要对齐你的对话框小组件。在这里的例子中，我将它设置为 bottomCenter 也就是 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：你可以根据自己的需要设置TextStyle为 AlertDialog's title 和 content TextStyle默认由Flutter自己设置。

EDIT:

你可以像下面一样使用它。

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

你必须由你自己定制它，这 此处 是一个示例代码。或者直接使用包。这里有一个很酷的。

flutter_custom_dialog