Morioh
Login
Flutter Packages

Flutter Packages

10 months ago

A Flutter Package Aims to Help You Create animated, Simple, Stylish Material Dialogs

Flutter Material Dialogs 📱 

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

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 Dialog2. 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

dependencies:
  material_dialogs: _latest_version

Now in your Dart code, you can use:

import 'package:material_dialogs/material_dialogs.dart';

Details see pub.dev.

 

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(
          msg: 'Are you sure ? you can\'t undo this',
          title: "Delete",
          color: Colors.white,
          context: context,
          actions: [
            IconsOutlineButton(
              onPressed: () {},
              text: 'Cancel',
              iconData: Icons.cancel_outlined,
              textStyle: TextStyle(color: Colors.grey),
              iconColor: Colors.grey,
            ),
            IconsButton(
              onPressed: () {},
              text: 'Delete',
              iconData: Icons.delete,
              color: Colors.red,
              textStyle: TextStyle(color: Colors.white),
              iconColor: Colors.white,
            ),
          ])

IconsOutlineButton and IconsButton are both buttons widgets provided by the plugin to make things easier for you read more, you can use any other buttons if you want.

 

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(
          msg: 'Are you sure? you can\'t undo this action',
          title: 'Delete',
          context: context,
          actions: [
            IconsOutlineButton(
              onPressed: () {},
              text: 'Cancel',
              iconData: Icons.cancel_outlined,
              textStyle: TextStyle(color: Colors.grey),
              iconColor: Colors.grey,
            ),
            IconsButton(
              onPressed: () {},
              text: 'Delete',
              iconData: Icons.delete,
              color: Colors.red,
              textStyle: TextStyle(color: Colors.white),
              iconColor: Colors.white,
            ),
          ]),

Show Animations 

Animations in this library are implemented using Lottie animation library. You can get free animations files here.

*.json file downloaded from LottieFiles should be placed in flutter project.

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

In code, set lottieBuilder arg in Widget to set Animation to the dialog.

Dialogs.materialDialog(
          color: Colors.white,
          msg: 'Congratulations, you won 500 points',
          title: 'Congratulations',
          lottieBuilder: Lottie.asset(
          'assets/cong_example.json',
          fit: BoxFit.contain,
          ),
          context: context,
          actions: [
            IconsButton(
              onPressed: () {},
              text: 'Claim',
              iconData: Icons.done,
              color: Colors.blue,
              textStyle: TextStyle(color: Colors.white),
              iconColor: Colors.white,
            ),
          ]),

 

Icons buttons 

The plugin provide you some out of the box customized buttons to help you creating your dialog.

IconsOutlineButton

This widget helps you create an outline button easily

    IconsOutlineButton(
      onPressed: () {},
      text: 'Cancel',
      iconData: Icons.cancel_outlined,
      textStyle: TextStyle(color: Colors.grey),
      iconColor: Colors.grey,
    ),

IconsButton

This widget helps you create a material button with icons in few lines of code

    IconsButton(
      onPressed: () {},
      text: 'Delete',
      iconData: Icons.delete,
      color: Colors.red,
      textStyle: TextStyle(color: Colors.white),
      iconColor: Colors.white,
    ),

CustomView

You can add your own Widget inside the dialog by using the customView attribute and CustomViewPosition to place it wherever you want.

Possible values
BEFORE_ANIMATION
BEFORE_TITLE (Default)
BEFORE_MESSAGE
BEFORE_ACTION
AFTER_ACTION
Dialogs.materialDialog(
          color: Colors.white,
          msg: 'Congratulations, you won 500 points',
          title: 'Congratulations',
          lottieBuilder: Lottie.asset(
          'assets/cong_example.json',
          fit: BoxFit.contain,
          ),
          customView: MySuperWidget(),
          customViewPosition: CustomViewPosition.BEFORE_ACTION,
          context: context,
          actions: [
            IconsButton(
              onPressed: () {},
              text: 'Claim',
              iconData: Icons.done,
              color: Colors.blue,
              textStyle: TextStyle(color: Colors.white),
              iconColor: Colors.white,
            ),
          ]),

Limitations 

it's better to make your animation to have the same background color as your dialog's background color, please use lottie editor to remove the background layer of your animation or make it same as your dialog background color before using it in the plugin.

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.

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 :)

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add material_dialogs

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  material_dialogs: ^1.1.4

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:material_dialogs/material_dialogs.dart';

