In this tutorial, I will show you How to Implement Animated Gif Dialog Box in a flutter with help Giffy_dialog package which is very useful in a Customization of the Dialog box. A beautiful and custom alert dialog for flutter Which will help you to create beautiful Flutter Apps.
How to Implement Animated Gif Dialog-Box in Flutter
💻 Installation
First you Will Need to add Package name giffy_dialog go to this link here
In the dependencies: section of your pubspec.yaml, add the following line:
And press Ctrl + S Get flutter package get with exit code 0, Just Like Below Image
Create a Separate Folder give name ‘assets’ to it & add Assets you can Download Assets File From Here
then Import that assets file into pubspec.yaml just like below code:
After that Go to main.dart file write MyApp stateless Widget with Simple Material App Code with Theme data configuration.
Create a new List of Key with keys variable Just Like Below Image, In the Key Method Add ‘Network’,’Network Dialog’,’Flare’,’Flare Dialog’,’Asset’ & ‘Asset Dialog’ etc
After creating a list of Key then Create a new Stateless widget & give ‘MyHomePage’ name & First we are going to create Center in that center widget & then Create Column widget because we want to show Raised Button in Vertical form.
Network Giffy Dialog:
In Above Code We create Network Giffy Dialog Which will help you to Show Giffy from Network or Url, Even I add Title Text & Description Text. Animation Property will be entryAnimation: ‘EntryAnimation.RIGHT’ If you want to Customize Animation then you can change with help ‘entryAnimation:’.
Flare Giffy Dialog:
As its Name Suggest we are going to Use Flare Asset to show Flare giffy Dialog, Just Like Network **Giffy Dialog** I add Title Text & Description text in the Flare Giffy Dialog but you Need to Replace image.network with ‘flarepath’ & ‘flareAnimation’ which is illustrated in Code Example. Animation Property will be entryAnimation: ‘EntryAnimation.TOP_LEFT’
Asset Giffy Dialog:
In this Gif Dialog , we are going to implement Asset gif File From the Asset File So Code Will be Same as Flare Giffy Dialog Just you need to change ‘flarepath’ & ‘flareAnimation’ with Image.asset. Animation Property will be entryAnimation: ‘EntryAnimation.TOP_LEFT’
Full Code:
Thanks for reading! If you enjoyed it, hit the Like button below. It allows others to find the article and would mean a lot to me.
💬 If you have a question about anything in the video, leave me a comment and I’ll do my best to answer it.
Happy Coding :-)