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_-800x781

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

![flutter-get-package](/content/images/2019/12/flutter-get-package.jpg)

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

Folder-name-assets-247x240

assets-file

Download Assets

then Import that assets file into pubspec.yaml just like below code

assets:
- assets/rappi_basket.gif
- assets/space_demo.flr
fonts:
- family: Nunito
fonts:
- asset: assets/nunitoSemiBold.ttf
- asset: assets/nunitoBold.ttf
weight: 700

After that Go to main.dart file write MyApp stateless Widget with Simple Material App Code with Theme data configuration.

import 'package:flutter/material.dart';
import 'package:giffy_dialog/giffy_dialog.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(fontFamily: 'Nunito'),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.black,
title: Text('Giffy Dialog Example'),
),
body: MyHomePage(),
));
}
}

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

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
String networkimg =
'https://cdn.dribbble.com/users/750517/screenshots/8574989/media/7610aa397363fdfe6f2daa1145493aee.gif';
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
key: keys[0],
child: Text('Network Giffy'),
onPressed: () {
showDialog(
context: context,
builder: (_) => NetworkGiffyDialog(
key: keys[1],
image: Image.network(
networkimg,
fit: BoxFit.cover,
),
title: Text(
"Ostrich Running",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
description: Text(
'This is the Ostrich Running Dialog Box. This will help you to understand NEtwork Giffy Animation',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.RIGHT,
onOkButtonPressed: (){},
));
},
),
],
),
);
}
}

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: 

RaisedButton(
key: keys[2],
child: Text('Flare Giffy'),
onPressed: () {
showDialog(
context: context,
builder: (_) => FlareGiffyDialog(
key: keys[3],
flarePath: 'assets/space_demo.flr',
flareAnimation: 'loading',
title: Text(
"Planet Reloading",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
description: Text(
'This is the PLanet Reloading Dialog Box. This will help you to understand Flare Giffy Animation',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.TOP_LEFT,
onOkButtonPressed: (){},
));
},
),

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:

//Asset Giffy Dialog
RaisedButton(
key: keys[4],
child: Text('Asset Giffy'),
onPressed: () {
showDialog(
context: context,
builder: (_) => AssetGiffyDialog(
key: keys[5],
image: Image.asset('assets/rappi_basket.gif'),
title: Text(
"Rappi Basket",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
description: Text(
'This is theRappi Basket Dialog Box. This will help you to understand Asset Giffy Animation',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.TOP_LEFT,
onOkButtonPressed: (){},
));
},
),

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:

import 'package:flutter/material.dart';
import 'package:giffy_dialog/giffy_dialog.dart';
void main() => runApp(MyApp());
const List<Key> keys = [
Key('Network'),
Key('Network Dialog'),
Key('Flare'),
Key('Flare Dialog'),
Key('Asset'),
Key('Asset dialog'),
];
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(fontFamily: 'Nunito'),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.black,
title: Text('Giffy Dialog Example'),
),
body: MyHomePage(),
));
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
String networkimg =
'https://cdn.dribbble.com/users/750517/screenshots/8574989/media/7610aa397363fdfe6f2daa1145493aee.gif';
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
key: keys[0],
child: Text('Network Giffy'),
onPressed: () {
showDialog(
context: context,
builder: (_) => NetworkGiffyDialog(
key: keys[1],
image: Image.network(
networkimg,
fit: BoxFit.cover,
),
title: Text(
"Ostrich Running",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
description: Text(
'This is the Ostrich Running Dialog Box. This will help you to understand NEtwork Giffy Animation',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.RIGHT,
onOkButtonPressed: (){},
));
},
),
RaisedButton(
key: keys[2],
child: Text('Flare Giffy'),
onPressed: () {
showDialog(
context: context,
builder: (_) => FlareGiffyDialog(
key: keys[3],
flarePath: 'assets/space_demo.flr',
flareAnimation: 'loading',
title: Text(
"Planet Reloading",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
description: Text(
'This is the PLanet Reloading Dialog Box. This will help you to understand Flare Giffy Animation',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.TOP_LEFT,
onOkButtonPressed: (){},
));
},
),
RaisedButton(
key: keys[4],
child: Text('Asset Giffy'),
onPressed: () {
showDialog(
context: context,
builder: (_) => AssetGiffyDialog(
key: keys[5],
image: Image.asset('assets/rappi_basket.gif'),
title: Text(
"Rappi Basket",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
description: Text(
'This is theRappi Basket Dialog Box. This will help you to understand Asset Giffy Animation',
textAlign: TextAlign.center,
),
entryAnimation: EntryAnimation.TOP_LEFT,
onOkButtonPressed: (){},
));
},
),
],
),
);
}
}