showDialog in Flutter

539

In flutter, a dialog is a widget which popup on the screen when button is pressed. When a dialog box is popup on the screen its disabled the all other functions until we close or provide the information to it.

A showDialog provide the information to the users as it popup on the current screen of the application.

In this tutorial, we will learn about showdialog in flutter. Here, we will discuss with an example.

Constructor

Future<T?> showDialog<T>({
  required BuildContext context,
  required Widget Function(BuildContext) builder,
  bool barrierDismissible = true,
  Color? barrierColor = Colors.black54,
  String? barrierLabel,
  bool useSafeArea = true,
  bool useRootNavigator = true,
  RouteSettings? routeSettings,
})

Code Implementation

import 'package:flutter/material.dart';

class PopupDialogExample extends StatelessWidget {
  const PopupDialogExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Popup Dialog Example"),
          centerTitle: true,
          elevation: 0,
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showDialog(
                  context: context,
                  builder: (context) {
                    return AlertDialog(
                      title: const Text(
                        "About Flutter Hope",
                        style: TextStyle(
                            fontSize: 16.0, fontWeight: FontWeight.w600),
                      ),
                      content: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: const [
                          Text(
                              "Flutter Hope Provides you tutorials, projects, and ideas for flutter that will make your flutter journey more meaningful.\n"),
                          Text(
                              "All the projects & contents of this website is prepared by flutterhope. We do also provide open source project with sources. If you have additional questions or require more information do not hesitate to contact us.\n"),
                          Text(
                            "Email: [email protected]",
                            style: TextStyle(fontWeight: FontWeight.w800),
                          )
                        ],
                      ),
                      actions: [
                        TextButton(
                            onPressed: () {
                              Navigator.pop(context);
                            },
                            child: const Text(
                              "Cancel",
                              style: TextStyle(color: Colors.red),
                            )),
                        TextButton(
                            onPressed: () {
                              Navigator.pop(context);
                            },
                            child: const Text("OK")),
                      ],
                    );
                  });
            },
            child: const Padding(
              padding: EdgeInsets.all(12.0),
              child: Text(
                "Open Dialog",
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
              ),
            ),
          ),
        ));
  }
}

Output

When you pressed on the open Dialog button following dialog box will pop up on the screen.

Here is the github link of this project:

https://github.com/NilamPathak578/flutterHopeProjects/tree/PopupDialog

Thank you for reading this article. If you have any queries regarding any topic, feel free to share with us. We will try to solve your problems.

Happy Learning.

Follow me here:

Leave A Reply

Your email address will not be published.