You can see dialog boxes on almost every mobile application. Most applications use dialog boxes to issue warnings or facilitate intermediate action, which is an alternative to the main flow of the application.
As an example, suppose you have a submit button, and when the user presses the submit button, a dialog box is displayed indicating that the action is complete and includes instructions for next steps. This is an intermediate action from the main process.
Because dialog boxes are essential for mobile apps, Flutter facilitates alerts and full-screen dialog boxes, as well as giving you the option to create custom dialog boxes. We will introduce these aspects of the Flutter dialog.
- Create an alert dialog in Flutter
- Apply action buttons to dialog boxes
- Close and remove dialog boxes
- Create a custom dialog box
- Create a full-screen dialog box
Create an alert dialog in Flutter
First, let’s create a simple dialog box. The AlertDialog widget provides all the functionality needed to create a basic dialog box in Flutter. The title and content properties should be specified to display an appropriate dialog box. Neither of these attributes is required, but if you don’t specify them correctly, you won’t see any content or headers.
AlertDialog(
title: Text("Success"),
content: Text("Save successfully"),
)
Copy the codeIf you want to display an ios-style dialog box, you can use the CupertinoAlertDialog widget instead of the AlertDialog widget.
CupertinoAlertDialog(
title: Text("Success"),
content: Text("Saved successfully"),
)
Copy the codeNow the question is, how do we display this dialog box? This is why we need to use the showDialog method, which helps to display the dialog box above the current context of the application. This will allow for adding a dark layer of transparency when displaying the dialog.
You can create a button (ElevatedButton/TextButton), like this onPressed method is added in the showDialog method, display when you press the button.
ElevatedButton( child: Text("Show Me the Dialog"), onPressed:(){ showDialog(context: context, builder: (BuildContext context){ return AlertDialog( title: Text("Success"), content: Text("Saved successfully"), ); }); })Copy the code
You can further customize the dialog box according to your needs by setting the backgroundColor and titleTextStyle properties. However, these properties are not available in the CupertinoAlertDialog widget and can only be used in the AlertDialog widget.
The default AlertDialog border radius is 4. The Shape property gives you the flexibility to customize this value as needed. CupertinoAlertDialog does not allow you to customize these properties, so you must stick to the default values.
AlertDialog(
title: Text("Success"),
titleTextStyle: TextStyle(fontWeight: FontWeight.bold,color: Colors.black,fontSize: 20),
backgroundColor: Colors.greenAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))
),
content: Text("Save successfully"),
)
Copy the code
Apply the action button to the dialog box
The AlertDialog widget can specify action buttons that need to be displayed in the dialog box. These buttons will appear at the bottom of the dialog box.
There is no limit to the number of action buttons you can have. But it’s better to use 1-3 action buttons for a good user experience and a less cluttered user interface.
AlertDialog(
title: Text("Success"),
titleTextStyle:
TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,fontSize: 20),
actionsOverflowButtonSpacing: 20,
actions: [
ElevatedButton(onPressed: (){
}, child: Text("Back")),
ElevatedButton(onPressed: (){
}, child: Text("Next")),
],
content: Text("Saved successfully"),
)
Copy the code
In CupertinoAlertDialog, rather than a normal button, the CupertinoDialogAction widget must be used within the Actions widget array.
CupertinoAlertDialog(
title: Text("Success"),
actions: [
CupertinoDialogAction(onPressed: (){
}, child: Text("Back")),
CupertinoDialogAction(onPressed: (){
}, child: Text("Next")),
],
content: Text("Saved successfully"),
)
Copy the code
If your app needs more action buttons, you can add as many as you need. If there is no space to display in an inline, these will pile up in a column. If the overflow occur, you can set actionsOverflowButtonSpacing properties to control the spacing of the button.
ActionsOverflowButtonSpacing attributes only in AlertDialog widgets available in the, in CupertinoAlertDialog is unavailable. In CupertinoAlertDialog, it usually displays a maximum of two buttons per row, and if there are more action buttons, those buttons will be displayed vertically.
AlertDialog(
title: Text("Success"),
titleTextStyle:
TextStyle(fontWeight: FontWeight.bold,color: Colors.black,fontSize: 20),
actionsOverflowButtonSpacing: 20,
actions: [
ElevatedButton(onPressed: (){
}, child: Text("Back")),
ElevatedButton(onPressed: (){
}, child: Text("Next")),
ElevatedButton(onPressed: (){
}, child: Text("Next")),
ElevatedButton(onPressed: (){
}, child: Text("Next")),
ElevatedButton(onPressed: (){
}, child: Text("Next")),
ElevatedButton(onPressed: (){
}, child: Text("Next")),
],
content: Text("Saved successfully"),
)
Copy the code
CupertinoAlertDialog(
title: Text("Success"),
actions: [
CupertinoDialogAction(onPressed: (){
}, child: Text("Back")),
CupertinoDialogAction(onPressed: (){
}, child: Text("Next")),
CupertinoDialogAction(onPressed: (){
}, child: Text("Next")),
CupertinoDialogAction(onPressed: (){
}, child: Text("Next")),
CupertinoDialogAction(onPressed: (){
}, child: Text("Next")),
CupertinoDialogAction(onPressed: (){
}, child: Text("Next")),
],
content: Text("Saved successfully"),
)
Copy the code
Close and dismiss dialog boxes
You can use the Navigator class to remove the dialog when you press the button.
AlertDialog(
title: Text("Success"),
titleTextStyle: TextStyle(
fontWeight: FontWeight.bold,color: Colors.black,fontSize: 20),
actions: [
ElevatedButton(onPressed: (){
Navigator.of(context).pop();
}, child: Text("Close")),
],
content: Text("Saved successfully"),
)
Copy the code
Create a custom dialog box
The AlertDialog widget may not be suitable for every custom scenario you work on in your application. This is where the Dialog widget comes in handy.
Even though AlertDialog’s content properties accept the widget type, it is recommended to add only a simple dialog message, which means it is not suitable for custom dialogs.
Dialog Widgets, on the other hand, can create a custom version of a Dialog box based on your needs. I added a Container to control the height of the dialog box, and inside the Container, there is a Column widget to place multiple widgets vertically. You can customize these widgets to your needs.
Dialog(
child: Container(
height: 300,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FlutterLogo(size: 150,),
Text("This is a Custom Dialog",style:TextStyle(fontSize: 20),),
ElevatedButton(
onPressed: (){
Navigator.of(context).pop();
}, child: Text("Close"))
],
),
),
)
Copy the code
If you want to change the shape of the dialog box, you can set the shape property to ShapeBorder as shown in the following example. Here I use a round RectangleBorder widget to change the radius of the dialog box’s border.
Dialog (shape: RoundedRectangleBorder (borderRadius: borderRadius circular (30.0)), the child: Container (height: 300, the child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ FlutterLogo(size: 150,), Text("This is a Custom Dialog",style:TextStyle(fontSize: 20),), ElevatedButton( onPressed: (){ Navigator.of(context).pop(); }, child: Text("Close")) ], ), ), )Copy the code
The default elevation of the dialog box is 24. The elevation is the _Z_ coordinate of the dialog box, which can be changed by setting the dialog box’s elevation attribute. If you set the elevation to 0, you can see that there are no shadows and that the dialog box and the view below are all on the same surface.
For AlertDialog, the backgroundColor of the Dialog box can be set by changing the backgroundColor property of the Dialog widget.
Dialog(
elevation: 0,
backgroundColor: Colors.limeAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
child: Container(
height: 300,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FlutterLogo( size: 150,),
Text(
"This is a Custom Dialog",
style: TextStyle(fontSize: 20),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Close"))
],
),
),
)
Copy the code
Create a full-screen dialog box
Creating a full-screen dialog cannot be done through the showDialog method. Instead, use the showGeneralDialog method.
In pageBuilder, you should specify your dialog widget implementation. As the first widget, you can specify the SizedBox. Expand widget, which will convert your normal dialog box into a full-screen dialog box.
In addition to the pageBuilder property, you can control the animation duration of the dialog box via the transitionDuration property to give a nice, smooth animation.
showGeneralDialog( context: context, transitionDuration: Duration(milliseconds: 400), pageBuilder: (bc, ania, anis) { return SizedBox.expand( child: Container( color: Colors.black, child: Padding( padding: Const EdgeInsets. All (20.0), the child: the Column (mainAxisAlignment: mainAxisAlignment spaceBetween, children: [ FlutterLogo( size: 200, ), Text( "This is a Full Screen Dialog", style: TextStyle( fontSize: 20, decoration: TextDecoration.none), ), ElevatedButton( onPressed: () { Navigator.of(context).pop(); }, child: Text("Close")) ], ), ), ), ); })Copy the code
conclusion
Application alert dialogs, custom dialogs, or full-screen dialogs will depend entirely on your application and how the application is being used.
The alert dialog is better suited for sending quick and simple alerts to the user, such as success messages or informational alerts. Custom dialogs can be used where more personalized dialogs are needed, with multiple widgets. Full-screen dialogs can be used if you want to give the user the feeling of a brand new screen without actually navigating to a brand new screen.
Of these dialogs, custom dialogs will be the most useful because you can give each one your own personal style while keeping the theme of your application.
The original link: blog.logrocket.com/creating-di…