May

Flutter Giffy Dialog

Flutter Giffy Dialog:

In this tutorial, we are going to learn to create A beautiful and custom alert dialog’s for flutter highly inspired by users for both Android and IOS.

What is the gif dialog?

Exporting the Animated GIF Dialog Box. … Animated GIFs are a portable format commonly used for exchanging short animations and clips in a pop-up dialog box.

Creating Giffy Dialog In Flutter:

Follow the below steps to create a giffy dialog in flutter.

Add the dependency package:

To create Giffy the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
giffy_dialog:

Here latest version is shown below code

dependencies:
giffy_dialog: ^1.3.0

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter packages get

Importing the Package:

After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:giffy_dialog/giffy_dialog.dart';

Creating Network giffy dialog in Flutter:

Use the below example code to create a giffy dialog by fetching the network gif file from this given location ” https://www.iflutter.in/wp-content/uploads/2019/05/gif14.gif “

onPressed: () {
showDialog(
context: context,builder: (_) => NetworkGiffyDialog(
imageUrl:"https://www.iflutter.in/wp-content/uploads/2019/05/gif14.gif",
title: Text('Granny Eating Chocolate',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w600)),
description:Text('This is a granny eating chocolate dialog box.
This library helps you easily create fancy giffy dialog',
textAlign: TextAlign.center,
),
onOkButtonPressed: () {},
) );
}

Creating the Flare giffy dialog :

Use the below code to create a Flare giffy dialog. To create Flare Giffy Dialog we need to create an asset folder inside the flutter directory and inside that, we are adding the flare image and this image with the full path we are using in the dart code. as shown below example code. Use the below image to add your images to the asset folder as shown.

Use the below code to create a Flare Giffy Dialog.

onPressed: () {
showDialog(
context: context,builder: (_) => FlareGiffyDialog(
flarePath: 'assets/space_demo.flr',
flareAnimation: 'loading',
title: Text('Space Reloading',
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
description: Text('This is a space reloading dialog box.
This library helps you easily create fancy flare dialog.',
textAlign: TextAlign.center,
style: TextStyle(),
),
onOkButtonPressed: () {},
) );
}

Creating Asset giffy dialog:

Use the below code to create asset giffy dialog in flutter app. before adding the image to dart code you need to add the image to your assets folder and after adding the image to assets folder you need to uncomment assets in pubspec.yaml file.

onPressed: () {
showDialog(
context: context,builder: (_) => AssetGiffyDialog(
imagePath: 'assets/men_wearing_jacket.gif',
title: Text('Men Wearing Jackets',
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
description: Text('This is a men wearing jackets dialog box.
This library helps you easily create fancy giffy dialog.',
textAlign: TextAlign.center,
style: TextStyle(),
),
onOkButtonPressed: () {},
) );
}

Adding images to pubspec.yaml file:

Use the below image to add images to assets in pubspec.yaml file as shown in below image

Complete Example Code for Creating Giffy Dialogs In Flutter.

Copy and Paste Below Code into your main.dart file.

main.dart

import 'package:flutter/material.dart';
import 'package:giffy_dialog/giffy_dialog.dart';

void main() => runApp(new MyApp());

const List keys = [
Key("Network"),
Key("NetworkDialog"),
Key("Flare"),
Key("FlareDialog"),
Key("Asset"),
Key("AssetDialog")
];

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Giffy Dialog Demo',
theme: ThemeData(primarySwatch: Colors.teal, fontFamily: 'Nunito'),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Giffy Dialog Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
key: keys[0],
color: Colors.teal,
child: Text(
'Network Giffy',
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
showDialog(
context: context,
builder: (_) => NetworkGiffyDialog(
key: keys[1],
image: Image.network(
"https://raw.githubusercontent.com/Shashank02051997/FancyGifDialog-Android/master/GIF's/gif14.gif",
fit: BoxFit.cover,
),
title: Text(
'Granny Eating Chocolate',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
description: Text(
'This is a granny eating chocolate dialog box. This library helps you easily create fancy giffy dialog.',
textAlign: TextAlign.center,
),
onOkButtonPressed: () {},
));
}),
RaisedButton(
key: keys[2],
color: Colors.teal,
child: Text(
'Flare Giffy',
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
showDialog(
context: context,
builder: (_) => FlareGiffyDialog(
key: keys[3],
flarePath: 'assets/space_demo.flr',
flareAnimation: 'loading',
title: Text(
'Space Reloading',
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
description: Text(
'This is a space reloading dialog box. This library helps you easily create fancy flare dialog.',
textAlign: TextAlign.center,
style: TextStyle(),
),
onOkButtonPressed: () {},
));
}),
RaisedButton(
key: keys[4],
color: Colors.teal,
child: Text(
'Asset Giffy',
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
showDialog(
context: context,
builder: (_) => AssetGiffyDialog(
key: keys[5],
image: Image.asset(
'assets/men_wearing_jacket.gif',
fit: BoxFit.cover,
),
title: Text(
'Men Wearing Jackets',
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
description: Text(
'This is a men wearing jackets dialog box. This library helps you easily create fancy giffy dialog.',
textAlign: TextAlign.center,
style: TextStyle(),
),
onOkButtonPressed: () {},
));
}),
],
),
),
);
}
}

Congratulations You Have Learned Creating Flutter Giffy Dialog….!!!

If It Is Helpful Share It With Your Friends….!!!

Find all the Images in below links :

https://www.iflutter.in/wp-content/uploads/2019/05/gif14.gif

https://www.iflutter.in/wp-content/uploads/2019/05/flare.gif

https://www.iflutter.in/wp-content/uploads/2019/05/assetgd.gif

PrevNext