Flutter Alert Dialogs

Flutter Alert Dialog - Example Tutorial

So in this tutorial we would Flutter Create Alert Dialog with Yes No Cancel Buttons Android iOS Example Tutorial.

The Alert Dialog is basically a Popup in Flutter. Whenever you want to create a floating box that is centered on the page, you can simply use an Alert Dialog. The implementation of the same is very easy and has been provided in-built with Flutter SDK.

In Flutter, the Alert Dialog is a widget, which informs the user about the situations that need acknowledgment. The Flutter alert dialog contains an optional title that displayed above the content and list of actions displayed below the content.

Example:-

import 'package:flutter/material.dart';  

      

    void main() => runApp(MyApp());  

      

    class MyApp extends StatelessWidget {  

      @override  

      Widget build(BuildContext context) {  

        final appTitle = 'Flutter Basic Alert Demo';  

        return MaterialApp(  

          title: appTitle,  

          home: Scaffold(  

            appBar: AppBar(  

              title: Text(appTitle),  

            ),  

            body: MyAlert(),  

          ),  

        );  

      }  

    }  

      

    class MyAlert extends StatelessWidget {  

      @override  

      Widget build(BuildContext context) {  

        return Padding(  

          padding: const EdgeInsets.all(20.0),  

          child: RaisedButton(  

            child: Text('Show alert'),  

            onPressed: () {  

              showAlertDialog(context);  

            },  

          ),  

        );  

      }  

    }  

      

    showAlertDialog(BuildContext context) {  

      // Create button  

      Widget okButton = FlatButton(  

        child: Text("OK"),  

        onPressed: () {  

          Navigator.of(context).pop();  

        },  

      );  

      

      // Create AlertDialog  

      AlertDialog alert = AlertDialog(  

        title: Text("Simple Alert"),  

        content: Text("This is an alert message."),  

        actions: [  

          okButton,  

        ],  

      );  

      

      // show the dialog  

      showDialog(  

        context: context,  

        builder: (BuildContext context) {  

          return alert;  

        },  

      );  

    }