Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ezaldeen99/material_dialogs
A Flutter library aims to help you create animated, simple, and stylish Material Dialogs in your app.
https://github.com/ezaldeen99/material_dialogs
flutter flutter-dialog flutter-ui flutterdev flutterpackage
Last synced: 5 days ago
JSON representation
A Flutter library aims to help you create animated, simple, and stylish Material Dialogs in your app.
- Host: GitHub
- URL: https://github.com/ezaldeen99/material_dialogs
- Owner: Ezaldeen99
- License: apache-2.0
- Created: 2020-12-02T15:08:26.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-27T08:36:25.000Z (6 months ago)
- Last Synced: 2025-01-18T06:07:20.760Z (12 days ago)
- Topics: flutter, flutter-dialog, flutter-ui, flutterdev, flutterpackage
- Language: Dart
- Homepage:
- Size: 1.92 MB
- Stars: 95
- Watchers: 3
- Forks: 47
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# [Flutter Material Dialogs](https://pub.dev/packages/material_dialogs)
[](https://pub.dev/packages/material_dialogs/install)
# 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 ](#introduction)
> - [ Types of Dialog ](#types)
> - [ Implementation ](#implementation)
> - [ Create Dialog Instance ](#createDialogInstance)
> - [ Material Dialog ](#createMaterialDialog)
> - [ Bottom Sheet Material Dialog ](#createBsMaterialDialog)
> - [ Show Animations ](#showAnims)
> - [Icon Buttons](#icons_buttons)
> - [ Contribute ](#contribute)
> - [ Credits ](#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_](https://lottiefiles.com/) 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](/example) directory for demo. Let's have look talk in details about it.
### install
#### i. pubspec
In `pubspec.yaml`
```yaml
dependencies:
material_dialogs: _latest_version
```
Now in your Dart code, you can use:
```dart
import 'package:material_dialogs/material_dialogs.dart';
```
Details see [pub.dev](https://pub.dev/packages/material_dialogs/install).
### 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.
```dart
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](#icons_buttons), 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.
```dart
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](https://lottiefiles.com/).
`*.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.
```dart
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
```dart
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
```dart
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 |
```dart
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](https://lottiefiles.com/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.
- [Lottie for Flutter](https://pub.dev/packages/lottie)
- [MaterialDialog-Android](https://github.com/PatilShreyas/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 :)