material_dialogs 0.0.1

A Flutter package aims to help you create animated, simple, stylish Material Dialogs in your app.

Flutter Material Dialogs 📱

A Flutter library aims to help you create 💪🏻animated, 😃 simple, 😎 stylish Material Dialogs in your app.

1. Material Dialog	2. Animations Material Dialog	3. Bottom Material Dialog	4. Animations Bottom Dialog

Table of Contents:

• Introduction
• Types of Dialog
• Implementation
  • Prerequisite
  • Create Dialog Instance
    • Material Dialog
    • Bottom Sheet Material Dialog
  • Show Animations
    • Using Resource File
  • Dialog State Listeners
• Contribute
• Credits

Introduction

MaterialDialog This Plugin will be useful to create simple, animated, and beautiful dialogs in your next Flutter app. This library implements Airbnb's Lottie library to render After Effects animation in app.

Types of Dialog

MaterialDialog library provides two types of dialog i.e.

1. Material Dialog	2. Bottom Sheet Material Dialog
A normal material dialog which can have one or two buttons.	A Bottom Sheet material dialog which can have one or two buttons, is showed from bottom of device.

Implementation

Implementation of Material Dialog library is so easy. You can check /example directory for demo. Let's have look talk in details about it.

install

i. pubspec

In pubspec.yaml

Create Dialog

As there are two types of dialogs in library. Material Dialogs are instantiated as follows.

i. Material Dialog

Dialogs class will be used to create your dialog, below is an example to show your dialog in the app.

Dialogs.materialDialog(
        btn1Press: () {},
        btn1Text: "Delete",
        msg: 'Are you sure? you can\'t undo this',
        title: "Delete",
        btn2Text: "Cancel",
        btn2Press: () {
          Navigator.pop(context);
        },
        color: Colors.white,
        btn1Icon: Icons.delete,
        btn2Icon: Icons.cancel,
        context: context,
      )

[GIFs/SimpleMaterialDialog.gif]

if you want to show a dialog with only one button, please set `singleBtn:true' in your widget. By default it's false, you can read more about it below.

ii. Bottom Sheet Material Dialog

Dialogs class will be used to create your dialog, use bottomMaterialDialog. Below is an example to show your dialog in the app.

Dialogs.bottomMaterialDialog(
        btn1Press: () {},
        btn1Text: 'Delete',
        msg: 'Are you sure? you can\'t undo this',
        title: 'Delete',
        btn2Text: 'Cancel',
        btn2Press: () {
          Navigator.pop(context);
        },
        btn1Icon: Icons.delete,
        btn2Icon: Icons.cancel,
        context: context,
      )

[GIFs/BottomSheetMaterialDialog.gif]

Show Animations

Animations in this library are implemented using Lottie animation library. You can get free animations files here. You can find varieties of animation files on https://lottiefiles.com. *.json file downloaded from LottieFiles should be placed in android project. There are two ways to place animation file (*.json).

For example, here cong_example.json animation file is used to show congratulations animation in the example app.

i. Using Resource File

Downloaded json file should placed in raw directory of assets.

[]

In code, set animations: 'path to your animation file' arg in Widget to set Animation to the dialog.

Resource file should be passed to method. e.g. cong_example.json.

Dialogs.materialDialog(
       btn1Press: () {},
       btn1Text: 'Claim',
       btn1Bcg: Colors.blue,
       color: Colors.white,
       msg: 'Congratulations, you won 500 points',
       title: 'Congratulations',
       btn2Text: 'Cancel',
       btn2IconColor: Colors.grey,
       btn1Icon: Icons.done,
       btn2Icon: Icons.cancel,
       btn2Press: () {
         Navigator.pop(context);
       },
       animations: 'assets/cong_example.json',
       context: context,
     )

Dialog State Listeners

There are three callback events and listeners for Dialog.

Following are interfaces for implementations:

• btn1Press - Listens for dialog first button click event.
• btn2Press - Listens for dialog second button click event.

for example

 btn2Press: () {
         Navigator.pop(context);
       },

Contribute

Let's develop with collaborations. We would love to have contributions by raising issues and opening PRs. Filing an issue before PR is must.

Credits

This library is built using following open-source libraries.

• Lottie for Flutter
• MaterialDialog-Android for inspiration

License

Project is published under the Apache 2.0 license. Feel free to clone and modify repo as you want, but don't forget to add reference to authors :)