{"id":13548485,"url":"https://github.com/payam-zahedi/toastification","last_synced_at":"2025-05-15T03:05:22.409Z","repository":{"id":113295154,"uuid":"551935791","full_name":"payam-zahedi/toastification","owner":"payam-zahedi","description":"Toastification is a Flutter package for displaying customizable toast messages. It provides predefined widgets for success, error, warning, and info messages, as well as a custom widget for flexibility. With Toastification, you can add and manage multiple toast messages at the same time with ease.","archived":false,"fork":false,"pushed_at":"2025-03-14T13:23:41.000Z","size":12594,"stargazers_count":695,"open_issues_count":21,"forks_count":57,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-13T20:14:37.303Z","etag":null,"topics":["dart","flutter","notifications","toast"],"latest_commit_sha":null,"homepage":"https://payamzahedi.com/toastification/","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/payam-zahedi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2022-10-15T12:37:25.000Z","updated_at":"2025-05-12T05:53:22.000Z","dependencies_parsed_at":"2023-12-22T14:45:03.887Z","dependency_job_id":"283f6ae3-1d44-4163-9f2f-11ff0ca153a7","html_url":"https://github.com/payam-zahedi/toastification","commit_stats":{"total_commits":373,"total_committers":18,"mean_commits":20.72222222222222,"dds":"0.30563002680965146","last_synced_commit":"ff27e001b64d9ed58fb708af5ee5e11cb1c133c8"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/payam-zahedi%2Ftoastification","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/payam-zahedi%2Ftoastification/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/payam-zahedi%2Ftoastification/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/payam-zahedi%2Ftoastification/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/payam-zahedi","download_url":"https://codeload.github.com/payam-zahedi/toastification/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264765,"owners_count":22041793,"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":["dart","flutter","notifications","toast"],"created_at":"2024-08-01T12:01:10.997Z","updated_at":"2025-05-15T03:05:22.380Z","avatar_url":"https://github.com/payam-zahedi.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# Toastification \n\n[![pub package](https://img.shields.io/pub/v/toastification?color=blue\u0026style=plastic)](https://pub.dartlang.org/packages/toastification) [![codecov](https://codecov.io/gh/payam-zahedi/toastification/graph/badge.svg?token=UTQX773WXM)](https://codecov.io/gh/payam-zahedi/toastification)\n\n\u003cp align=\"left\"\u003e\n\u003cimg src=\"https://github.com/payam-zahedi/toastification/blob/main/doc/image/intro.png?raw=true\" width=\"100%\" alt=\"Styles\" /\u003e\n\u003c/p\u003e\n\nToastification is a Flutter package that allows developers to easily display toast notifications in their apps. Toast notifications are a type of pop-up message that typically appear on the screen and disappear after a short amount of time. They are commonly used to display information, alerts, or confirmations to the user.\n\nOne of the advantages of the Toastification package is its ability to handle multiple toast messages. With Toastification, developers can display multiple toast notifications at once and display them in a queue. This means that if multiple notifications are triggered at the same time, they will be displayed one after the other, rather than overlapping on the screen.\n\nOverall, Toastification is a useful package for Flutter developers who want to add toast notifications to their apps without having to write the code from scratch.\n\n## [Toast Builder](https://payamzahedi.com/toastification/)\n\nDon't want to dive into the whole documentation? No problem!\nJust head over to our [Toast Builder Website](https://payamzahedi.com/toastification/), where you can effortlessly customize your toast notifications, copy the generated code, and seamlessly integrate them into your project. It's the quickest way to get started with Toastification!\n\nhttps://github.com/payam-zahedi/toastification/assets/47558577/0e40aefd-b768-4d13-b982-eeeefb2256e9\n\n## Installation\n\nTo use Toastification, you need to add it to your pubspec.yaml file:\n\n```yaml\ndependencies:\n  toastification: latest_version\n```\n\nThen, run `flutter pub get` to install the package.\n\n## Usage\n\nTo use Toastification in your Flutter app, first import the package:\n\n```dart\nimport 'package:toastification/toastification.dart';\n```\n\nbefore we dive into the details, you should know that you can use Toastification in two different way:\n\n`toastification.show` Method: to show predefined toast messages with predefined styles.\n`toastification.showCustom` Method: to show custom toast messages with custom styles.\n\nyou can either use the 'toastification' instance or 'Toastification()' constructor to access the methods.\n\n## Usage without context\n\nIf you want to display toast messages without using `context`, wrap your AppWidget with `ToastificationWrapper` like this:\n\n```dart\nreturn ToastificationWrapper(\n  child: MaterialApp(),\n);\n```\n\nAnd now you can use both `toastification.show` and `toastification.showCustom` without providing `context`.\n\n## Show Method\n\nby using the `show` method, you can show predefined toast messages. you can use the `ToastificationType` enum to choose the type and `ToastificationStyle` enum to choose the style of the toast message.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/payam-zahedi/toastification/blob/main/doc/image/types.png?raw=true\" width=\"100%\" alt=\"Types\" /\u003e\n\u003c/p\u003e\n\n```dart\ntoastification.show(\n  context: context, // optional if you use ToastificationWrapper\n  title: Text('Hello, world!'),\n  autoCloseDuration: const Duration(seconds: 5),\n);\n```\n\nThis will display a toast message with the text \"Hello, world!\".\n\nYou can customize the appearance of the toast message by passing in additional parameters to the `show()` method:\n\n```dart\ntoastification.show(\n  context: context, // optional if you use ToastificationWrapper\n  type: ToastificationType.success,\n  style: ToastificationStyle.flat,\n  autoCloseDuration: const Duration(seconds: 5),\n  title: Text('Hello, World!'),\n  // you can also use RichText widget for title and description parameters\n  description: RichText(text: const TextSpan(text: 'This is a sample toast message. ')),\n  alignment: Alignment.topRight,\n  direction: TextDirection.ltr,\n  animationDuration: const Duration(milliseconds: 300),\n  animationBuilder: (context, animation, alignment, child) {\n    return FadeTransition(\n      turns: animation,\n      child: child,\n    );\n  },\n  icon: const Icon(Icons.check),\n  showIcon: true, // show or hide the icon\n  primaryColor: Colors.green,\n  backgroundColor: Colors.white,\n  foregroundColor: Colors.black,\n  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 16),\n  margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),\n  borderRadius: BorderRadius.circular(12),\n  boxShadow: const [\n    BoxShadow(\n      color: Color(0x07000000),\n      blurRadius: 16,\n      offset: Offset(0, 16),\n      spreadRadius: 0,\n    )\n  ],\n  showProgressBar: true,\n  closeButton: ToastCloseButton(\n    showType: CloseButtonShowType.onHover,\n    buttonBuilder: (context, onClose) {\n      return OutlinedButton.icon(\n        onPressed: onClose,\n        icon: const Icon(Icons.close, size: 20),\n        label: const Text('Close'),\n      );\n    },\n  ),\n  closeOnClick: false,\n  pauseOnHover: true,\n  dragToClose: true,\n  applyBlurEffect: true,\n  callbacks: ToastificationCallbacks(\n    onTap: (toastItem) =\u003e print('Toast ${toastItem.id} tapped'),\n    onCloseButtonTap: (toastItem) =\u003e print('Toast ${toastItem.id} close button tapped'),\n    onAutoCompleteCompleted: (toastItem) =\u003e print('Toast ${toastItem.id} auto complete completed'),\n    onDismissed: (toastItem) =\u003e print('Toast ${toastItem.id} dismissed'),\n  ),\n);\n```\n\n### ToastificationStyle\n\nWe have 5 predefined styles for toast messages, each offering a unique look and feel to match your application's design. Here's a breakdown of each style:\n\n\u003cp align=\"left\"\u003e\n\u003cimg src=\"https://github.com/payam-zahedi/toastification/blob/main/doc/image/styles.png?raw=true\" width=\"100%\" alt=\"Styles\" /\u003e\n\u003c/p\u003e\n\n1. **ToastificationStyle.flat**\n\n   - A simple and clean style with a subtle border and no background fill. Ideal for minimalist notifications that don't overwhelm the interface.\n\n2. **ToastificationStyle.fillColored**\n\n   - A bold style with a solid colored background. Perfect for high-visibility alerts or important notifications that need immediate attention.\n\n3. **ToastificationStyle.flatColored**\n\n   - A balanced style with a flat design, colored borders, and text, but without a solid fill. Great for notifications that need to stand out without being too bold.\n\n4. **ToastificationStyle.minimal**\n\n   - A sleek and modern design with minimal elements and an accent line denoting the notification type. Perfect for clean, distraction-free interfaces.\n\n5. **ToastificationStyle.simple**\n   - A straightforward style showing a single line of text. Best for short, simple messages or confirmations where minimal design is preferred.\n\n## ShowCustom Method\n\nIf you are looking for even more control over the appearance and behavior of your toast messages, you can use the showCustom() method to create a completely custom toast message. This method lets you pass in a builder function that returns the widget you want to display, giving you complete control over the toast's layout, styling, and interactivity.\n\nWith showCustom(), the possibilities are endless. You can create a custom toast message that matches your app's unique visual style, or you can add interactive elements like buttons and sliders to make your toast messages more engaging and dynamic.\n\nHere's an example of how to use showCustom() to create a custom toast message with a button that lets users perform an action:\n\n```dart\ntoastification.showCustom(\n  context: context, // optional if you use ToastificationWrapper\n  autoCloseDuration: const Duration(seconds: 5),\n  alignment: Alignment.topRight,\n  builder: (BuildContext context, ToastificationItem holder) {\n    return Container(\n      decoration: BoxDecoration(\n        borderRadius: BorderRadius.circular(8),\n        color: Colors.blue,\n      ),\n      padding: const EdgeInsets.all(16),\n      margin: const EdgeInsets.all(8),\n      child: Column(\n        crossAxisAlignment: CrossAxisAlignment.start,\n        children: [\n          const Text('Custom Toast',\n              style: TextStyle(\n                  color: Colors.white, fontWeight: FontWeight.bold)),\n          const SizedBox(height: 8),\n          const Text('This is a custom toast message!',\n              style: TextStyle(color: Colors.white)),\n          const SizedBox(height: 16),\n          Row(\n            children: [\n              ElevatedButton(\n                onPressed: () {\n                  // Perform an action when the button is pressed\n                },\n                child: const Text('Do Something'),\n              ),\n            ],\n          ),\n        ],\n      ),\n    );\n  },\n);\n```\n\nWith showCustom(), you're only limited by your imagination. Create a toast message that stands out from the crowd and adds a touch of personality to your app!\n\n### Using GlobalNavigatorKey\n\nIf you need to show toasts from places where you don't have access to the BuildContext, you can use a GlobalNavigatorKey. This is particularly handy when you are using frameworks like GetX, where you don't have access to `context`.\n\nFirst, create a GlobalNavigatorKey:\n‍‍\n\n```dart\nfinal GlobalKey\u003cNavigatorState\u003e globalNavigatorKey = GlobalKey\u003cNavigatorState\u003e();\n```\n\nThen, assign it to your MaterialApp:\n\n```dart\nMaterialApp(\n  navigatorKey: navigatorKey,\n  // ... other properties\n)\n```\n\nNow you can `show` toasts using the overlayState from the navigatorKey:\n\n```dart\ntoastification.show(\n  overlayState: navigatorKey.currentState?.overlay,\n  autoCloseDuration: const Duration(seconds: 5),\n  title: Text('Hello, World!'),\n);\n```\n\nIf you want to use `showCustom` instead, you can use it like this:\n\n```dart\ntoastification.showCustom(\n  overlayState: navigatorKey.currentState?.overlay,\n  autoCloseDuration: const Duration(seconds: 5),\n  builder: (BuildContext context, ToastificationItem holder) {\n     // Your custom toast widget\n  },\n);\n```\n\n## Custom Animations\n\nYou can customize the animation of the toast notification by providing a Duration for the animation duration and implementing your own animation builder function using the animationBuilder parameter. Here's an example of how to use custom animations:\n\n```dart\ntoastification.show(\n  context: context,\n  title: Text('Hello, world!'),\n  // .... Other parameters\n  animationDuration: const Duration(milliseconds: 300),\n  animationBuilder: (context, animation, alignment, child) {\n    return RotationTransition(\n      turns: animation,\n      child: child,\n    );\n  },\n);\n```\n\n## Global/Default Configuration\n\nGlobal configuration allows you to change the default behavior of Toastification across your entire application or in a specific page. To achieve this, you can provide your own `ToastificationConfig` using the `ToastificationConfigProvider` widget.\n\nThe `ToastificationConfigProvider` is an inherited widget, which means the provided configuration will be available to all child widgets in the widget tree. This allows you to maintain consistent toast notification behavior throughout your app.\n\n#### Applying Global Configuration for the Whole App\n\nTo apply global configuration for the entire application, use `builder` parameter of the `MaterialApp` widget to wrap your pages with `ToastificationConfigProvider` and provide an instance of `ToastificationConfig`. Here's an example:\n\n```dart\nclass MyApp extends StatelessWidget {\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Toastification',\n      builder: (context, child) {\n        return ToastificationConfigProvider(\n          config: const ToastificationConfig(\n            margin: EdgeInsets.fromLTRB(0, 16, 0, 110),\n            alignment: Alignment.center,\n            itemWidth: 440,\n            animationDuration: Duration(milliseconds: 500),\n          ),\n          child: child!,\n        );\n      },\n    );\n  }\n}\n```\n\n#### Applying Global Configuration for a Specific Page\n\nTo apply global configuration for a specific page, you can wrap the widget tree of that page with `ToastificationConfigProvider` and provide an instance of `ToastificationConfig`. Here's an example:\n\n```dart\nclass HomePage extends StatelessWidget {\n  const HomePage({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return const ToastificationConfigProvider(\n      config: ToastificationConfig(\n        margin: EdgeInsets.fromLTRB(0, 16, 0, 110),\n        alignment: Alignment.center,\n        itemWidth: 440,\n        animationDuration: Duration(milliseconds: 500),\n      ),\n      child: Scaffold(\n        body: HomeBody(),\n      ),\n    );\n  }\n}\n```\n\n## Manage Your Notifications\n\nIn addition to displaying toast messages, the Toastification package also provides methods for managing and dismissing existing notifications. Here are the available methods:\n\n#### Find a Notification item\n\nFind a notification with the given ID.\n\n```dart\nfinal notification = toastification.findToastificationItem('my_notification_id');\n```\n\n#### Dismiss a Notification\n\nRemove a specific notification from the screen.\n\n```dart\nfinal notification = toastification.show(\n  context: context,\n  title: Text('Hello'),\n  autoCloseDuration: const Duration(seconds: 5),\n);\n\ntoastification.dismiss(notification);\n```\n\n#### Dismiss a Notification by ID\n\nRemove a notification with the given ID from the screen.\n\n```dart\ntoastification.dismissById('my_notification_id');\n```\n\n#### Dismiss All Notifications\n\nRemove all notifications that are currently displayed on the screen.\n\n```dart\ntoastification.dismissAll(delayForAnimation: true);\n```\n\nYou can customize the dismissal behavior by setting the `delayForAnimation` parameter. If set to `true`, Toastification will wait for the animation to finish before dismissing all notifications. If set to `false`, the notifications will be dismissed immediately without waiting for the animation.\n\n#### Dismiss First Notification\n\nRemove the first notification from the screen.\n\n```dart\ntoastification.dismissFirst();\n```\n\n#### Dismiss Last Notification\n\nRemove the last notification from the screen.\n\n```dart\ntoastification.dismissLast();\n```\n\n## Design\n\nToastification was redesigned by [Sepide Moqadasi](https://sepide.design/). We want to extend our heartfelt appreciation to Sepide for her exceptional design work, which has made Toastification visually appealing and user-friendly. Special thanks to Sepide for her valuable contributions to this project.\n\n\u003cp align=\"left\"\u003e\n\u003cimg src=\"https://github.com/payam-zahedi/toastification/blob/main/doc/image/design_mobile.png?raw=true\" width=\"49%\" alt=\"Styles\" /\u003e\n\u003cimg src=\"https://github.com/payam-zahedi/toastification/blob/main/doc/image/design_desktop.png?raw=true\" width=\"49%\" alt=\"Styles\" /\u003e\n\u003c/p\u003e\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nContributions are always welcome! If you have any suggestions, bug reports, or feature requests, please open an issue on the GitHub repository.\n\nIf you would like to contribute to the project, please read the [CONTRIBUTING.md](https://github.com/payam-zahedi/toastification/blob/main/CONTRIBUTING.md \"CONTRIBUTING.md\") file for more information on how to contribute.\n\n## License\n\nToastification is released under the `BSD-3-Clause` License. You can find the full text of the license in the LICENSE file in the root of the repository.\n\n---\n\n#### \\* Written with the help of Chat GPT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpayam-zahedi%2Ftoastification","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpayam-zahedi%2Ftoastification","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpayam-zahedi%2Ftoastification/lists"}