Related Articles

Related Articles

Alert Dialog box in Flutter
  • Last Updated : 23 Oct, 2020

Alert Dialog box informs the user about the situation that requires acknowledgment. Alert Box is a prompt that takes user confirmation. The very basic use of the alert box is used when we close the app, usually, we are notified with a prompt whether you want to exit or not. That’s an alert box.

The below-added code shows how to perform alert Dialog box in flutter. I have used a button (Raised Button in flutter ) to trigger the alert dialog box. In its on the pressed property, we have to use the showDialog widget of flutter. It takes context and a builder. In builder, we provide the AlertDialog widget with title, content(Description of a title), and actions (Yes or no buttons), and our alert dialog box is ready to use.

Key Properties of Alter Dialog Box:

  • actions: The set of actions that are displayed at the bottom of the dialog
  • title: The title of the dialog is displayed in a large font at the top of the dialog.
  • content: This gives a message/ description about the title which you have provided to the Alert Dialog box.
  • backgroundColor: It provides the background color to the widget which is being used in.
  • elevation: Elevation provided height to the widget, It gives a default shadow to the widget.

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

Example:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
        backgroundColor: Colors.green,
      ),
      body: Container(
        child: Center(
          child: RaisedButton(
            onPressed: () {
              return showDialog(
                context: context,
                builder: (ctx) => AlertDialog(
                  title: Text("Alert Dialog Box"),
                  content: Text("You have raised a Alert Dialog Box"),
                  actions: <Widget>[
                    FlatButton(
                      onPressed: () {
                        Navigator.of(ctx).pop();
                      },
                      child: Text("okay"),
                    ),
                  ],
                ),
              );
            },
            child: Text("Show alert Dialog box"),
          ),
        ),
      ),
    );
  }
}

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :