Flutter – Giffy Dialogs

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:

1. Network giffy dialog
2. Flare giffy dialog
3. 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,
      ),
      // the content of the app goes here
      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(
                         "https://64.media.tumblr.com/bb5a0c0b7fb98f5a8262d1b287c2ca88/tumblr_oqakvrq6U71uorz8zo1_r2_540.png",
                         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(
                          "https://64.media.tumblr.com/bb5a0c0b7fb98f5a8262d1b287c2ca88/tumblr_oqakvrq6U71uorz8zo1_r2_540.png",
                          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: