Flutter Alert Dialog
D. Gichuki,
Alert Dialog
• 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.
Alert Dialog
• 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
• 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:
AlertDialog(title: Text("Sample Alert Dialog"),
Properties of Alert Dialog
• 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:
actions: <Widget>[
FlatButton(child: Text("Yes"),),
FlatButton(child: Text("No"),)
],)
Properties of Alert Dialog
• 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:
actions: <Widget>[
FlatButton(child: Text("Yes"),),
FlatButton(child: Text("No"),)
],)
content: Text("It is the body of the alert Dialog"),
Properties of Alert Dialog
• ContentPadding: It gives the padding required
for the content inside the AlertDialog widget.
• We can use ContentPadding attribute in
AlertDialog as below:
contentPadding: EdgeInsets.all(32.0),
Properties of Alert Dialog
• Shape: This attribute provides the shape to the
alert dialog box, such as curve, circle, or any
other different shape.
shape: CircleBorder(),
shape: CurveBorder(),
Properties of Alert Dialog
• We can categories the alert dialog into multiple
types, which are given below:
Basic AlertDialog
Confirmation AlertDialog
Select AlertDialog
TextField AlertDialog
• Example