How to Implement an Animated Gif Dialog Box in Flutter

How to Implement an Animated Gif Dialog Box in Flutter

Sagar Shende's photo
Sagar Shende
·Dec 1, 2019·

min read

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:

giffy_dialog package in pubspec.yaml.jpg

And press Ctrl + S Get flutter package get with exit code 0, Just Like Below Image

flutter get package.jpg

Create a Separate Folder give name ‘assets’ to it & add Assets you can Download Assets File From Here

Annotation 2019-12-01 123722.jpg

Annotation 2019-12-01 125805.jpg

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

keys.jpg

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 :-)

 
Share this