搜尋套件、儲存庫與 APP 分類

cherry_toast 封面
套件詳情v1.13.0

cherry_toast

一種在 Flutter 中顯示 Toast 的新方法,設計優雅且帶有動畫效果

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
4340
喜歡數
259
Pub 分數
150

安裝套件

flutter pub add cherry_toast

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

Cherry Toast 是一個 Flutter 套件,提供現代且視覺上吸引人的方式來顯示 Toast,具有平滑動畫和可自訂設計。專為尋求優雅替代標準 Flutter Toast 的開發者而打造,它透過微妙但時尚的反饋提升使用者體驗。此套件支援多個平台,包括 Android、iOS、Web、macOS、Windows 和 Linux,確保在不同裝置上行為一致。憑藉直覺式 API 和對美學的重視,Cherry Toast 簡化了在 Flutter 應用中整合美觀通知的過程。

適用情境

  • 在操作後顯示使用者反饋
  • 顯示成功或錯誤訊息
  • 透過動畫通知增強使用者介面
  • 提供輕量級狀態更新
  • 透過視覺魅力提升應用質感

主要特色

  • 優雅且現代的設計
  • 平滑動畫
  • 跨平台支援
  • 可自定外觀
  • 簡單 API 結合
  • 支援多種類型的提示

適合對象

  • Flutter 開發者優先考慮 UI 美學
  • 需要完善用戶反饋的應用程式
  • 致力於現代通知樣式的項目
  • 想要容易使用的吐司解決方案的開發者
  • 專注於使用者體驗提升的團隊

使用建議

  • 可能需要額外的樣式以支援深色模式
  • 與功能齊全的通知系統相比,自訂選項有限
  • 依賴外部動畫庫
  • 不適合複雜的通知工作流程
  • 最適合簡單、簡短的訊息

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

Cherry Toast


A new way to display toasts in Flutter in an elegant design and animations

info_cherry_toast.gif error_cherry_toast.gif bottom_cherry_toast.gif
warning_cherry_toast.gif success_cherry_toast.gif right_layout_cherry_toast.gif

Cherry Toast

  • Support all platforms
  • Top and Bottom display position
  • Customizable background color
  • Support RTL layout rendering (for arabic text)
  • Multiple built-in themes
  • Built-in animations
  • Support null safety
  • Elegant design
  • Full customizable
  • Heartbeat animation on icons
  • Customizable icon size and color and display
  • Dismissable notification
  • Customizable toast constraints, height and width

Installation

To add cherry toast to your project add this line to your pubspec.yaml file

dependencies:
  cherry_toast: ^1.13.0

Parameters

