Animations give a superior encounter to the user. I know, and you may be realizing that Flutter has incredible help for Animations effortlessly of utilization. However, stand by, not in the situation of Dialogs. Flutter’s Dialogs have some basic and predefined Animations.
A dialog box advises the user about the circumstance that requires affirmation. Alert Box is a brief that takes user affirmation. The alert box’s fundamental utilization is utilized when we close the application, and typically, we are informed with a brief if we need to exit. That is a Dialog box.
In this blog, we will explore the Giffy Dialog In Flutter. We will also implement a demo program and create a beautiful fancy giffy dialog using the giffy_dialog package in your flutter applications.
giffy_dialog | Flutter Package
A beautiful and custom alert dialog for flutter highly inspired by FancyAlertDialog-Android. The source code is 100%…pub. dev
Table Of Contents ::
Giffy Dialog:
Giffy Dialogs is an exceptionally adaptable alert dialog box. It is actualized using the giffy_dialog package from a flutter. This package is totally written in Dart language and gives a wide scope of features. There are three kinds of Giffy dialogs are:
- > Asset Giffy Dialog
- > Network Giffy Dialog
- > Asset Giffy Dialog
Demo Module :
This demo video shows how to create a fancy giffy dialog in a flutter. It shows how giffy dialog will work using the giffy_dialog package in your flutter applications. It shows all three types of giffy dialog with different animations and creates a beautiful fancy giffy dialog. They will be shown on your device.
Key Properties :
There are some key properties of giffy dialog are :
- > title: In this property, a dialog box title is set here. It is the primary text in the dialog.
- > description: In this property was sets the secondary text of the dialog.
- > entryAnimation: This property was used to set the direction from which the dialog will pop up.
- > onOkButtonPressed: This property sets the action after the OK button in the dialog is pressed.
- > buttonOkColor: In this property was set the button color you want.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
giffy_dialog:
Step 2: Add the assets
Add assets to pubspec — yaml file.
assets:
assets:
- assets/
Step 3: Import
import 'package:giffy_dialog/giffy_dialog.dart';
Step 4: Run flutter packages get in the root directory of your app.
Step 5: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called giffy_demo.dart inside the lib folder.
In this screen, we will make a Center in that center widget and then create a Column widget since we need to show Raised Button in a vertical structure. We will make a basic three Raised Buttons.
RaisedButton(
color: Colors.purple[300],
padding: EdgeInsets.only(left: 25,right: 25),
child: Text(
'Asset Giffy',
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {}
),
RaisedButton(
color: Colors.purple[300],
child: Text(
"Network Giffy",
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {}
),
RaisedButton(
color: Colors.purple[300],
padding: EdgeInsets.only(left: 28,right: 28),
child: Text(
'Flare Giffy',
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {}
),
Now we will deeply define all types of giffy dialog code below:
Asset Giffy Dialog:
In this Gif Dialog, we are making Asset Giffy Dialog, which will help you show giffy from the assets file, even if I add Title Text and Description Text. Animation property will be entryAnimation: ‘EntryAnimation.TOP_LEFT’. If you need to Customize Animation, at that point, you can change with the assistance ‘entryAnimation:.’
RaisedButton(
color: Colors.purple[300],
padding: EdgeInsets.only(left: 25,right: 25),
child: Text(
'Asset Giffy',
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
showDialog(
context: context,
builder: (_) => AssetGiffyDialog(
image: Image.asset(
'assets/education.gif',
fit: BoxFit.cover,
),
title: Text(
'Digital Working',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
entryAnimation: EntryAnimation.TOP_LEFT,
description: Text(
'Digital working is about understanding the role of technology.'
'This library helps you easily create fancy giffy dialog.',
textAlign: TextAlign.center,
style: TextStyle(),
),
buttonCancelColor:Colors.purple[300],
buttonOkColor:Colors.purple[300],
onOkButtonPressed: () {
Navigator.pop(context);
},
));
}),
These are the kind of giffy dialog that gets its content (like pictures) from the codebase itself. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Network Giffy Dialog:
In this Gif Dialog, we make Network Giffy Dialog, which will help you show giffy from Network or Url, even if I add Title Text and Description Text. Animation property will be entryAnimation: ‘EntryAnimation.BOTTOM_RIGHT’.
RaisedButton(
color: Colors.purple[300],
child: Text(
"Network Giffy",
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
showDialog(
context: context,
builder: (_) => NetworkGiffyDialog(
image: Image.network(
"https://i.pinimg.com/originals/3d/36/c3/3d36c36a6bd147d3b65e4de86087f9f1.gif",
fit: BoxFit.cover,
),
entryAnimation: EntryAnimation.BOTTOM_RIGHT,
title: Text(
'Team Work',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
description: Text(
'Teamwork is the collaborative effort of a group to achieve a common goal or '
'to complete a task in the most effective and efficient way. '
'This library helps you easily create fancy giffy dialog.',
textAlign: TextAlign.center,
),
buttonCancelColor:Colors.purple[300],
buttonOkColor:Colors.purple[300],
onOkButtonPressed: () {
Navigator.pop(context);
},
));
}),
These are the kind of giffy dialog that gets its content (like pictures) from the internet. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Flare Giffy Dialog:
In this Gif Dialog, we will utilize flare asset to show Flare Giffy Dialog. Like Network Giffy Dialog, even if I add Title Text and Description text in the Flare Giffy Dialog; however, you need to replace “image. network” with ‘flarepath’ and ‘flareAnimation’ which is shown in code. Animation property will be entryAnimation: ‘EntryAnimation.Default’.
RaisedButton(
color: Colors.purple[300],
padding: EdgeInsets.only(left: 28,right: 28),
child: Text(
'Flare Giffy',
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
showDialog(
context: context,
builder: (_) => FlareGiffyDialog(
flarePath: 'assets/space.flr',
flareAnimation: 'pull',
title: Text(
'Space',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
entryAnimation: EntryAnimation.DEFAULT,
description: Text(
'Space is the boundless three-dimensional extent in which objects and events have relative position and direction. '
'This library helps you easily create fancy flare dialog.',
textAlign: TextAlign.center,
style: TextStyle(),
),
buttonCancelColor:Colors.purple[300],
buttonOkColor:Colors.purple[300],
onOkButtonPressed: () {
Navigator.pop(context);
},
));
}),
These are the kind of giffy dialog that gets its content (like pictures) from the flare. A flarepath is allowed to it, and it acts likewise to that of Network giffy dialog in the rest of its working. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
https://gist.github.com/ShaiqAhmedkhan/fe03e4e52e78db91fc81c3bcd8f9b06e#file-giffy_demo-dart
Conclusion:
In the article, I have explained the basic structure of Giffy Dialog in a flutter; you can modify this code according to your choice. This was a small introduction to Giffy Dialog On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Giffy Dialog in your flutter projects. We will show you what the Giffy Dialog is?. Some key properties, make a demo program for working Giffy Dialog and create a beautiful fancy giffy dialog 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.
find the source code of the Flutter Giffy Dialog Demo:
flutter-devs/flutter_giffy_dialog_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
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.
