How to show an alert dialog in Flutter? – Flutter AlertDialog

Let me start this post with a question. In a flutter app, how would you notify the user of situations that require acknowledgment?

The answer is to use an alert dialog. An alert dialogue notifies the user of situations that require their acknowledgment. An alert dialogue may include a title and a list of actions. The title appears above the content, and the actions appear below the content. An example of the alert dialog is, when you try to log out from your account in an authentication-based app, the app asks for your confirmation by displaying an alert dialog that says, “Are you sure?” with options, usually “yes” and “No” buttons.

Now that you know about the alert dialog, let’s see how to create and display an alert dialog in a Flutter app.

import 'package:flutter/material.dart';

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

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

  static const String _title = 'Flutter AlertDialog';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
         backgroundColor: Color.fromARGB(255,190, 230, 243),
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatelessWidget(),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () => showDialog<String>(
        context: context,
        builder: (BuildContext context) => AlertDialog(
          backgroundColor: Color.fromARGB(255, 3, 76, 138),
           elevation: 25.0,
          shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(18))
  ),
          title: const Text('Accept?'),
          content: const Text('Do you accept?'),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context, 'Cancel'),
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context, 'OK'),
              child: const Text('OK'),
            ),
          ],
        ),
      ),
      child: const Text('Show Dialog'),
    );
  }
}

Here’s what I did –

  1. I used a TextButton in the above code. The text button calls the showDialog() method when it is pressed. When this method is invoked, a Material dialogue is displayed above the app’s current contents, and it returns a Future. This Future completes when the dialog is dismissed.
  2. Created alert dialog using the AlertDialog widget.
  3. Customized the alert dialog by using the backgroundColor, shape and elevation properties.
  4. Set the title using the title property of the AlertDialog.
  5. Set the description using the content property of the Alertdialog.
  6. Specified two action buttons – “ok” and “cancel”.
  7. Used the Navigator.pop() method to dismiss the dialog when the button is pressed.

Now, let’s see the output.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: