How to Implement an Animated Gif Dialog Box in Flutter » AllTechSavvy
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
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 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 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
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:
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: (){},
));
},
),
],
),
);
}
}
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.