example/lib/main.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:lottie/lottie.dart';
import 'package:material_dialogs/material_dialogs.dart';
import 'package:material_dialogs/widgets/buttons/icon_button.dart';
import 'package:material_dialogs/widgets/buttons/icon_outline_button.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Material design Dialogs',
        theme: ThemeData(
          textTheme: GoogleFonts.montserratTextTheme(
            Theme.of(context).textTheme,
          ),
          primarySwatch: Colors.blue,
        ),
        home: SafeArea(
          child: Scaffold(
              backgroundColor: Colors.white,
              appBar: AppBar(
                title: Text("Material design Dialogs"),
              ),
              body: TestPage()),
        ));
  }
}

class TestPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TestState();
  }
}

class TestState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          btn1(context),
          btn2(context),
          btn3(context),
          btn4(context),
        ],
      ),
    );
  }

  Widget btn1(BuildContext context) {
    return MaterialButton(
      color: Colors.grey[300],
      minWidth: 300,
      onPressed: () => Dialogs.materialDialog(
          msg: 'Are you sure ? you can\'t undo this',
          title: "Delete",
          color: Colors.white,
          context: context,
          dialogWidth: kIsWeb ? 0.3 : null,
          onClose: (value) => print("returned value is '$value'"),
          actions: [
            IconsOutlineButton(
              onPressed: () {
                Navigator.of(context).pop(['Test', 'List']);
              },
              text: 'Cancel',
              iconData: Icons.cancel_outlined,
              textStyle: TextStyle(color: Colors.grey),
              iconColor: Colors.grey,
            ),
            IconsButton(
              onPressed: () {},
              text: "Delete",
              iconData: Icons.delete,
              color: Colors.red,
              textStyle: TextStyle(color: Colors.white),
              iconColor: Colors.white,
            ),
          ]),
      child: Text("Show Material Dialog"),
    );
  }

  Widget btn2(BuildContext context) {
    return MaterialButton(
      minWidth: 300,
      color: Colors.grey[300],
      onPressed: () => Dialogs.bottomMaterialDialog(
          msg: 'Are you sure? you can\'t undo this action',
          title: 'Delete',
          context: context,
          actions: [
            IconsOutlineButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              text: 'Cancel',
              iconData: Icons.cancel_outlined,
              textStyle: TextStyle(color: Colors.grey),
              iconColor: Colors.grey,
            ),
            IconsButton(
              onPressed: () {},
              text: 'Delete',
              iconData: Icons.delete,
              color: Colors.red,
              textStyle: TextStyle(color: Colors.white),
              iconColor: Colors.white,
            ),
          ]),
      child: Text("Show Bottom Material Dialog"),
    );
  }

  Widget btn3(BuildContext context) {
    return MaterialButton(
      minWidth: 300,
      color: Colors.grey[300],
      onPressed: () => Dialogs.materialDialog(
        color: Colors.white,
        msg: 'Congratulations, you won 500 points',
        title: 'Congratulations',
        lottieBuilder: Lottie.asset(
          'assets/cong_example.json',
          fit: BoxFit.contain,
        ),
        dialogWidth: kIsWeb ? 0.3 : null,
        context: context,
        actions: [
          IconsButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            text: 'Claim',
            iconData: Icons.done,
            color: Colors.blue,
            textStyle: TextStyle(color: Colors.white),
            iconColor: Colors.white,
          ),
        ],
      ),
      child: Text("Show animations Material Dialog"),
    );
  }

  Widget btn4(BuildContext context) {
    return MaterialButton(
      color: Colors.grey[300],
      minWidth: 300,
      onPressed: () => Dialogs.bottomMaterialDialog(
        msg: 'Congratulations, you won 500 points',
        title: 'Congratulations',
        color: Colors.white,
        lottieBuilder: Lottie.asset(
          'assets/cong_example.json',
          fit: BoxFit.contain,
        ),
        context: context,
        actions: [
          IconsButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            text: 'Claim',
            iconData: Icons.done,
            color: Colors.blue,
            textStyle: TextStyle(color: Colors.white),
            iconColor: Colors.white,
          ),
        ],
      ),
      child: Text("Show animations Bottom Dialog"),
    );
  }
}

Download details:

Author: ezaldeensahb.link

Source: https://github.com/Ezaldeen99/material_dialogs

#flutter #android #ios 

A Flutter Package Aims to Help You Create animated, Simple, Stylish Material Dialogs
1.05 GEEK