CupertinoAlertDialog Widget – Flutter Widget Guide By Flutter Agency

· 5 min read
CupertinoAlertDialog Widget - Flutter Widget Guide By Flutter Agency
CupertinoAlertDialog Widget - Flutter Widget Guide By Flutter Agency

An alert dialog informs the user about situations that require acknowledgment. An alert dialog has an optional title, optional content, and an optional list of actions. The title is displayed above the content and the actions are displayed below the content. In this article, we will learn about CupertinoAlertDialog Widget.

What is CupertinoAlertDialog Widget?

This dialog styles its title and content to match the standard iOS title and message dialog text style. These default styles can be overridden by explicitly defining TextStyles for Text Widget that is part of the title or content.

To display action buttons that look like standard iOS dialog buttons, provide CupertinoDialogActions for the actions given to this dialog.

Default Constructor for it will look like below:

CupertinoAlertDialog({
  Key key,
  Widget title,
  Widget content,
  List<Widget> actions: const [],
  ScrollController scrollController,
  ScrollController actionScrollController,
  Duration insetAnimationDuration: const Duration(milliseconds: 100),
  Curve insetAnimationCurve: Curves.decelerate,
});

Properties:

  • Key: The widget key, used to control if it should be replaced.
  • title: The title of the dialog is displayed in a large font at the top of the dialog.
  • List<Widget> actions: The optional set of actions that are displayed at the bottom of the dialog.
  • actionScrollController: A scroll controller that can be used to control the scrolling of the actions in the dialog.Defaults to null, and is typically not needed.
  • content: The content of the dialog is displayed in the center of the dialog in a lighter font.
  • insetAnimationCurve: The curve to use for the animation shown when the system keyboard intrudes into the space that the dialog is placed in. Defaults to Curves.decelerate.
  • insetAnimationDuration: The duration of the animation to show when the system keyboard intrudes into the space that the dialog is placed in.Defaults to 100 milliseconds.
  • scrollController: A scroll controller that can be used to control the scrolling of the content in the dialog.Defaults to null, and is typically not needed, since most alert messages are short.

How to use CupertinoAlertDialog Widget in Flutter?

The following code snippet tells us how to implement CupertinoAlertDialog Widget in Flutter.

Center(
     child: RaisedButton(
       onPressed: () {
         showDialog(
             context: context,
             child: new CupertinoAlertDialog(
               title: new Column(
                 children: <Widget>[
                   new Text("CupertinoAlertDialog"),
                   new Icon(
                     Icons.favorite,
                     color: Colors.red,
                   ),
                 ],
               ),
               content: Text("An iOS-style alert dialog." +
                   "An alert dialog informs the user about situations that require acknowledgement. An alert dialog has an optional title, optional content, and an optional list of actions. The title is displayed above the content and the actions are displayed below the content."),
               actions: <Widget>[
                 FlatButton(
                     onPressed: () {
                       Navigator.of(context).pop();
                     },
                     child: new Text("OK"))
               ],
             ));
       },
       child: Text('Show CupertinoAlertDialog'),
     ),
   );

In the above code, we have used a FlatButton Widget and when the user clicks on it we will get CupertinoAlertDialog Widget like below:

We will get FlatButton Widget like below:

CupertinoAlertDialog Widget - Flutter Widget Guide By Flutter Agency

CupertinoAlertDialog Widget

When we click on Show CupertinoAlertDialog, we will get CupertinoAlertDialog Widget like below

CupertinoAlertDialog Widget - Flutter Widget Guide By Flutter Agency

CupertinoAlertDialog Widget

Conclusion:

In this article, we have been through What is CupertinoAlertDialog Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading !!!
Do let us know your valuable feedback.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply