[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9476":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":15,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":16,"rankGlobal":9,"rankLanguage":9,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":9,"pushedAt":9,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":15,"starSnapshotCount":15,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},9476,"flushbar","AndreHaueisen\u002Fflushbar","AndreHaueisen","Custom widget for Flutter",null,"Dart",1025,166,14,50,0,54.67,"Other",false,"master",true,[],"2026-06-12 04:00:44","# Flushbar\n\nUse this package if you need more customization when notifying your user. For Android developers, it is made to substitute\ntoasts and snackbars. IOS developers, I don't know what you use there, but you will like it.\n\nSee the [install instructions](https:\u002F\u002Fpub.dartlang.org\u002Fpackages\u002Fflushbar#-installing-tab-).\n\n## Quick reference\n\nSince customization requires a lot of properties, here is a quick cheatsheet:\n\nProperty | What does it do\n-------- | ---------------\ntitle    | The title displayed to the user\nmessage  | The message displayed to the user.\ntitleText | Replaces [title]. Although this accepts a [widget], **it is meant to receive [Text] or [RichText]**\nmessageText | Replaces [message]. Although this accepts a [widget], **it is meant to receive [Text] or  [RichText]**\nicon | You can use any widget here, but I recommend [Icon] or [Image] as indication of what kind of message you are displaying. Other widgets may break the layout\nshouldIconPulse | An option to animate the icon (if present). Defaults to true.\nmaxWidth | Used to limit Flushbar width (usually on large screens)\nmargin | Adds a custom margin to Flushbar\npadding | Adds a custom padding to Flushbar. The default follows material design guide line\nborderRadius | Adds a radius to all corners of Flushbar. Best combined with [margin]. I do not recommend using it with [showProgressIndicator] or [leftBarIndicatorColor]\nborderColor | Adds a border to every side of Flushbar. I do not recommend using it with [showProgressIndicator] or [leftBarIndicatorColor]\nborderWidth | Changes the width of the border if [borderColor] is specified\nbackgroundColor | Flushbar background color. Will be ignored if [backgroundGradient] is not null.\nleftBarIndicatorColor | If not null, shows a left vertical bar to better indicate the humor of the notification. It is not possible to use it with a [Form] and I do not recommend using it with [LinearProgressIndicator].\nboxShadows | The shadows generated by Flushbar. Leave it null if you don't want a shadow. You can use more than one if you feel the need. Check [this example](https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter\u002Fblob\u002Fmaster\u002Fpackages\u002Fflutter\u002Flib\u002Fsrc\u002Fmaterial\u002Fshadows.dart)\nbackgroundGradient | Flushbar background gradient. Makes [backgroundColor] be ignored.\nmainButton | Use if you need an action from the user. [FlatButton] is recommended here.\nonTap | A callback that registers the user's click anywhere. An alternative to [mainButton]\nduration | How long until Flushbar will hide itself (be dismissed). To make it indefinite, leave it null.\nisDismissible | Determines if the user can swipe or click the overlay (if [routeBlur] > 0) to dismiss. It is recommended that you set [duration] != null if this is false. If the user swipes to dismiss or clicks the overlay, no value will be returned.\ndismissDirection | FlushbarDismissDirection.VERTICAL by default. Can also be [FlushbarDismissDirection.HORIZONTAL] in which case both left and right dismiss are allowed.\nflushbarPosition | Flushbar can be based on [FlushbarPosition.TOP] or on [FlushbarPosition.BOTTOM] of your screen. [FlushbarPosition.BOTTOM] is the default.\nflushbarStyle | Flushbar can be floating or be grounded to the edge of the screen. If grounded, I do not recommend using [margin] or [borderRadius]. [FlushbarStyle.FLOATING] is the default\nforwardAnimationCurve | The [Curve] animation used when show() is called. [Curves.easeOut] is default.\nreverseAnimationCurve | The [Curve] animation used when dismiss() is called. [Curves.fastOutSlowIn] is default.\nanimationDuration | Use it to speed up or slow down the animation duration\nshowProgressIndicator | true if you want to show a [LinearProgressIndicator]. If [progressIndicatorController] is null, an infinite progress indicator will be shown\nprogressIndicatorController | An optional [AnimationController] when you want to control the progress of your [LinearProgressIndicator]. You are responsible for controlling the progress\nprogressIndicatorBackgroundColor | a [LinearProgressIndicator] configuration parameter.\nprogressIndicatorValueColor | a [LinearProgressIndicator] configuration parameter.\nbarBlur | Default is 0.0. If different than 0.0, blurs only Flushbar's background. To take effect, make sure your [backgroundColor] has some opacity. The greater the value, the greater the blur.\nblockBackgroundInteraction | Determines if user can interact with the screen behind it. If this is false, [routeBlur] and [routeColor] will be ignored\nrouteBlur | Default is 0.0. If different than 0.0, creates a blurred overlay that prevents the user from interacting with the screen. The greater the value, the greater the blur. It does not take effect if [blockBackgroundInteraction] is false\nrouteColor | Default is [Colors.transparent]. Only takes effect if [routeBlur] > 0.0. Make sure you use a color with transparency e.g. `Colors.grey[600].withOpacity(0.2)`. It does not take effect if [blockBackgroundInteraction] is false\nuserInputForm | A [TextFormField] in case you want a simple user input. Every other widget is ignored if this is not null.\nonStatusChanged | a callback for you to listen to the different Flushbar status\n\n#### Quick tip\n\nIf you use a lot of those properties, it makes sense to make a factory to help with  your Flushbar's base appearance.\nThings like shadows, padding, margins, text styles usually don't change within the app. Take a look at FlushbarHelper class and use it as an example.\n\n## We are on YouTube!\n\nWhile studying Flutter I stumbled on two amazing tutorials on how to use Flushbar.\nMake sure you show those guys some love.\n1. A beginners [tutorial](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=KNpxyyA8MDA) by **Matej Rešetár**\n2. A more [advanced usage](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=FRCvqkyeCzQ) by **Javier González Rodríguez**\n\n## Getting Started\n\nThe examples bellow were updated for version 1.3.0. Changes might have been made. See the [changelog](CHANGELOG.md) if any of the examples do not\nreflect Flushbar's current state.\n\n### The possibilities\n\n![Flushbar Animated](readme_resources\u002Fflushbar_animated.gif)\n\n### A basic Flushbar\n\nThe most basic Flushbar uses only a message. Failing to provide it before you call `show()` will result in a runtime error.\n`Duration`, if not provided, will create an infinite Flushbar, only dismissible by code, back button clicks, or a drag (case `isDismissible` is set to `true`).\n\n- Note that only `message` is a required parameter. All the other ones are optional\n\n```dart\nclass YourAwesomeApp extends StatelessWidget {\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'YourAwesomeApp',\n      home: Scaffold(\n        Container(\n          child: Center(\n            child: MaterialButton(\n              onPressed: (){\n                Flushbar(\n                  title:  \"Hey Ninja\",\n                  message:  \"Lorem Ipsum is simply dummy text of the printing and typesetting industry\",\n                  duration:  Duration(seconds: 3),              \n                )..show(context);\n              },\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}\n```\n\n![Basic Example](readme_resources\u002Fbasic_bar.png)\n\n### Lets get crazy Flushbar\n\nHere is how customized things can get.\n\n```dart\nFlushbar(\n      title: \"Hey Ninja\",\n      message: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry\",\n      flushbarPosition: FlushbarPosition.TOP,\n      flushbarStyle: FlushbarStyle.FLOATING,\n      reverseAnimationCurve: Curves.decelerate,\n      forwardAnimationCurve: Curves.elasticOut,\n      backgroundColor: Colors.red,\n      boxShadows: [BoxShadow(color: Colors.blue[800], offset: Offset(0.0, 2.0), blurRadius: 3.0)],\n      backgroundGradient: LinearGradient(colors: [Colors.blueGrey, Colors.black]),\n      isDismissible: false,\n      duration: Duration(seconds: 4),\n      icon: Icon(\n        Icons.check,\n        color: Colors.greenAccent,\n      ),\n      mainButton: FlatButton(\n        onPressed: () {},\n        child: Text(\n          \"CLAP\",\n          style: TextStyle(color: Colors.amber),\n        ),\n      ),\n      showProgressIndicator: true,\n      progressIndicatorBackgroundColor: Colors.blueGrey,\n      titleText: Text(\n        \"Hello Hero\",\n        style: TextStyle(\n            fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.yellow[600], fontFamily: \"ShadowsIntoLightTwo\"),\n      ),\n      messageText: Text(\n        \"You killed that giant monster in the city. Congratulations!\",\n        style: TextStyle(fontSize: 18.0, color: Colors.green, fontFamily: \"ShadowsIntoLightTwo\"),\n      ),\n    );\n```\n\n![Complete Example](readme_resources\u002Fcomplete_bar.png)\n\n- Don't forget to call `show()` or the bar will stay hidden.\n- To deactivate any of those properties, pass `null` to it.\n\n### Styles\nFlushbar can be either floating or grounded to the edge of the screen.\nI don't recommend using `margin` or `borderRadius` if you chose `FlushbarStyle.GROUNDED` style.\n\n```dart\nFlushbar(flushbarStyle: FlushbarStyle.FLOATING)\n```\nor\n```dart\nFlushbar(flushbarStyle: FlushbarStyle.GROUNDED)\n```\nFloating Style            |  Grounded Style\n:------------------------------------------------------:|:-------------------------------------------------------:\n![Floating Style](readme_resources\u002Ffloating_style.png)  |  ![Grounded Style](readme_resources\u002Fgrounded_style.png) \n\n### Padding and Border Radius\nYou can give it some padding and a border radius. Works best with `FlushbarStyle.FLOATING`\n\n```dart\nFlushbar(\n  margin: EdgeInsets.all(8),\n  borderRadius: 8,\n);\n  \n```\n![Padding and Radius](readme_resources\u002Fpadding_and_radius.png)\n\n### Left indicator bar\n\nFlushbar has a lateral bar to better convey the humor of the notification. To use it, simple give `leftBarIndicatorColor` a color.\n\n```dart\nFlushbar(\n  message: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry\",\n  icon: Icon(\n    Icons.info_outline,\n    size: 28.0,\n    color: Colors.blue[300],\n    ),\n  duration: Duration(seconds: 3),\n  leftBarIndicatorColor: Colors.blue[300],\n)..show(context);\n```\n\n![Left indicator example](readme_resources\u002Fleft_bar_indicator.png)\n\n### Customize your text\n\nIf you need a more fancy text, you can use [Text](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FText-class.html) or [RichText](https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Fwidgets\u002FRichText-class.html)\nand pass it to the `titleText` or `messageText` variables.\n\n- Note that `title` will be ignored if `titleText` is not `null`\n- Note that `message` will be ignored if `messageText` is not `null`\n\n```dart\nFlushbar(\n  title: \"Hey Ninja\", \u002F\u002Fignored since titleText != null\n  message: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry\", \u002F\u002Fignored since messageText != null\n  titleText: Text(\"Hello Hero\", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0 color: Colors.yellow[600], fontFamily:\"ShadowsIntoLightTwo\"),),\n  messageText: Text(\"You killed that giant monster in the city. Congratulations!\", style: TextStyle(fontSize: 16.0, color: Colors.green[fontFamily: \"ShadowsIntoLightTwo\"),),\n)..show(context);\n```\n\n![Customized Text](readme_resources\u002Ftext_bar.png)\n\n### Customize background and shadow\n\nYou can paint the background with any color you want. You can use any shadow you want.\nJust give it a `backgroundColor` and `boxShadows`.\n\n```dart\nFlushbar(\n  title: \"Hey Ninja\",\n  message: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry\",\n  backgroundColor: Colors.red,\n  boxShadows: [BoxShadow(color: Colors.red[800], offset: Offset(0.0, 2.0), blurRadius: 3.0,)],\n)..show(context);\n```\n\n![Background and Shadow](readme_resources\u002Fbackground_color_bar.png)\n\nWant a gradient in the background? No problem.\n\n- Note that `backgroundColor` will be ignored while `backgroundGradient` is not `null`\n\n```dart\nFlushbar(\n  title: \"Hey Ninja\",\n  message: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry\",\n  backgroundGradient: LinearGradient(colors: [Colors.blue, Colors.teal]),\n  backgroundColor: Colors.red,\n  boxShadows: [BoxShadow(color: Colors.blue[800], offset: Offset(0.0, 2.0), blurRadius: 3.0,)],\n)..show(context);\n```\n\n![Background Gradient](readme_resources\u002Fgradient_bar.png)\n\n### Icon and button action\n\nLet us put a Icon that has a `PulseAnimation`. Icons have this animation by default and cannot be changed as of now.\nAlso, let us put a button. Have you noticed that `show()` returns a `Future`?\nThis Future will yield a value when you call `dismiss([T result])`.\nI recommend that you specify the `result` generic type if you intend to collect an user input.\n\n```dart\nFlushbar flush;\nbool _wasButtonClicked;\n```\n\n```dart\n@override\n  Widget build(BuildContext context) {\n    return Container(\n      child: Center(\n        child: MaterialButton(\n          onPressed: () {\n            flush = Flushbar\u003Cbool>(\n              title: \"Hey Ninja\",\n              message: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry\",\n              icon: Icon(\n                       Icons.info_outline,\n                       color: Colors.blue,),\n              mainButton: FlatButton(\n                             onPressed: () {\n                                 flush.dismiss(true); \u002F\u002F result = true\n                               },\n                             child: Text(\n                               \"ADD\",\n                               style: TextStyle(color: Colors.amber),\n                             ),\n                           ),) \u002F\u002F \u003Cbool> is the type of the result passed to dismiss() and collected by show().then((result){})\n              ..show(context).then((result) {\n                setState(() { \u002F\u002F setState() is optional here\n                  _wasButtonClicked = result;\n                });\n              });\n          },\n        ),\n      ),\n    );\n  }\n```\n\n![Icon and Button](readme_resources\u002Ficon_and_button_bar.png)\n\n### Flushbar position\n\nFlushbar can be at `FlushbarPosition.BOTTOM` or `FlushbarPosition.TOP`.\n\n```dart\nFlushbar(\n  flushbarPosition: FlushbarPosition.TOP,\n  title: \"Hey Ninja\",\n  message: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry\",)..show(context);\n```\n\n![Bar position](readme_resources\u002Fposition_bar.png)\n\n### Duration and dismiss policy\n\nBy default, Flushbar is infinite. To set a duration, use the `duration` property.\nBy default, Flushbar is dismissible by the user. A right or left drag will dismiss it.\nSet `isDismissible` to `false` to change this behaviour.\n\n```dart\nFlushbar(\n  title: \"Hey Ninja\",\n  message: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry\",\n  duration: Duration(seconds: 3),\n  isDismissible: false,\n)..show(context);\n```\n\n### Progress Indicator\n\nIf you are loading something, use a [LinearProgressIndicator](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fmaterial\u002FLinearProgressIndicator-class.html)\nIf you want an undetermined progress indicator, do not set `progressIndicatorController`.\nIf you want a determined progress indicator, you now have full control over the progress since you own the `AnimationController`\n\n- There is no need to add a listener to your controller just to call `setState(){}`. Once you pass in your controller, `Flushbar` will do this automatically. Just make sure you call `_controller.forward()`\n\n```dart\n\nAnimationController _controller = AnimationController(\n      vsync: this,\n      duration: Duration(seconds: 3),\n    );\n\nFlushbar(\n  title: \"Hey Ninja\",\n  message: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry\",\n  showProgressIndicator: true,\n  progressIndicatorController: _controller,\n  progressIndicatorBackgroundColor: Colors.grey[800],\n)..show(context);\n```\n\n### Show and dismiss animation curves\n\nYou can set custom animation curves using `forwardAnimationCurve` and `reverseAnimationCurve`.\n\n```dart\nFlushbar(\n  forwardAnimationCurve: Curves.decelerate,\n  reverseAnimationCurve: Curves.easeOut,\n  title: \"Hey Ninja\",\n  message: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry\",\n)..show(context);\n```\n\n### Listen to status updates\n\nYou can listen to status update using the `onStatusChanged` property.\n\n- Note that when you pass a new listener using `onStatusChanged`, it will activate once immediately so you can check in what state the Flushbar is.\n\n```dart\n\nFlushbar flushbar = Flushbar(title: \"Hey Ninja\", message: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry\");\n\n  flushbar\n    ..onStatusChanged = (FlushbarStatus status) {\n      switch (status) {\n        case FlushbarStatus.SHOWING:\n          {\n            doSomething();\n            break;\n          }\n        case FlushbarStatus.IS_APPEARING:\n          {\n            doSomethingElse();\n            break;\n          }\n        case FlushbarStatus.IS_HIDING:\n          {\n            doSomethingElse();\n            break;\n          }\n        case FlushbarStatus.DISMISSED:\n          {\n            doSomethingElse();\n            break;\n          }\n      }\n    }\n    ..show(context);\n\n```\n\n### Input text\n\nSometimes we just want a simple user input. Use the property`userInputForm`.\n\n- Note that buttons, messages, and icons will be ignored if `userInputForm != null`\n- `dismiss(result)` will yield result. `dismiss()` will yield null.\n\n```dart\nFlushbar\u003CList\u003CString>> flush;\nfinal GlobalKey\u003CFormState> _formKey = GlobalKey\u003CFormState>();\n```\n\n```dart\nTextFormField getFormField(String text) {\n    return TextFormField(\n      initialValue: text,\n      style: TextStyle(color: Colors.white),\n      maxLength: 100,\n      maxLines: 1,\n      maxLengthEnforced: true,\n      decoration: InputDecoration(\n          fillColor: Colors.white10,\n          filled: true,\n          icon: Icon(\n            Icons.label,\n            color: Colors.grey[500],\n          ),\n          border: UnderlineInputBorder(),\n          helperText: \"Helper Text\",\n          helperStyle: TextStyle(color: Colors.grey),\n          labelText: \"Label Text\",\n          labelStyle: TextStyle(color: Colors.grey)),\n    );\n  }\n\nflush = Flushbar\u003CList\u003CString>>(\n  userInputForm = Form(\n          key: _formKey,\n          child: Column(\n            mainAxisSize: MainAxisSize.min,\n            children: [\n              getTextFormField(\"Initial Value\"),\n              getTextFormField(\"Initial Value Two\"),\n            ]\n            Align(\n              alignment: Alignment.bottomRight,\n              child: Padding(\n                padding: const EdgeInsets.only(top: 8.0),\n                child: MaterialButton(\n                  textColor: Colors.amberAccent,\n                  child: Text(\"SUBMIT\"),\n                  onPressed: () {\n                    flush.dismiss([_controller1.value.text, _controller2.value.text]);\n                  },\n                ),\n              ),\n            )\n          ],),),\n)..show(context).then((result) {\n        if (result != null) {\n          String userInput1 = result[0];\n          String userInput2 = result[1];\n        }\n      });\n```\n\nThis example tries to mimic the [Material Design style guide](https:\u002F\u002Fmaterial.io\u002Fdesign\u002Fcomponents\u002Ftext-fields.html#anatomy)\n\n![Bar input](readme_resources\u002Finput_bar.png)\n\n## Flushbar Helper\n\nI made a helper class to facilitate the creation of the most common Flushbars.\n\n```dart\nFlushbarHelper.createSuccess({message, title, duration});\nFlushbarHelper.createInformation({message, title, duration});\nFlushbarHelper.createError({message, title, duration});\nFlushbarHelper.createAction({message, title, duration flatButton});\nFlushbarHelper.createLoading({message,linearProgressIndicator, title, duration, progressIndicatorController, progressIndicatorBackgroundColor});\nFlushbarHelper.createInputFlushbar({textForm});\n```\n\n## Make it rain\n\n\u003Ca href=\"https:\u002F\u002Fwww.buymeacoffee.com\u002FAndreHaueisen\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fwww.buymeacoffee.com\u002Fassets\u002Fimg\u002Fcustom_images\u002Forange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" >\u003C\u002Fa>","Flushbar 是一个用于 Flutter 应用的自定义通知小部件，旨在为用户提供更丰富的通知定制选项。它支持多种核心功能，如自定义标题、消息、图标及动画效果等，并且可以设置背景颜色或渐变色、边框样式、阴影等视觉属性，以满足不同设计需求。此外，通过设定持续时间、是否可关闭等参数，开发者能够灵活控制其行为表现。适用于需要向用户展示信息提示（如警告、成功反馈等）的各种场景，特别是在寻求替代 Android 平台上的 Toast 和 Snackbar 时尤为适用。对于 iOS 开发者来说，尽管没有直接对应的概念，但 Flushbar 同样能提供一种优雅的信息传达方式。",2,"2026-06-11 03:23:01","top_language"]