Flutter – Giffy Dialogs
Last Updated :
15 Dec, 2021
Giffy Dialogs is a highly customizable alert dialog box. It is implemented through the use of giffy_dialog package from flutter. This package is entirely written in Dart language and provides a wide range of features. There are three types of giffy dialogs listed below:
- Network giffy dialog
- Flare giffy dialog
- Asset giffy dialog
Let’s talk about them in a bit of detail.
1. Network giffy dialog :
These are the type of giffy dialog that gets its content (like, images) from the internet. A sample implementation of Network giffy dialog is shown below:
onPressed: () {
showDialog(
context: context,builder: (_) => NetworkGiffyDialog(
imageUrl:" IMAGE URL",
title: Text('TEXT FOR THE DIALOG',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: INTEGER VALUE GOES HERE,
fontWeight: FontWeight.w600)),
description:Text('SECONDARY TEXT IN THE DIALOG',
textAlign: TextAlign.center,
),
entryAnimation: ANIMATION ENTRY SIDE,
onOkButtonPressed: () {},
) );
}
2. Flare giffy dialog :
These are the type of giffy dialog that gets its content (like, images) from the flare. A flarepath is assigned to it and it behaves similarly to that of Network giffy dialog in the rest of its functioning. A sample implementation of Flare giffy dialog is shown below:
onPressed: () {
showDialog(
context: context,builder: (_) => FlareGiffyDialog(
flarePath: 'assets/space_demo.flr',
flareAnimation: 'loading',
title: Text('TEXT FOR THE DIALOG',
style: TextStyle(
fontSize: INTEGER VALUE GOES HERE, fontWeight: FontWeight.w600),
),
description: Text('SECONDARY TEXT IN THE DIALOG',
textAlign: TextAlign.center,
style: TextStyle(),
),
entryAnimation: ANIMATION ENTRY SIDE,
onOkButtonPressed: () {},
) );
}
3. Asset giffy dialog:
These are the type of giffy dialog that gets its content (like, images) from the codebase itself. The assets dependency in the pubspec.yaml file needs to be turned on for the same purpose and the images should be added to the respective directory. A sample implementation of Asset giffy dialog is shown below:
onPressed: () {
showDialog(
context: context,builder: (_) => AssetGiffyDialog(
imagePath: 'PATH TO THE ASSETS',
title: Text('TEXT FOR THE DIALOG',
style: TextStyle(
fontSize:INTEGER VALUE GOES HERE, fontWeight: FontWeight.w600),
),
description: Text('SECONDARY TEXT IN THE DIALOG',
textAlign: TextAlign.center,
style: TextStyle(),
),
entryAnimation: ANIMATION ENTRY SIDE,
onOkButtonPressed: () {},
) );
}
Key Properties:
- title: The dialog box title is set here. It is the primary text in the dialog.
- description: This sets the secondary text of the dialog.
- entryAnimation: This is used to set the direction from which the dialog will pop up.
- onOkButtonPressed: This sets the action after the OK button in the dialog is pressed.
Example:
Let’s implement a Network giffy box inside a simple application. To do so follow the below steps:
Add the Dependency:
The first step is to add the giffy_dialog dependency to the dependencies section of the pubspec.yaml file as shown below:
Import the Dependency:
Use the below line of code to import the same dependency into the code file:
import 'package:giffy_dialog/giffy_dialog.dart';
Structuring the Application:
Extend a StatelessWidget to give the app a simple Homepage with an appbar and a body as shown below:
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
title: ' Network Giffy Dialog' ,
theme: ThemeData(primarySwatch: Colors.teal, fontFamily: 'Nunito' ),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( "GeeksForGeeks" ),
backgroundColor: Colors.green,
),
body:
),
}
}
|
Add a Button:
Add a Button to open the Network giffy dialog when pressed, inside the body of the application as shown below:
Dart
RaisedButton(
key: keys[0],
color: Colors.teal,
child: Text(
"Giffy Button" ,
style: TextStyle(
color: Colors.white,
),
|
Call the giffy Dialog:
Since we are implementing the Network giffy dialog, make a call to the same as following:
Dart
onPressed: () {
showDialog(
context: context,
builder: (_) => NetworkGiffyDialog(
key: keys[1],
image: Image.network(
fit: BoxFit.cover,
),
entryAnimation: EntryAnimation.TOP_LEFT,
title: Text(
'Gal Gadot' ,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
description: Text(
'Gal Gadot is an Israeli actress, model, and producer famous for her roles like Wonder Women' ,
textAlign: TextAlign.center,
),
onOkButtonPressed: () {},
));
|
Complete Source Code:
Dart
import 'package:flutter/material.dart' ;
import 'package:giffy_dialog/giffy_dialog.dart' ;
void main() => runApp( new MyApp());
const List<Key> keys = [
Key( "Network" ),
Key( "NetworkDialog" ),
];
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
title: ' Network Giffy Dialog' ,
theme: ThemeData(primarySwatch: Colors.teal, fontFamily: 'Nunito' ),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( "GeeksForGeeks" ),
backgroundColor: Colors.green,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
key: keys[0],
color: Colors.teal,
child: Text(
"Giffy Button" ,
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
showDialog(
context: context,
builder: (_) => NetworkGiffyDialog(
key: keys[1],
image: Image.network(
fit: BoxFit.cover,
),
entryAnimation: EntryAnimation.TOP_LEFT,
title: Text(
'Gal Gadot' ,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.w600),
),
description: Text(
'Gal Gadot is an Israeli actress, model, and producer famous for her roles like Wonder Women' ,
textAlign: TextAlign.center,
),
onOkButtonPressed: () {},
));
}),
],
),
),
);
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...