Flutter Alertdialog Widget

Flutter Alertdialog Widget: The Complete Implementation

Flutter alertdialog allows you to alert or inform the user when they click on the button. You can create an alert dialog in flutter using AlertDialog() class and it has many properties in it that allow you to manipulate the dialog information. In this entire tutorial, you will know the complete implementation of the flutter alertdialog.

How to create a Flutter AlertDialog?

You can create an alert dialog using the AlertDialog() class. You will use it as a constructor in any existing widget. Let’s create a Simple Alert Dialog by running the below lines of code.

import 'package:flutter/material.dart';

class FlutterAlertDialog extends StatefulWidget {
  const FlutterAlertDialog({Key? key}) : super(key: key);

  @override
  _FlutterAlertDialogState createState() => _FlutterAlertDialogState();
}

class _FlutterAlertDialogState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Alert Dialog App",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Alert Dialog App"),
        ),
        body: AlertDialogWidget(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton(
        onPressed: () {
          showDialog(
              context: context,
              builder: (BuildContext context) => AlertDialog(
                    title: Text("This is the title"),
                  ));
        },
        child: Text("Alert Button"),
      ),
    );
  }
}

void main() {
  runApp(FlutterAlertDialog());
}

When you will click on the Alert Button you will get a popup alert dialog like the one below.

Simple Flutter Alert Dialog
Simple Flutter Alert Dialog

How to use Flutter AlertDialog ?

In this section, you will know what you can do with the alert dialog using various properties and manipulating it easily.

1. title

It allows you to add a text widget on top of the alert dialog. Like I have used in the above code “This is a title”.

2. content

The content attribute adds text to the center of the dialog in a lighter font. You can change the style of the text using the contentTextStyle.

content: Text("This is the content"),
Adding content to the alert dialog
Adding content to the alert dialog

3. backgroundColor

If you will use this attribute then it will change the background color of the dialog.

backgroundColor: Colors.amber,
Changing the color of the dialog
Changing the color of the dialog

 

4. actions

It is a list of widgets that you can use to show the list of widgets at the bottom of the dialog. For example, I am putting two text buttons on the alert dialog one is Yes and the other is No. Add the below lines of code.

 actions: [
                      TextButton(onPressed: () {}, child: Text("Yes")),
                      TextButton(onPressed: () {}, child: Text("No"))
                    ],
Use of actions attributes in alert dialog
Use of actions attributes in an alert dialog

You can also manipulate the text button by adding some logic inside the onPressed() method.

5. actionsAlignment

This property allows you to position the actions horizontally. It uses the same process as you use in MainAxisAlignement of the row widget. For example, I want to center the actions widgets then I will use the following code.

actionsAlignment: MainAxisAlignment.center,
Aligining the actions widget to the center in alert dialog
Aligning the actions widget to the center in alert dialog

6. contentPadding

If you want to add padding to the content section of the alert dialog then Add the below line of code.

actionsPadding: EdgeInsets.all(20),
Adding content padding in the alert dialog
Adding content padding in the alert dialog

7. contentTextStyle

If you want to change the style of the content then you have to use the contentTextStyle. For example, I want to change the font size and color of the content to the red then I will add the following line of code.

contentTextStyle:
                        TextStyle(color: Colors.red, fontSize: 40),
                  )
Change the text style of the content
Change the text style of the content

8. scrollable

It is a boolean type. If you set the scrollable attribute to true then the title and the content will be wrapped in scrollable.

scrollable: true,

9. shape

The shape attribute adds a border to the alert dialog widget, For example, I want to surround the alert dialog widget with a border of width 2 and red color then I will add the following lines of code.

shape: Border.all(width: 2, color: Colors.red),
Adding border to alert dialog widget
Adding border to alert dialog widget

Conclusion

Alert Dialog is a very useful widget in a flutter. There are many applications of it. For example, you can use this widget and show a rating for your app on it so that users that have installed your app can rate your app. These are the general attributes that you will use for building a better alert dialog widget. I hope you have liked this tutorial. If you have any queries then you can contact us for more help.

Source:

Flutter Documentation

Code The Best
Hi, I am CodeTheBest. Here you will learn the best coding tutorials on the latest technologies like a flutter, react js, python, Julia, and many more in a single place.