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.

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"),

3. backgroundColor

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

backgroundColor: Colors.amber,

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"))
                    ],

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,

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),

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),
                  )

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),

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