Alert Dialog in flutter

Alert Dialog is one of the most important features we add to notify users about some important information. It makes the user acknowledge the situation or action he is going to make. Alert Dialog in flutter is really easy to implement.

The very primary use of Alert Dialog in an app is when the user wants to exit from the app, usually, we are notified with a confirmation box whether we want to leave the app or not.

Alert Dialog is a widget in flutter which is used to show a pop-up box and asks users to take certain actions or not according to the requirement. Let’s check how we implement it in flutter.

Key Properties of Alter Dialog Box:

actions: It shows the actions you need to perform at the bottom.
title: It shows what this dialog is about. Ex: Delete Account.
content: This gives a message/ description about the title which you have provided to the Alert Dialog box.
elevation: Elevation provided height to the widget, It gives a default shadow to the widget.

Now, create a new project, and I have used the already created Floating Action Button to show Alert Dialog.

Future<void> showAlert() async {
    showDialog(context: context,
        builder: (BuildContext context){
          return  AlertDialog(
            title: const Text("Test"),
            content: const Text("This is a test dialog"),
            actions: [
              ElevatedButton(onPressed: (){
                Navigator.of(context).pop();
              }, child: const Text("OK"))
            ],
          );
        }
    );
}

Future<void> showAlert() async {

showDialog(context: context,

builder: (BuildContext context){

return AlertDialog(

title: const Text("Test"),

content: const Text("This is a test dialog"),

actions: [

ElevatedButton(onPressed: (){

Navigator.of(context).pop();

}, child: const Text("OK"))

);

}

);

}

Flutter provides its own show Dialog widget which is used to show the Alert Dialog box.

Example:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
 Future<void> showAlert() async {
    showDialog(context: context,
        builder: (BuildContext context){
          return  AlertDialog(
            title: const Text("Test"),
            content: const Text("This is a test dialog"),
            actions: [
              ElevatedButton(onPressed: (){
                Navigator.of(context).pop();
              }, child: const Text("OK"))
            ],
          );
        }
    );



  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              'Check alert dialog',
            ),
            // Text(
            //   '$_counter',
            //   style: Theme.of(context).textTheme.headline4,
            // ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: showAlert,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

home: const MyHomePage(title: 'Flutter Demo Home Page'),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

Future<void> showAlert() async {

showDialog(context: context,

builder: (BuildContext context){

return AlertDialog(

title: const Text("Test"),

content: const Text("This is a test dialog"),

actions: [

ElevatedButton(onPressed: (){

Navigator.of(context).pop();

}, child: const Text("OK"))

);

}

);

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: const <Widget>[

Text(

'Check alert dialog',

// Text(

// '$_counter',

// style: Theme.of(context).textTheme.headline4,

// ),

floatingActionButton: FloatingActionButton(

onPressed: showAlert,

tooltip: 'Increment',

child: const Icon(Icons.add),

);

}

Output:

This is how we implement Alert Dialog in flutter.

Thanks for reading this article ❤

If I got something wrong 🙈, let me know in the comments. I would love to improve.

For more interesting blogs check out here – https://mobikul.com/blog/

Reference link:

https://api.flutter.dev/flutter/material/AlertDialog/AlertDialog.html

nausheen Siddiqui 29 July 2022

. . .

2 comments

TryFlutter Man Sep 24, 2022 at 1:15 pm

Thank you, it’s so informative!

Nausheen Siddiqui Mar 20, 2023 at 10:25 am

Thanks for reading our blog. You can check out other flutter blogs here: https://mobikul.com/blog/

Alert Dialog in flutter

Key Properties of Alter Dialog Box:

Example:

Output:

Leave a Comment Cancel Reply

2 comments

Message Sent!