CODEWITHSUNDEEP
flutterflutter-layout
Brendan Gaturu
Brendan Gaturu

Reputation: 85

How to change the position of a dialogue box Flutter

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

}

Upvotes: 6

Views: 15207

Answers (4)

Saurabh
Saurabh

Reputation: 308

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: enter image description here

Upvotes: 0

CopsOnRoad
CopsOnRoad

Reputation: 268414

Screenshot:

enter image description here

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

Upvotes: 3

Taba
Taba

Reputation: 4336

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

enter image description hereenter image description hereenter image description hereenter image description here enter image description hereenter image description here

Upvotes: 1

ibhavikmakwana
ibhavikmakwana

Reputation: 10161

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

Upvotes: 9

Related Questions