{"id":22883002,"url":"https://github.com/ezaldeen99/material_dialogs","last_synced_at":"2025-04-09T14:07:06.951Z","repository":{"id":40486600,"uuid":"317899778","full_name":"Ezaldeen99/material_dialogs","owner":"Ezaldeen99","description":"A Flutter library aims to help you create animated,  simple, and stylish Material Dialogs in your app.","archived":false,"fork":false,"pushed_at":"2024-07-27T08:36:25.000Z","size":2017,"stargazers_count":97,"open_issues_count":5,"forks_count":47,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T06:52:37.998Z","etag":null,"topics":["flutter","flutter-dialog","flutter-ui","flutterdev","flutterpackage"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ezaldeen99.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-02T15:08:26.000Z","updated_at":"2025-03-05T15:36:10.000Z","dependencies_parsed_at":"2024-06-18T21:31:52.949Z","dependency_job_id":"f22b3235-43d9-495e-9d1e-2b5ad4069df2","html_url":"https://github.com/Ezaldeen99/material_dialogs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ezaldeen99%2Fmaterial_dialogs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ezaldeen99%2Fmaterial_dialogs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ezaldeen99%2Fmaterial_dialogs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ezaldeen99%2Fmaterial_dialogs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ezaldeen99","download_url":"https://codeload.github.com/Ezaldeen99/material_dialogs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054227,"owners_count":21039952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","flutter-dialog","flutter-ui","flutterdev","flutterpackage"],"created_at":"2024-12-13T18:31:27.578Z","updated_at":"2025-04-09T14:07:06.922Z","avatar_url":"https://github.com/Ezaldeen99.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Flutter Material Dialogs](https://pub.dev/packages/material_dialogs)\n\n[![pub](https://img.shields.io/pub/v/material_dialogs.svg)](https://pub.dev/packages/material_dialogs/install)\n\n# Flutter Material Dialogs 📱\n\nA Flutter library aims to help you create 💪🏻*animated*, 😃 _simple_, 😎 _stylish_ Material Dialogs in your app.\n\n\u003ctable style=\"width:100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u003cb\u003e1. Material Dialog\u003c/b\u003e\u003c/th\u003e\n    \u003cth\u003e\u003cb\u003e2. Animations Material Dialog\u003c/b\u003e\u003c/th\u003e \n    \u003cth\u003e\u003cb\u003e3. Bottom Material Dialog\u003c/b\u003e\u003c/th\u003e\n    \u003cth\u003e\u003cb\u003e4. Animations Bottom Dialog\u003c/b\u003e\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://github.com/Ezaldeen99/material_dialogs/raw/master/gifs/normal.gif\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://github.com/Ezaldeen99/material_dialogs/raw/master/gifs/normal_animated.gif\"/\u003e\u003c/td\u003e \n    \u003ctd\u003e\u003cimg src=\"https://github.com/Ezaldeen99/material_dialogs/raw/master/gifs/bottom.gif\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://github.com/Ezaldeen99/material_dialogs/raw/master/gifs/bottom_animated.gif\"/\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n# Table of Contents:\n\n\u003e - [ Introduction ](#introduction)\n\u003e - [ Types of Dialog ](#types)\n\u003e - [ Implementation ](#implementation)\n\u003e   - [ Create Dialog Instance ](#createDialogInstance)\n\u003e     - [ Material Dialog ](#createMaterialDialog)\n\u003e     - [ Bottom Sheet Material Dialog ](#createBsMaterialDialog)\n\u003e   - [ Show Animations ](#showAnims)\n\u003e   - [Icon Buttons](#icons_buttons)\n\u003e - [ Contribute ](#contribute)\n\u003e - [ Credits ](#credits)\n\n\u003ca name=\"introduction\"\u003e\u003c/a\u003e\n\n## Introduction\n\n**MaterialDialog** This Plugin will be useful to create simple, animated, and beautiful dialogs in your next Flutter app.\nThis library implements Airbnb's [_Lottie_](https://lottiefiles.com/) library to render After Effects animation in app.\n\n\u003ca name=\"types\"\u003e\u003c/a\u003e\n\n## Types of Dialog\n\n**MaterialDialog** library provides two types of dialog i.e.\n\n\u003ctable style=\"width:100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u003cb\u003e1. Material Dialog\u003c/b\u003e\u003c/th\u003e\n    \u003cth\u003e\u003cb\u003e2. Bottom Sheet Material Dialog\u003c/b\u003e\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eA normal material dialog which can have one or two buttons.\u003c/td\u003e\n    \u003ctd\u003eA Bottom Sheet material dialog which can have one or two buttons, is showed from bottom of device.\u003c/td\u003e \n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cimg src=\"https://github.com/Ezaldeen99/material_dialogs/raw/master/gifs/Screenshot_20201204_173336.png\" width=\"75%\"/\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cimg src=\"https://github.com/Ezaldeen99/material_dialogs/raw/master/gifs/Screenshot_20201204_173347.png\" width=\"75%\"/\u003e\u003c/td\u003e \n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ca name=\"implementation\"\u003e\u003c/a\u003e\n\n## Implementation\n\nImplementation of Material Dialog library is so easy. You can check [/example](/example) directory for demo. Let's have look talk in details about it.\n\n\u003ca name=\"install\"\u003e\u003c/a\u003e\n\n### install\n\n#### i. pubspec\n\nIn `pubspec.yaml`\n\n```yaml\ndependencies:\n  material_dialogs: _latest_version\n```\n\nNow in your Dart code, you can use:\n\n```dart\nimport 'package:material_dialogs/material_dialogs.dart';\n```\n\nDetails see [pub.dev](https://pub.dev/packages/material_dialogs/install).\n\n\u003ca name=\"createDialog\"\u003e\u003c/a\u003e\n\n### Create Dialog\n\nAs there are two types of dialogs in library. Material Dialogs are instantiated as follows.\n\u003ca name=\"createMaterialDialog\"\u003e\u003c/a\u003e\n\n#### i. Material Dialog\n\n`Dialogs` class will be used to create your dialog, below is an example to show your dialog in the app.\n\n```dart\nDialogs.materialDialog(\n          msg: 'Are you sure ? you can\\'t undo this',\n          title: \"Delete\",\n          color: Colors.white,\n          context: context,\n          actions: [\n            IconsOutlineButton(\n              onPressed: () {},\n              text: 'Cancel',\n              iconData: Icons.cancel_outlined,\n              textStyle: TextStyle(color: Colors.grey),\n              iconColor: Colors.grey,\n            ),\n            IconsButton(\n              onPressed: () {},\n              text: 'Delete',\n              iconData: Icons.delete,\n              color: Colors.red,\n              textStyle: TextStyle(color: Colors.white),\n              iconColor: Colors.white,\n            ),\n          ])\n```\n\n\u003cimg align=\"center\" src=\"https://github.com/Ezaldeen99/material_dialogs/raw/master/gifs/normal.gif\" width=\"300\"/\u003e\n\n`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.\n\n\u003ca name=\"createBsMaterialDialog\"\u003e\u003c/a\u003e\n\n#### ii. Bottom Sheet Material Dialog\n\n`Dialogs` class will be used to create your dialog, use `bottomMaterialDialog`. Below is an example to show your dialog in the app.\n\n```dart\nDialogs.bottomMaterialDialog(\n          msg: 'Are you sure? you can\\'t undo this action',\n          title: 'Delete',\n          context: context,\n          actions: [\n            IconsOutlineButton(\n              onPressed: () {},\n              text: 'Cancel',\n              iconData: Icons.cancel_outlined,\n              textStyle: TextStyle(color: Colors.grey),\n              iconColor: Colors.grey,\n            ),\n            IconsButton(\n              onPressed: () {},\n              text: 'Delete',\n              iconData: Icons.delete,\n              color: Colors.red,\n              textStyle: TextStyle(color: Colors.white),\n              iconColor: Colors.white,\n            ),\n          ]),\n```\n\n\u003cimg align=\"center\" src=\"https://github.com/Ezaldeen99/material_dialogs/raw/master/gifs/bottom.gif\" width=\"300\"/\u003e\n\n\u003ca name=\"showAnims\"\u003e\u003c/a\u003e\n\n### Show Animations\n\nAnimations in this library are implemented using Lottie animation library. You can get free animations files [here](https://lottiefiles.com/).\n\n`*.json` file downloaded from _LottieFiles_ should be placed in flutter project.\n\nFor example, here `cong_example.json` animation file is used in the `assets` folder to show congratulations animation in the example app.\n\nIn code, set `lottieBuilder` arg in Widget to set Animation to the dialog.\n\n```dart\nDialogs.materialDialog(\n          color: Colors.white,\n          msg: 'Congratulations, you won 500 points',\n          title: 'Congratulations',\n          lottieBuilder: Lottie.asset(\n          'assets/cong_example.json',\n          fit: BoxFit.contain,\n          ),\n          context: context,\n          actions: [\n            IconsButton(\n              onPressed: () {},\n              text: 'Claim',\n              iconData: Icons.done,\n              color: Colors.blue,\n              textStyle: TextStyle(color: Colors.white),\n              iconColor: Colors.white,\n            ),\n          ]),\n```\n\n\u003ca name=\"icons_buttons\"\u003e\u003c/a\u003e\n\n## Icons buttons\n\nThe plugin provide you some out of the box customized buttons to help you creating your dialog.\n\n#### IconsOutlineButton\n\nThis widget helps you create an outline button easily\n\n```dart\n    IconsOutlineButton(\n      onPressed: () {},\n      text: 'Cancel',\n      iconData: Icons.cancel_outlined,\n      textStyle: TextStyle(color: Colors.grey),\n      iconColor: Colors.grey,\n    ),\n```\n\n#### IconsButton\n\nThis widget helps you create a material button with icons in few lines of code\n\n```dart\n    IconsButton(\n      onPressed: () {},\n      text: 'Delete',\n      iconData: Icons.delete,\n      color: Colors.red,\n      textStyle: TextStyle(color: Colors.white),\n      iconColor: Colors.white,\n    ),\n```\n\n\u003cimg align=\"center\" src=\"https://github.com/Ezaldeen99/material_dialogs/raw/master/gifs/single_btn.png\" width=\"300\"/\u003e\n\n#### CustomView\n\nYou can add your own Widget inside the dialog by using the customView attribute and CustomViewPosition to place it wherever you want.\n\n| Possible values        |\n| ---------------------- |\n| BEFORE_ANIMATION       |\n| BEFORE_TITLE (Default) |\n| BEFORE_MESSAGE         |\n| BEFORE_ACTION          |\n| AFTER_ACTION           |\n\n```dart\nDialogs.materialDialog(\n          color: Colors.white,\n          msg: 'Congratulations, you won 500 points',\n          title: 'Congratulations',\n          lottieBuilder: Lottie.asset(\n          'assets/cong_example.json',\n          fit: BoxFit.contain,\n          ),\n          customView: MySuperWidget(),\n          customViewPosition: CustomViewPosition.BEFORE_ACTION,\n          context: context,\n          actions: [\n            IconsButton(\n              onPressed: () {},\n              text: 'Claim',\n              iconData: Icons.done,\n              color: Colors.blue,\n              textStyle: TextStyle(color: Colors.white),\n              iconColor: Colors.white,\n            ),\n          ]),\n```\n\n# Limitations\n\nit'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.\n\n\u003ca name=\"contribute\"\u003e\u003c/a\u003e\n\n## Contribute\n\nLet's develop with collaborations. We would love to have contributions by raising issues and opening PRs. Filing an issue before PR is must.\n\n\u003ca name=\"credits\"\u003e\u003c/a\u003e\n\n## Credits\n\nThis library is built using following open-source libraries.\n\n- [Lottie for Flutter](https://pub.dev/packages/lottie)\n- [MaterialDialog-Android](https://github.com/PatilShreyas/MaterialDialog-Android) for inspiration\n\n## License\n\nProject 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 :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fezaldeen99%2Fmaterial_dialogs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fezaldeen99%2Fmaterial_dialogs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fezaldeen99%2Fmaterial_dialogs/lists"}