/// Text widget displayed as a title in the toast
  /// required parameter for all toast types
  final Text? title;

  /// Text widget displayed as a description in the toast
  final Text? description;

  /// The action button displayed below description
  final Text? action;

  /// The toast icon, it's required when using the default constructor
  late IconData icon;

  /// The Icon color
  /// this parameter is only available on the default constructor
  /// for the built-in themes the color  will be set automatically
  late Color iconColor;

  /// Background color of container
  final Color backgroundColor;

  /// Box shadow color of container
  final Color shadowColor;

  /// Custom widget displayed at the place of the predefined icons
  final Widget? iconWidget;

  /// The icon size
  /// this parameter is available in default constructor
  late double iconSize;

  /// The toast display postion, possible values
  /// ```dart
  /// {
  /// top,
  /// bottom
  /// }
  /// ```
  final Position toastPosition;

  /// The color that will be applied on the circle behind the icon
  /// for better rendering the action button must have the same color
  late Color themeColor;

  /// The function invoked when clicking on the action button
  final Function? actionHandler;

  /// The duration of the animation by default it's 1.5 seconds
  final Duration animationDuration;

  /// The animation curve by default it's set to `Curves.ease`.
  final Cubic animationCurve;

  /// The animation type applied on the toast
  /// ```dart
  /// {
  /// fromTop,
  /// fromLeft,
  /// fromRight
  /// }
  /// ```
  final AnimationType animationType;

  /// Indicates whether the toast will be hidden automatically or not.
  final bool autoDismiss;

  /// The duration of the toast if [autoDismiss] is true
  final Duration toastDuration;

  /// The layout of the toast
  /// ```dart
  /// {
  /// ltr,
  /// rtl
  /// }
  /// ```
  final TextDirection textDirection;

  /// Display / Hide the close button icon
  final bool displayCloseButton;

  /// Define the border radius applied on the toast
  final double borderRadius;

  /// Define whether the icon will be  rendered or not
  final bool displayIcon;

  /// Define wether the animation on the icon will be rendered or not
  final bool enableIconAnimation;

  /// The attribute  is declaring a final variable named "width" of type double with a nullable value.
  /// width attribute define the toast width
  final double? width;

  /// The attribute is declaring a final variable named "height" of type double with a nullable type
  /// modifier.
  /// height attribute define the toast height
  final double? height;

  /// Enable taost constraints customization (by default it's null)
  final BoxConstraints? constraints;

  /// Indicate whether the toast animation is enabled or not
  /// by default the toast animation is enabled
  final bool disableToastAnimation;

  /// Indicate toast should inherit theme colors sheme, to apply in background
  /// and shadow color.
  final bool inheritThemeColors;

  /// Callback invoked when toast get dismissed (closed by button or dismissed automtically)
  final Function()? onToastClosed;

  /// Horizontal alignment display of the toast content
  final CrossAxisAlignment horizontalAlignment;

  /// The space rendered between the title and description widgets.
  final double titleDescriptionMargin;

  /// The space rendered between the description and actions widgets.
  final double descriptionActionMargin;

Usage

  • Simple cherry toast with only title

CherryToast.success(

title:  Text("The simplest cherry toast", style: TextStyle(color: Colors.black))

).show(context);



  • Simple cherry toast with action button

CherryToast.info(

title:  Text("User added", style: TextStyle(color: Colors.black)),

action: Text("Display information", style: TextStyle(color: Colors.black)),

actionHandler: (){

print("Action button pressed");

},

).show(context);




A new way to display toasts in Flutter in an elegant design and animations

  • Toast with description without title

CherryToast.warning(

description:  Text("All information may be deleted after this action", style: TextStyle(color: Colors.black)),

animationType:  AnimationType.fromLeft,

action:  Text("Backup data", style: TextStyle(color: Colors.black)),

actionHandler: (){

print("Hello World!!");

},

).show(context);



  • Toast with nothing but description with different animation type and auto dismiss

CherryToast.error(

description:  Text("Invalid account information", style: TextStyle(color: Colors.black)),

animationType:  AnimationType.fromRight,

animationDuration:  Duration(milliseconds:  1000),

autoDismiss:  true

).show(context);



  • Bottom displayed cherry toast

CherryToast(

icon:  Icons.alarm_add,

themeColor:  Colors.pink,

description:  Text("A bottom cherry toast example", style:  TextStyle(color:  Colors.black)),

toastPosition:  Position.bottom,

animationDuration:  Duration(milliseconds:  1000),

autoDismiss:  true

).show(context);


  • Right layout rendered cherry toast

CherryToast(

icon:  Icons.car_repair,

themeColor:  Colors.green,

description: const Text("هذا مثال تصميم من اليمين",  style:  TextStyle(color:  Colors.black)),

toastPosition:  Position.bottom,

layout:  ToastLayout.rtl,

animationType:  AnimationType.fromRight,

action: const Text("انقر هنا", style:  TextStyle(color:  Colors.green)),


animationDuration: const Duration(milliseconds:  1000),

autoDismiss:  true)

.show(context);



Contribution

Of course the project is open source, and you can contribute to it repository link

  • If you found a bug, open an issue.

  • If you have a feature request, open an issue.

  • If you want to contribute, submit a pull request.

Contributors

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。