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 create beautiful Flutter Apps.
How to Implement Animated Gif Dialog-Box in Flutter
First you will need to add package name giffy_dialog go to this link here
dependencies: section of your
pubspec.yaml, add the following lines as :
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[powerkit_button size=”lg” style=”primary” block=”false” url=”https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/sagarshende23/flutter_gif_dialog_box/tree/master/assets” target=”_blank” nofollow=”false”] Download Assets
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 centre 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 FlaregiffyDialog, 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‘
You can see the full source code of the project here.
Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support and appreciation
💬 If you have a question about anything in the video, leave me a comment and I’ll do my best to answer it.
Best tutorial to learn Flutter
- How to Create a Bouncing Button in Flutter | Flutter Animation Tutorial
- How to Implement an Animated Gif Dialog Box in Flutter
- How to Add ads to Flutter App in Under 10 Min
- How to Integrate firebase into Flutter app