Introduction:
Dialog boxes are essential UI components in mobile apps for displaying important messages, notifications, alerts, or prompting users for input. The awesome_dialog package in Flutter provides a convenient way to create customizable and visually appealing dialog boxes with various styles and animations.
Content:
Step 1: Add Dependency
- Begin by adding the awesome_dialog package to your
pubspec.yamlfile. This ensures that your Flutter project can access the functionalities provided by the package. - Run the following command in your terminal to fetch the package:
flutter pub get
Step 2: Import Package
- Import the awesome_dialog package in the Dart file where you want to implement the dialog box. This allows you to utilize the AwesomeDialog class provided by the package.
import 'package:flutter/material.dart';
import 'package:awesome_dialog/awesome_dialog.dart';
Step 3: Create Dialog Box
- Use the AwesomeDialog class to create and customize the dialog box according to your requirements. Specify the dialog type, title, description, buttons, animations, and more.
void showAwesomeDialog(BuildContext context) {
AwesomeDialog(
context: context,
dialogType: DialogType.INFO,
animType: AnimType.SCALE,
title: 'Dialog Title',
desc: 'Dialog Description',
btnCancelOnPress: () {},
btnOkOnPress: () {},
)..show();
}
Step 4: Customize Dialog Box
- Customize the appearance and behavior of the dialog box by adjusting parameters such as dialog type, title, description, button labels, animations, etc., according to your app’s design requirements.
Step 5: Handle Button Press
- Implement the onPress callbacks for the dialog buttons to define the actions that should be taken when the user interacts with the dialog box. This could include dismissing the dialog, navigating to another screen, performing an action, etc.
Step 6: Show Dialog Box
- Call the
show()method on the AwesomeDialog instance to display the dialog box on the screen. This will present the dialog box to the user with the specified content and styling.
Step 7: Run the Application
- After implementing the dialog box, run your Flutter application on a device or emulator to observe the dialog box in action. This allows you to test its functionality and ensure that it behaves as expected.
flutter run
Sample Code:
import 'package:awesome_dialog/awesome_dialog.dart';
import 'package:flutter/material.dart';
class awsomeDialog extends StatefulWidget {
const awsomeDialog({
Key? key,
}) : super(key: key);
@override
_awsomeDialogState createState() => _awsomeDialogState();
}
class _awsomeDialogState extends State<awsomeDialog> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Awesome Dialog Example'),
),
body: Center(
child: Container(
padding: const EdgeInsets.all(16),
child: SingleChildScrollView(
child: Column(
children: <Widget>[
AnimatedButton(
text: 'Info Dialog fixed width and square buttons',
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.info,
borderSide: const BorderSide(
color: Colors.green,
width: 2,
),
width: 280,
buttonsBorderRadius: const BorderRadius.all(
Radius.circular(2),
),
dismissOnTouchOutside: true,
dismissOnBackKeyPress: false,
onDismissCallback: (type) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Dismissed by $type'),
),
);
},
headerAnimationLoop: false,
animType: AnimType.bottomSlide,
title: 'INFO',
desc: 'This Dialog can be dismissed touching outside',
showCloseIcon: true,
btnCancelOnPress: () {},
btnOkOnPress: () {},
).show();
},
),
const SizedBox(
height: 16,
),
AnimatedButton(
text: 'Warning Dialog With Custom BTN Style',
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.warning,
headerAnimationLoop: false,
animType: AnimType.bottomSlide,
title: 'Question',
desc: 'Dialog description here...',
buttonsTextStyle: const TextStyle(color: Colors.black),
showCloseIcon: true,
btnCancelOnPress: () {},
btnOkOnPress: () {},
).show();
},
),
const SizedBox(
height: 16,
),
AnimatedButton(
text: 'Info Reverse Dialog Without buttons',
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.infoReverse,
headerAnimationLoop: true,
animType: AnimType.bottomSlide,
title: 'INFO Reversed',
reverseBtnOrder: true,
btnOkOnPress: () {},
btnCancelOnPress: () {},
desc:
'Lorem ipsum dolor sit amet consectetur adipiscing elit eget ornare tempus, vestibulum sagittis rhoncus felis hendrerit lectus ultricies duis vel, id morbi cum ultrices tellus metus dis ut donec. Ut sagittis viverra venenatis eget euismod faucibus odio ligula phasellus,',
).show();
},
),
const SizedBox(
height: 16,
),
AnimatedButton(
text: 'Warning Dialog',
color: Colors.orange,
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.warning,
headerAnimationLoop: false,
animType: AnimType.topSlide,
showCloseIcon: true,
closeIcon: const Icon(Icons.close_fullscreen_outlined),
title: 'Warning',
desc: 'Dialog description here..................................................',
btnCancelOnPress: () {},
onDismissCallback: (type) {
debugPrint('Dialog Dismiss from callback $type');
},
btnOkOnPress: () {},
).show();
},
),
const SizedBox(
height: 16,
),
AnimatedButton(
text: 'Error Dialog',
color: Colors.red,
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.error,
animType: AnimType.rightSlide,
headerAnimationLoop: false,
title: 'Error',
desc: 'Dialog description here..................................................',
btnOkOnPress: () {},
btnOkIcon: Icons.cancel,
btnOkColor: Colors.red,
).show();
},
),
const SizedBox(
height: 16,
),
AnimatedButton(
text: 'Question Dialog',
color: Colors.amber,
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.question,
animType: AnimType.rightSlide,
headerAnimationLoop: true,
title: 'Question',
desc: 'Dialog description here..................................................',
btnOkOnPress: () {},
).show();
},
),
const SizedBox(
height: 16,
),
AnimatedButton(
text: 'Success Dialog',
color: Colors.green,
pressEvent: () {
AwesomeDialog(
context: context,
animType: AnimType.leftSlide,
headerAnimationLoop: false,
dialogType: DialogType.success,
showCloseIcon: true,
title: 'Succes',
desc: 'Dialog description here..................................................',
btnOkOnPress: () {
debugPrint('OnClcik');
},
btnOkIcon: Icons.check_circle,
onDismissCallback: (type) {
debugPrint('Dialog Dissmiss from callback $type');
},
).show();
},
),
const SizedBox(
height: 16,
),
AnimatedButton(
text: 'No Header Dialog',
color: Colors.cyan,
pressEvent: () {
AwesomeDialog(
context: context,
headerAnimationLoop: false,
dialogType: DialogType.noHeader,
title: 'No Header',
desc: 'Dialog description here..................................................',
btnOkOnPress: () {
debugPrint('OnClcik');
},
btnOkIcon: Icons.check_circle,
).show();
},
),
const SizedBox(
height: 16,
),
AnimatedButton(
text: 'Custom Body Dialog',
color: Colors.blueGrey,
pressEvent: () {
AwesomeDialog(
context: context,
animType: AnimType.scale,
dialogType: DialogType.info,
body: const Center(
child: Text(
'If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
title: 'This is Ignored',
desc: 'This is also Ignored',
).show();
},
),
const SizedBox(
height: 16,
),
AnimatedButton(
text: 'Auto Hide Dialog',
color: Colors.purple,
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.infoReverse,
animType: AnimType.scale,
title: 'Auto Hide Dialog',
desc: 'AutoHide after 2 seconds',
autoHide: const Duration(seconds: 2),
onDismissCallback: (type) {
debugPrint('Dialog Dissmiss from callback $type');
},
).show();
},
),
const SizedBox(
height: 16,
),
AnimatedButton(
text: 'Testing Dialog',
color: Colors.orange,
pressEvent: () {
AwesomeDialog(
context: context,
keyboardAware: true,
dismissOnBackKeyPress: false,
dialogType: DialogType.warning,
animType: AnimType.bottomSlide,
btnCancelText: "Cancel Order",
btnOkText: "Yes, I will pay",
title: 'Continue to pay?',
// padding: const EdgeInsets.all(5.0),
desc:
'Please confirm that you will pay 3000 INR within 30 mins. Creating orders without paying will create penalty charges, and your account may be disabled.',
btnCancelOnPress: () {},
btnOkOnPress: () {},
).show();
},
),
const SizedBox(
height: 16,
),
AnimatedButton(
text: 'Body with Input',
color: Colors.blueGrey,
pressEvent: () {
late AwesomeDialog dialog;
dialog = AwesomeDialog(
context: context,
animType: AnimType.scale,
dialogType: DialogType.info,
keyboardAware: true,
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Text(
'Form Data',
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(
height: 10,
),
Material(
elevation: 0,
color: Colors.blueGrey.withAlpha(40),
child: TextFormField(
autofocus: true,
minLines: 1,
decoration: const InputDecoration(
border: InputBorder.none,
labelText: 'Title',
prefixIcon: Icon(Icons.text_fields),
),
),
),
const SizedBox(
height: 10,
),
Material(
elevation: 0,
color: Colors.blueGrey.withAlpha(40),
child: TextFormField(
autofocus: true,
keyboardType: TextInputType.multiline,
minLines: 2,
maxLines: null,
decoration: const InputDecoration(
border: InputBorder.none,
labelText: 'Description',
prefixIcon: Icon(Icons.text_fields),
),
),
),
const SizedBox(
height: 10,
),
AnimatedButton(
isFixedHeight: false,
text: 'Close',
pressEvent: () {
dialog.dismiss();
},
)
],
),
),
)..show();
},
),
const SizedBox(
height: 16,
),
AnimatedButton(
text: 'Passing Data Back from Dialog',
pressEvent: () async {
final dismissMode = await AwesomeDialog(
context: context,
dialogType: DialogType.noHeader,
buttonsBorderRadius: const BorderRadius.all(
Radius.circular(2),
),
animType: AnimType.rightSlide,
title: 'Passing Data Back',
titleTextStyle: const TextStyle(
fontSize: 32,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w600,
),
desc: 'Dialog description here...',
showCloseIcon: true,
btnCancelOnPress: () {},
btnOkOnPress: () {},
autoDismiss: false,
onDismissCallback: (type) {
Navigator.of(context).pop(type);
},
barrierColor: Colors.purple[900]?.withOpacity(0.54),
).show();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Dismissed by $dismissMode'),
),
);
},
),
],
),
),
),
),
);
}
}
Output:
Conclusion:
Integrating dialog boxes into your Flutter app using the awesome_dialog package is a straightforward process that allows you to create visually appealing and customizable dialogs with ease. By following the steps outlined in this guide and customizing the dialog box content and appearance as needed, you can effectively communicate important information to users and prompt them for input when necessary.
This structured approach to implementing dialog boxes ensures that you can efficiently leverage the awesome_dialog package’s capabilities in your Flutter app, enhancing the user experience and interaction with your app’s interface. Experiment with different dialog types, animations, and customization options to create dialog boxes that align with your app’s design aesthetics and functionality requirements.
