How to change the position of a dialogue box Flutter

Question

I have created a dialogue box which displays when a number exists in Firestore when registering a new user. However by default Android seems to be positioning the dialogue box in the center of the display. Is there a way to position the dialog box lets say at the position of the widget in which its called from , for my case it the Raised button call back. Also would like to know how I can display from validation message in a pop just above a button,

Below is a sample of my code.

  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

I don't know if It can be done with the existing AlertDialog, but I have once changed the alignment of Dialog by making a custom dialog.

You can Use Align widget and align your dialog widget as per your need. Here in example i am setting it to the bottomCenter that is Alignment(0, 1).

Example code:

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: You can set the TextStyle according to your need as AlertDialog's title and content TextStyle is set by default from the Flutter itself.

EDIT:

You can use it like below:

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

Screenshot:

---

Use showGeneralDialog which comes out of the box with Flutter.

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

Answer 3

You have to customize it by your self which here is a sample code. Or just use the packages. Here is a cool one:

flutter_custom_dialog

Answer 4

You can do with showGeneralDialog if you want to animate the dialog or showDialog to simply to show the dialog, what you need to do is just change the alignment property for Dialog. Here is the example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:freakfitness/utils/dimens.dart';

class CustomToast extends StatefulWidget {
  String? message;

  CustomToast({this.message});

  @override
  State<StatefulWidget> createState() {
    return _CustomToastState();
  }

  void show(BuildContext context, String message) {
    showGeneralDialog(
        context: context,
        pageBuilder: (ctx, a1, a2) {
          return CustomToast(message: message);
        },
        transitionBuilder: (ctx, a1, a2, child) {
          return SlideTransition(
              position:
                  Tween(begin: Offset(0, -1), end: Offset(0, 0)).animate(a1),
              child: child);
        },
        transitionDuration: Duration(milliseconds: 700));
  }
}

class _CustomToastState extends State<CustomToast> {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      insetPadding: EdgeInsets.only(top: kToolbarHeight),
      alignment: Alignment.topCenter,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(4.0),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: Container(
        padding: EdgeInsets.all(padding_large),
        decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            color: Colors.white,
            borderRadius: BorderRadius.circular(4.0)),
        child: Text(
          widget.message ?? "",
          style: Theme.of(context)
              .textTheme
              .subtitle2
              ?.copyWith(color: Colors.black),
        ),
      ),
    );
  }
}

ScreenShot: