Javatpoint Logo
Javatpoint Logo

Flutter Alert Dialogs

An alert dialog is a useful feature that notifies the user with important information to make a decision or provide the ability to choose a specific action or list of actions. It is a pop-up box that appears at the top of the app content and the middle of the screen. It can be dismissed manually by the user before resuming interaction with the app.

An alert can be thought of as a floating modal which should be used for a quick response such as password verification, small app notifications, and many more. The alerts are very flexible and can be customized very easily.

In Flutter, the AlertDialog 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.

Properties of Alert Dialog

The main properties of the AlertDialog widget are:

Title: This property gives the title to an AlertDialog box that occupies at the top of the AlertDialog. It is always good to keep the title as short as possible so that the user knows about its use very easily. We can write the title in AlertDialog as below:

Action: It displays below the content. For example, if there is a need to create a button to choose yes or no, then it is defined in the action property only. We can write an action attribute in AlertDialog as below:

Content: This property defines the body of the AlertDialog widget. It is a type of text, but it can also hold any kind of layout widgets. We can use the Content attribute in AlertDialog as below:

ContentPadding: It gives the padding required for the content inside the AlertDialog widget. We can use ContentPadding attribute in AlertDialog as below:

Shape: This attribute provides the shape to the alert dialog box, such as curve, circle, or any other different shape.

We can categories the alert dialog into multiple types, which are given below:

  1. Basic AlertDialog
  2. Confirmation AlertDialog
  3. Select AlertDialog
  4. TextField AlertDialog

Basic AlertDialog

This alert notifies the users about new information, such as a change in the app, about new features, an urgent situation that requires acknowledgment, or as a confirmation notification to the user that an action was successful or not. The following example explains the use of basic alerts.

Example

Create a Flutter project in Android Studio and replace the following code with main.dart file. To show an alert, you must have to call showDialog() function, which contains the context and itemBuilder function. The itemBuilder function returns an object of type dialog, the AlertDialog.

Output

Now, run the app, it will give the following output. When you click on the button Show Alert, you will get the alert message.

Flutter Alert Dialogs Flutter Alert Dialogs

TextField AlertDialog

This AlertDialog makes it able to accept user input. In the following example, we are going to add text field input in the alert dialog. Open the main.dart file and insert the following code.

Output

Now, run the app, it will give the following output. When you click on the button Show Alert, you will get the text input alert message.

Flutter Alert Dialogs Flutter Alert Dialogs

Confirmation AlertDialog

The confirmation alert dialog notifies a user to confirm a particular choice before moving forward in the application. For example, when a user wants to delete or remove a contact from the address book.

Example

Output

When you run the app, it will give the following output. Now, click on the button Show Alert, you will get the confirmation alert box message.

Flutter Alert Dialogs Flutter Alert Dialogs

Select Option AlertDialog

This type of alert dialog displays the list of items, which takes immediate action when selected.

Example

Output

When you run the app, it will give the following output. Now, click on the button Show Alert, you will get the select option alert box message. As soon as you select any of the available options, the alert message disappears, and you will get a message of the selected choice in the console.

Flutter Alert Dialogs Flutter Alert Dialogs
Next TopicFlutter Icons




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA