{"id":1160,"date":"2023-10-16T15:16:39","date_gmt":"2023-10-16T15:16:39","guid":{"rendered":"https:\/\/www.devopssupport.in\/blog\/?p=1160"},"modified":"2023-10-26T15:23:39","modified_gmt":"2023-10-26T15:23:39","slug":"how-to-make-flutter-alert-dialog-box","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/how-to-make-flutter-alert-dialog-box\/","title":{"rendered":"How to make Flutter Alert Dialog box"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2023\/10\/image-21.png\" alt=\"\" class=\"wp-image-1161\" width=\"413\" height=\"276\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2023\/10\/image-21.png 697w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2023\/10\/image-21-300x201.png 300w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/figure>\n\n\n\n<p>Alert dialog boxes are a common way to display important information to users in mobile apps. Flutter provides a simple and easy way to create alert dialog boxes.<\/p>\n\n\n\n<p><strong>Creating an alert dialog box<\/strong><\/p>\n\n\n\n<p>To create an alert dialog box in Flutter, you can use the <code>AlertDialog<\/code> widget. The <code>AlertDialog<\/code> widget takes a number of parameters, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>title<\/code>: The title of the alert dialog box.<\/li>\n\n\n\n<li><code>content<\/code>: The content of the alert dialog box.<\/li>\n\n\n\n<li><code>actions<\/code>: A list of buttons that can be displayed at the bottom of the alert dialog box.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example<\/strong><\/p>\n\n\n\n<p>The following code shows how to create a simple alert dialog box:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';\r\n\r\nvoid main() {\r\n  runApp(MyApp());\r\n}\r\n\r\nclass MyApp extends StatelessWidget {\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return MaterialApp(\r\n      home: Scaffold(\r\n        body: Center(\r\n          child: TextButton(\r\n            onPressed: () {\r\n              showDialog(\r\n                context: context,\r\n                builder: (context) => AlertDialog(\r\n                  title: Text('Alert Dialog Title'),\r\n                  content: Text('Alert Dialog Content'),\r\n                  actions: &#91;\r\n                    TextButton(\r\n                      onPressed: () {\r\n                        Navigator.of(context).pop();\r\n                      },\r\n                      child: Text('Close'),\r\n                    ),\r\n                  ],\r\n                ),\r\n              );\r\n            },\r\n            child: Text('Show Alert Dialog'),\r\n          ),\r\n        ),\r\n      ),\r\n    );\r\n  }\r\n}\r\n<\/code><\/pre>\n\n\n\n<p>When the user taps the &#8220;Show Alert Dialog&#8221; button, an alert dialog box will be displayed with the title &#8220;Alert Dialog Title&#8221; and the content &#8220;Alert Dialog Content&#8221;. The alert dialog box will also have a single close button.<\/p>\n\n\n\n<p><strong>Customizing an alert dialog box<\/strong><\/p>\n\n\n\n<p>You can customize the appearance and behavior of an alert dialog box by passing additional parameters to the <code>AlertDialog<\/code> widget. For example, you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set the background color of the alert dialog box.<\/li>\n\n\n\n<li>Set the elevation of the alert dialog box.<\/li>\n\n\n\n<li>Set the shape of the alert dialog box.<\/li>\n\n\n\n<li>Add additional buttons to the alert dialog box.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example<\/strong><\/p>\n\n\n\n<p>The following code shows how to customize an alert dialog box:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';\r\n\r\nvoid main() {\r\n  runApp(MyApp());\r\n}\r\n\r\nclass MyApp extends StatelessWidget {\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return MaterialApp(\r\n      home: Scaffold(\r\n        body: Center(\r\n          child: TextButton(\r\n            onPressed: () {\r\n              showDialog(\r\n                context: context,\r\n                builder: (context) => AlertDialog(\r\n                  title: Text('Alert Dialog Title'),\r\n                  content: Text('Alert Dialog Content'),\r\n                  backgroundColor: Colors.blue,\r\n                  elevation: 20,\r\n                  shape: RoundedRectangleBorder(\r\n                    borderRadius: BorderRadius.circular(10),\r\n                  ),\r\n                  actions: &#91;\r\n                    TextButton(\r\n                      onPressed: () {\r\n                        Navigator.of(context).pop();\r\n                      },\r\n                      child: Text('Close'),\r\n                    ),\r\n                    TextButton(\r\n                      onPressed: () {\r\n                        \/\/ Do something else\r\n                      },\r\n                      child: Text('Cancel'),\r\n                    ),\r\n                  ],\r\n                ),\r\n              );\r\n            },\r\n            child: Text('Show Alert Dialog'),\r\n          ),\r\n        ),\r\n      ),\r\n    );\r\n  }\r\n}\r\n<\/code><\/pre>\n\n\n\n<p>This code will create an alert dialog box with a blue background, a 20 pixel elevation, and rounded corners. The alert dialog box will also have two buttons: a close button and a cancel button.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Alert dialog boxes are a common way to display important information to users in mobile apps. Flutter provides a simple and easy way to create alert dialog&#8230; <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[461,229,460,459],"class_list":["post-1160","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-alert-dialog-box","tag-flutter","tag-flutter-alert-dialog-box","tag-how-to-make-flutter-alert-dialog-box"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/comments?post=1160"}],"version-history":[{"count":1,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1160\/revisions"}],"predecessor-version":[{"id":1162,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1160\/revisions\/1162"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=1160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=1160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=1160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}