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:
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
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: (){}, | |
| )); | |
| }, | |
| ), | |
| ], | |
| ), | |
| ); | |
| } | |
| } |
