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

 

💻 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 lines as :

giffy dialog box

Giffy dialog box

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

asset

Asset

asset file

Asset File

[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
[/powerkit_button]

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

list of Keys

List of Keys

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

Full Code:

 

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.

Happy Coding 🙂

Best tutorial to learn Flutter