Flutter – Alert Dialogs

Alert dialog is a simple widget in flutter, used to alert the user as its actions are mostly unrevertable. It is just a small window that prompts the user either to take up a decision or to enter an information, without changing the current screen as it places itself over the background screen.

It consists of three sections namely — title, content and actions, where the title is mostly a text widget that takes the alert dialog’s name and the content is the alert dialog’s body that can be a simple text widget or an image or any interactive widgets and finally the actions is a list of widgets, that allows us to create as many actions widgets we want to create. It mostly consists of buttons, that are usually at the bottom of the alert dialog.

To achieve this, we need to call the showDialog() function to pop the dialog on the screen, which takes an itemBuilder function that returns an alert dialog and a context.

void _popupDialog(BuildContext context) {  showDialog(      context: context,      builder: (context) {        return AlertDialog();      }  );}

Basic code of how to create a basic alert dialog example, that gives you an understanding of how to use it in your own app, with your requirements.

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      home: MyHomePage(),    );  }}class MyHomePage extends StatefulWidget {  @override  _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('Flutter Alert Dialog Example'),      ),      body: Center(        child: Material(          child: InkWell(            onTap: () => _popupDialog(context),            child: Text('Show Dialog'),          ),        ),      ),    );  }  void _popupDialog(BuildContext context) {    showDialog(        context: context,        builder: (context) {          return AlertDialog(            title: Text('Alert Dialog Example !!!'),            content: Text('Alert Dialog Body Goes Here  ..'),            actions: <Widget>[              FlatButton(                  onPressed: () => Navigator.of(context).pop(),                  child: Text('OK')),              FlatButton(                  onPressed: () => Navigator.of(context).pop(),                  child: Text('CANCEL')),            ],          );        });  }}

You can also refer the flutter.io page for more about flutter alert dialogs.