Awesome Dialog In Flutter
Flutter is a portable UI toolkit. In other words, it’s a comprehensive app Software Development toolkit (SDK) that comes complete with widgets and tools. Flutter is a free and open-source tool to develop mobile, desktop, web applications. Flutter is a cross-platform development tool. This means that with the same code, we can create both ios and android apps. This is the best way to save time and resources in our entire process. In this, hot reload is gaining traction among mobile developers. Allows us to quickly see the changes implemented in the code with hot reload.
Hello friends, I will talk about my new blog on Awesome Dialog in flutter using the awesome_dialog_package. We will also implement a demo of Awesome Dialog, and describes its attributes, and how to use them in your flutter applications. So let’s get started.
awesome_dialog | Flutter Package
A new Flutter package project for simple and awesome dialogs To use this package, add awesome_dialog as a dependency in…pub.dev
Table of Contents :
Awesome Dialog :
The Animation Awesome Dialog is a type of flutter package that we use in the app to show some warning or confirmation about something to the user, in this we can use a different kind of animation in it by using some properties. And can set the color, of the text, etc.
Demo Module :
Attributes :
The following are the basic Attributes of the Awesome Dialog.
- animType— Use the animType property to change the animation of the dialog.
- dialogType— The dialogType be used the dialog type property like info, error etc.
- title — The title property is used to set the dialog title to the dialog.
- desc — The desc property is used for dialog descriptions.
- autoHide — The autoHide property is hidden after some time, its time can be set to anything.
Implementation :
You need to implement it in your code respectively :
Step 1: Add dependencies.
Add dependencies to pubspec — yaml file.
dependencies:
awesome_dialog: ^1.3.2
Step 2: import the package :
import 'package:awesome_dialog/awesome_dialog.dart';
Step 3: Run flutter package get
How to implement code in dart file :
Create a new dart file called awesome_dialog_demo.dart inside the lib folder.
First of all, we have created a home page screen in which five buttons have been created and at the click of each button, a new page will open in which we have shown the swiper list in different ways. Let us understand this in detail.
AnimatedButton(
text: 'Info Dialog',
pressEvent: () {},
),
Before using AwesomeDialog, we have used a container widget that has a column widget in child properties with AwasomeDialog inside which dialog type is Info. But at the click of each button, the dialog type is different.
AwesomeDialog(
context: context,
dialogType: DialogType.INFO,
borderSide: BorderSide(color: Colors.green, width: 2),
buttonsBorderRadius: BorderRadius.all(Radius.circular(2)),
headerAnimationLoop: false,
animType: AnimType.BOTTOMSLIDE,
title: 'INFO',
desc: 'Dialog description here...',
showCloseIcon: true,
btnCancelOnPress: () {},
btnOkOnPress: () {},
)..show();
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:awesome_dialog/awesome_dialog.dart';
class AwesomeDialogDemo extends StatefulWidget {
@override
_AwesomeDialogDemoState createState() => _AwesomeDialogDemoState();
}
class _AwesomeDialogDemoState extends State<AwesomeDialogDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Awesome Dialog Demo'),
),
body: Center(
child: Container(
padding: EdgeInsets.all(16),
child: SingleChildScrollView(
child: Column(
children: <Widget>[
AnimatedButton(
text: 'Info Dialog',
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.INFO,
borderSide: BorderSide(color: Colors.green, width: 2),
buttonsBorderRadius: BorderRadius.all(Radius.circular(2)),
headerAnimationLoop: false,
animType: AnimType.BOTTOMSLIDE,
title: 'INFO',
desc: 'Dialog description here...',
showCloseIcon: true,
btnCancelOnPress: () {},
btnOkOnPress: () {},
)..show();
},
),
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: Icon(Icons.close_fullscreen_outlined),
title: 'Warning',
desc:
'Dialog description here',
btnCancelOnPress: () {},
btnOkOnPress: () {})
..show();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'Error Dialog',
color: Colors.red,
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.ERROR,
animType: AnimType.RIGHSLIDE,
headerAnimationLoop: false,
title: 'Error',
desc:
'Dialog description here',
btnOkOnPress: () {},
btnOkIcon: Icons.cancel,
btnOkColor: Colors.red)
..show();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'Succes Dialog',
color: Colors.green,
pressEvent: () {
AwesomeDialog(
context: context,
animType: AnimType.LEFTSLIDE,
headerAnimationLoop: false,
dialogType: DialogType.SUCCES,
title: 'Succes',
desc:
'Dialog description here',
btnOkOnPress: () {
debugPrint('OnClcik');
},
btnOkIcon: Icons.check_circle,
onDissmissCallback: () {
debugPrint('Dialog Dissmiss from callback');
})
..show();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'No Header Dialog',
color: Colors.cyan,
pressEvent: () {
AwesomeDialog(
context: context,
headerAnimationLoop: false,
dialogType: DialogType.NO_HEADER,
title: 'No Header',
desc:
'Dialog description here',
btnOkOnPress: () {
debugPrint('OnClcik');
},
btnOkIcon: Icons.check_circle,
)..show();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'Custom Body Dialog',
color: Colors.blueGrey,
pressEvent: () {
AwesomeDialog(
context: context,
animType: AnimType.SCALE,
dialogType: DialogType.INFO,
body: 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();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'Auto Hide Dialog',
color: Colors.purple,
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.INFO,
animType: AnimType.SCALE,
title: 'Auto Hide Dialog',
desc: 'AutoHide after 2 seconds',
autoHide: Duration(seconds: 2),
)..show();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'Body with Input',
color: Colors.blueGrey,
pressEvent: () {
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.headline6,
),
SizedBox(
height: 10,
),
Material(
elevation: 0,
color: Colors.blueGrey.withAlpha(40),
child: TextFormField(
autofocus: true,
minLines: 1,
decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Title',
prefixIcon: Icon(Icons.text_fields),
),
),
),
SizedBox(
height: 10,
),
Material(
elevation: 0,
color: Colors.blueGrey.withAlpha(40),
child: TextFormField(
autofocus: true,
keyboardType: TextInputType.multiline,
maxLengthEnforced: true,
minLines: 2,
maxLines: null,
decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Description',
prefixIcon: Icon(Icons.text_fields),
),
),
),
SizedBox(
height: 10,
),
AnimatedButton(
text: 'Close',
pressEvent: () {
dialog.dissmiss();
})
],
),
),
)..show();
},
),
],
),
),
)
)
);
}
}
Conclusion:
In this flutter article, I have explained an Awesome Dialog in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Awesome Dialog demo from our side.
I hope this blog will provide you with sufficient information in Trying up the Awesome Dialog in your flutter project. We will show you the Awesome Dialog is?, and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
