{"id":13789984,"url":"https://github.com/JackJonson/flutter_styled_toast","last_synced_at":"2025-05-12T07:31:24.001Z","repository":{"id":35028548,"uuid":"192918915","full_name":"JackJonson/flutter_styled_toast","owner":"JackJonson","description":"A Styled Toast Flutter package.","archived":false,"fork":false,"pushed_at":"2024-07-14T14:35:53.000Z","size":19320,"stargazers_count":76,"open_issues_count":11,"forks_count":42,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-16T03:27:22.412Z","etag":null,"topics":["animation","beautiful-ui","flutter","flutter-package","styled","toast"],"latest_commit_sha":null,"homepage":null,"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/JackJonson.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":"2019-06-20T12:48:43.000Z","updated_at":"2024-09-02T06:30:43.000Z","dependencies_parsed_at":"2024-11-16T03:26:25.052Z","dependency_job_id":"126e7ede-2170-47a3-abc1-3921c96a3962","html_url":"https://github.com/JackJonson/flutter_styled_toast","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JackJonson%2Fflutter_styled_toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JackJonson%2Fflutter_styled_toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JackJonson%2Fflutter_styled_toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JackJonson%2Fflutter_styled_toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JackJonson","download_url":"https://codeload.github.com/JackJonson/flutter_styled_toast/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253695098,"owners_count":21948812,"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":["animation","beautiful-ui","flutter","flutter-package","styled","toast"],"created_at":"2024-08-03T22:00:35.614Z","updated_at":"2025-05-12T07:31:18.979Z","avatar_url":"https://github.com/JackJonson.png","language":"Dart","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# flutter_styled_toast\n\nA Styled Toast Flutter package. \nYou can highly customize toast ever.\nBeautify toast with a series of animations and make toast more beautiful.\n\n## demo\n\n\u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/OverallAnimations.gif\" width=\"50%\"\u003e\n\n## Null safety\n```yaml\ndependencies:\n  flutter_styled_toast: ^2.2.1\n```\n\n## Getting Started\n\n```yaml\ndependencies:\n  flutter_styled_toast: ^1.5.2+3\n```\n\n```dart\nimport 'package:flutter_styled_toast/flutter_styled_toast.dart';\n```\n\n```dart\n//Simple to use, no global configuration\nshowToast(\"hello styled toast\",context:context);\n\n//Customize toast content widget, no global configuration\nshowToastWidget(Text('hello styled toast'),context:context);\n```\n\n```dart\n//Interactive toast, set [isIgnoring] false.\nshowToastWidget(\n   Container(\n       padding: EdgeInsets.symmetric(horizontal: 18.0),\n       margin: EdgeInsets.symmetric(horizontal: 50.0),\n       decoration: ShapeDecoration(\n           shape: RoundedRectangleBorder(\n               borderRadius: BorderRadius.circular(5.0),\n           ),\n           color: Colors.green[600],\n       ),\n       child: Row(\n           children: [\n               Text(\n                   'Jump to new page',\n                   style: TextStyle(\n                       color: Colors.white,\n                   ),\n               ),\n               IconButton(\n                   onPressed: () {\n                       ToastManager().dismissAll(showAnim: true);\n                       Navigator.push(context,\n                           MaterialPageRoute(builder: (context) {\n                           return SecondPage();\n                       }));\n                   },\n                   icon: Icon(\n                       Icons.add_circle_outline_outlined,\n                       color: Colors.white,\n                   ),\n               ),\n           ],\n           mainAxisAlignment: MainAxisAlignment.spaceBetween,\n       ),\n   ),\n   context: context,\n   isIgnoring: false,\n   duration: Duration.zero,\n);\n```\n\n```dart\n//Set an animation\nshowToast('This is normal toast with animation',\n   context: context,\n   animation: StyledToastAnimation.scale,\n);\n\n///Set both animation and reverse animation,\n///combination different animation and reverse animation to achieve amazing effect.\nshowToast('This is normal toast with animation',\n   context: context,\n   animation: StyledToastAnimation.scale,\n   reverseAnimation: StyledToastAnimation.fade,\n   position: StyledToastPosition.center,\n   animDuration: Duration(seconds: 1),\n   duration: Duration(seconds: 4),\n   curve: Curves.elasticOut,\n   reverseCurve: Curves.linear,\n);\n\n```dart\n\n\n```dart\n///Custom animation and custom reverse animation,\n///combination different animation and reverse animation to achieve amazing effect.\n\nAnimationController mController;\nAnimationController mReverseController;\n\n@override\nvoid initState() {\n  super.initState();\n  mController =\n      AnimationController(vsync: this, duration: Duration(milliseconds: 200));\n  mReverseController =\n      AnimationController(vsync: this, duration: Duration(milliseconds: 200));\n}\n\nshowToast('This is normal toast with custom animation',\n   context: context,\n   position: StyledToastPosition.bottom,\n   animDuration: Duration(seconds: 1),\n   duration: Duration(seconds: 4),\n   animationBuilder: (\n       BuildContext context,\n       AnimationController controller,\n       Duration duration,\n       Widget child,\n   ) {\n      return SlideTransition(\n          position: getAnimation\u003cOffset\u003e(\n          Offset(0.0, 3.0), Offset(0, 0), controller,\n          curve: Curves.bounceInOut),\n          child: child,\n      );\n   },\n   reverseAnimBuilder: (\n      BuildContext context,\n      AnimationController controller,\n      Duration duration,\n      Widget child,\n   ) {\n      return SlideTransition(\n          position: getAnimation\u003cOffset\u003e(\n          Offset(0.0, 0.0), Offset(-3.0, 0), controller,\n          curve: Curves.bounceInOut),\n          child: child,\n      );\n   },\n);\n\n```dart\n\n\n```dart\n///Custom animation, custom reverse animation and custom animation controller\nshowToast('This is normal toast with custom animation and controller',\n   context: context,\n   position: StyledToastPosition.bottom,\n   animDuration: Duration(seconds: 1),\n   duration: Duration(seconds: 4),\n   onInitState:(Duration toastDuration, Duration animDuration) async {\n      try {\n         await mController.forward().orCancel;\n         Future.delayed(toastDuration - animDuration, () async {\n            await mReverseController.forward().orCancel;\n            mController.reset();\n            mReverseController.reset();\n         });\n      } on TickerCanceled {}\n   },\n   animationBuilder: (\n       BuildContext context,\n       AnimationController controller,\n       Duration duration,\n       Widget child,\n   ) {\n      return SlideTransition(\n          position: getAnimation\u003cOffset\u003e(\n          Offset(0.0, 3.0), Offset(0, 0), controller,\n          curve: Curves.bounceInOut),\n          child: child,\n      );\n   },\n   reverseAnimBuilder: (\n      BuildContext context,\n      AnimationController controller,\n      Duration duration,\n      Widget child,\n   ) {\n      return SlideTransition(\n          position: getAnimation\u003cOffset\u003e(\n          Offset(0.0, 0.0), Offset(-3.0, 0), controller,\n          curve: Curves.bounceInOut),\n          child: child,\n      );\n   },\n);\n\n```dart\n\n\n\nSimple global configuration, wrap you app with StyledToast.\n```dart\nStyledToast(\n  locale: const Locale('en', 'US'),\n  child: MaterialApp(\n            title: appTitle,\n            showPerformanceOverlay: showPerformance,\n            home: LayoutBuilder(\n              builder: (BuildContext context, BoxConstraints constraints) {\n                return MyHomePage(\n                  title: appTitle,\n                  onSetting: onSettingCallback,\n                );\n              },\n            ),\n          ),\n);\n```\n\nHighly Customizable global configuration\n```dart\nStyledToast(\n  locale: const Locale('en', 'US'),  //You have to set this parameters to your locale\n  textStyle: TextStyle(fontSize: 16.0, color: Colors.white), //Default text style of toast\n  backgroundColor: Color(0x99000000),  //Background color of toast\n  borderRadius: BorderRadius.circular(5.0), //Border radius of toast\n  textPadding: EdgeInsets.symmetric(horizontal: 17.0, vertical: 10.0),//The padding of toast text\n  toastPositions: StyledToastPosition.bottom, //The position of toast\n  toastAnimation: StyledToastAnimation.fade,  //The animation type of toast\n  reverseAnimation: StyledToastAnimation.fade, //The reverse animation of toast (display When dismiss toast)\n  curve: Curves.fastOutSlowIn,  //The curve of animation\n  reverseCurve: Curves.fastLinearToSlowEaseIn, //The curve of reverse animation\n  duration: Duration(seconds: 4), //The duration of toast showing, when set [duration] to Duration.zero, toast won't dismiss automatically.\n  animDuration: Duration(seconds: 1), //The duration of animation(including reverse) of toast \n  dismissOtherOnShow: true,  //When we show a toast and other toast is showing, dismiss any other showing toast before.\n  movingOnWindowChange: true, //When the window configuration changes, move the toast.\n  fullWidth: false, //Whether the toast is full screen (subtract the horizontal margin)\n  isHideKeyboard: false, //Is hide keyboard when toast show\n  isIgnoring: true, //Is the input ignored for the toast\n  animationBuilder: (BuildContext context,AnimationController controller,Duration duration,Widget child,){  // Builder method for custom animation\n     return SlideTransition(\n        position: getAnimation\u003cOffset\u003e(Offset(0.0, 3.0),Offset(0,0), controller,curve: Curves.bounceInOut),\n        child: child,\n     );\n  },\n  reverseAnimBuilder: (BuildContext context,AnimationController controller,Duration duration,Widget child,){ // Builder method for custom reverse animation\n     return SlideTransition(\n        position: getAnimation\u003cOffset\u003e(Offset(0.0, 0.0),Offset(-3.0,0), controller,curve: Curves.bounceInOut),\n        child: child,\n     );\n  },\n  child: MaterialApp(\n          title: appTitle,\n          showPerformanceOverlay: showPerformance,\n          home: LayoutBuilder(\n            builder: (BuildContext context, BoxConstraints constraints) {\n              return MyHomePage(\n                title: appTitle,\n                onSetting: onSettingCallback,\n              );\n            },\n          ),\n        ),\n);\n```dart\n\n```dart\n//After global configuration, use in a single line.\nshowToast(\"hello styled toast\");\n\n//After global configuration, Customize toast content widget\nshowToastWidget(Text('hello styled toast'));\n```\n\n## 🚀 Roadmap\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/DefaultToastWidget.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      DefaultToastWidget\n      \u003cbr /\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/FadeAnim.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      FadeAnim\n      \u003cbr /\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/SlideFromTopAnim.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      SlideFromTopAnim\n      \u003cbr /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/SlideFromBottomAnim.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      SlideFromBottomAnim\n      \u003cbr /\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/SlideFromLeftAnim.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      SlideFromLeftAnim\n      \u003cbr /\u003e\n      \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/SlideFromRightAnim.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      SlideFromRightAnim\n      \u003cbr /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/ScaleAnim.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      ScaleAnim\n      \u003cbr /\u003e\n      \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/FadeScaleAnim.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      FadeScaleAnim\n      \u003cbr /\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/RotateAnim.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      RotateAnim\n      \u003cbr /\u003e\n      \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/FadeRotateAnim.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      FadeRotateAnim\n      \u003cbr /\u003e\n      \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/ScaleRotateAnim.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      ScaleRotateAnim\n      \u003cbr /\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/OnDismiss.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      OnDismiss\n      \u003cbr /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/CustomToastWidget.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      CustomToastWidget\n      \u003cbr /\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/CustomFailToastWidget.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      CustomFailToastWidget\n      \u003cbr /\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/JackJonson/flutter_styled_toast/master/screenshots/CustomSuccessToastWidget.gif\" width=\"260px\"\u003e\n      \u003cbr /\u003e\n      CustomSuccessToastWidget\n      \u003cbr /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n### StyledToast param\n\nproperty             | description\n---------------------|----------------------------\nlocale               | Locale (Not Null)(required You have to set this parameters to your locale)\nchild                | Widget (Not Null)(required)\ntextAlign            | TextAlign (default TextAlign.center)    \ntextDirection        | TextDirection (default TextDirection.ltr)  \nborderRadius         | BorderRadius (BorderRadius.circular(5.0))\nbackgroundColor      | Color (default Color(0x99000000))\ntextPadding          | EdgeInsetsGeometry (default EdgeInsets.symmetric(horizontal: 17.0,vertical: 8.0))   \ntoastHorizontalMargin| double (default 50.0)   \ntextStyle            | TextStyle (default TextStyle(fontSize: 16.0,fontWeight: FontWeight.normal,color: Colors.white))   \nshapeBorder          | ShapeBorder (default RoundedRectangleBorder(borderRadius: borderRadius))\nduration             | Duration (default 2.3s)(When set [duration] to Duration.zero, toast won't dismiss automatically)\nanimDuration         | Duration (default 400 milliseconds, animDuration * 2  \u003c= duration, conditions must be met for toast to display properly)\ntoastPositions       | StyledToastPosition (default StyledToastPosition.bottom)\ntoastAnimation       | StyledToastAnimation (default StyledToastAnimation.fade)\nreverseAnimation     | StyledToastAnimation \nalignment            | AlignmentGeometry (default Alignment.center)\naxis                 | Axis (default Axis.vertical)\nstartOffset          | Offset\nendOffset            | Offset\nreverseStartOffset   | Offset\nreverseEndOffset     | Offset\ncurve                | Curve (default Curves.linear)\nreverseCurve         | Curve (default Curves.linear)\ndismissOtherOnShow   | bool (default true)     \nonDismiss            | VoidCallback (Invoked when toast dismiss)\nfullWidth            | bool (default false)(Full width parameter that the width of the screen minus the width of the margin.)\nisHideKeyboard       | bool (default false)(Is hide keyboard when toast show)\nanimationBuilder     | CustomAnimationBuilder (Builder method for custom animation)\nreverseAnimBuilder   | CustomAnimationBuilder (Builder method for custom reverse animation)\nisIgnoring           | bool (default true)\nonInitState          | OnInitStateCallback (When toast widget [initState], this callback will be called)\n\n\n\n### showToast param\n\nproperty             | description\n---------------------|----------------------------\nmsg                  | String (Not Null)(required)\ncontext              | BuildContext (If you don't wrap app with StyledToast, context is required, otherwise, is not)\nduration             | Duration (default 2.3s)(When set [duration] to Duration.zero, toast won't dismiss automatically)\nanimDuration         | Duration (default 400 milliseconds, animDuration * 2  \u003c= duration, conditions must be met for toast to display properly)\nposition             | StyledToastPosition (default StyledToastPosition.bottom)\ntextStyle            | TextStyle (default TextStyle(fontSize: 16.0,fontWeight: FontWeight.normal,color: Colors.white))   \ntextPadding          | EdgeInsetsGeometry (default EdgeInsets.symmetric(horizontal: 17.0,vertical: 8.0))   \nbackgroundColor      | Color (default Color(0x99000000))\nborderRadius         | BorderRadius (BorderRadius.circular(5.0))\nshapeBorder          | ShapeBorder (default RoundedRectangleBorder(borderRadius: borderRadius))   \nonDismiss            | VoidCallback (Invoked when toast dismiss) \ntextDirection        | TextDirection (default TextDirection.ltr)  \ndismissOtherOnShow   | bool (default true)     \ntoastAnimation       | StyledToastAnimation (default StyledToastAnimation.fade)\nreverseAnimation     | StyledToastAnimation \nalignment            | AlignmentGeometry (default Alignment.center)\naxis                 | Axis (default Axis.vertical)\nstartOffset          | Offset\nendOffset            | Offset\nreverseStartOffset   | Offset\nreverseEndOffset     | Offset\ntextAlign            | TextAlign (default TextAlign.center)    \ncurve                | Curve (default Curves.linear)    \nreverseCurve         | Curve (default Curves.linear)\nfullWidth            | bool (default false)(Full width parameter that the width of the screen minus the width of the margin)\nisHideKeyboard       | bool (default false)(Is hide keyboard when toast show)\nanimationBuilder     | CustomAnimationBuilder (Builder method for custom animation)\nreverseAnimBuilder   | CustomAnimationBuilder (Builder method for custom reverse animation)\nisIgnoring           | bool (default true)(Is the input ignored for the toast)\nonInitState          | OnInitStateCallback (When toast widget [initState], this callback will be called)\n\n\n\n### showToastWidget param\n\nproperty             | description\n---------------------|----------------------------\nwidget               | Widget (Not Null)(required)\ncontext              | BuildContext (If you don't wrap app with StyledToast, context is required, otherwise, is not)\nduration             | Duration (default 2.3s)(When set [duration] to Duration.zero, toast won't dismiss automatically)\nanimDuration         | Duration (default 400 milliseconds, animDuration * 2  \u003c= duration, conditions must be met for toast to display properly)\nonDismiss            | VoidCallback (Invoked when toast dismiss) \ndismissOtherOnShow   | bool (default true)        \ntextDirection        | TextDirection (default TextDirection.ltr)\nposition             | StyledToastPosition (default )\nanimation            | StyledToastAnimation (default StyledToastAnimation.fade)\nreverseAnimation     | StyledToastAnimation \nalignment            | AlignmentGeometry (default Alignment.center)\naxis                 | Axis (default Axis.vertical)\nstartOffset          | Offset\nendOffset            | Offset\nreverseStartOffset   | Offset\nreverseEndOffset     | Offset\ncurve                | Curve (default Curves.linear)    \nreverseCurve         | Curve (default Curves.linear)\nisHideKeyboard       | bool (default false)(Is hide keyboard when toast show)\nanimationBuilder     | CustomAnimationBuilder (Builder method for custom animation)\nreverseAnimBuilder   | CustomAnimationBuilder (Builder method for custom reverse animation)\nisIgnoring           | bool (default true )(Is the input ignored for the toast)\nonInitState          | OnInitStateCallback (When toast widget [initState], this callback will be called)\n\n\n## Example\n[example](https://github.com/JackJonson/flutter_styled_toast/blob/master/example/lib/main.dart)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJackJonson%2Fflutter_styled_toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJackJonson%2Fflutter_styled_toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJackJonson%2Fflutter_styled_toast/lists"}