熟悉味道,FToast ✨ 特性 🛸 傳送區 🔩 基礎使用 🔆 副信息 🔳 圖標 🔩 自定義樣式 😃 如何使用? 更多精彩組件

FWidget 用心提供精緻的組件,助您構建精美的應用。

Toast 提示,是一個被作爲現代化應用程序必不可少的視覺元素。

今天,FWidget 就爲開發者們送上各位開發者熟悉而陌生的 Toast 組件。

✨ 特性

開發者,來看看這是你熟悉的 Toast 嗎?

  • 提供便捷的方式創建 Toast

  • 支持主信息、副信息,以及自定義它們的樣式

  • 支持靈活多變的圖標視圖

  • 支持配置邊角大小、背景色

  • 支持隊列展示

  • 支持自定義 Toast 樣式

🛸 傳送區

🛸 【傳送門:FToast Github 主頁】

📖 【傳送門:FToast 文檔】

🔩 基礎使用

熟悉的用法,但更勝以往

FToast.toast(
  context,

  /// 配置顯示時長
  ///
  /// Configure display duration
  duration: 800,

  /// 配置 Msg
  ///
  /// set Msg
  msg: "I'm FToast: ${count++}",

  /// 配置 Msg 樣式
  ///
  /// set Msg style
  msgStyle: TextStyle(color: Colors.white),
)

在最簡單的情況下,要創建一個 Toast 元素,就像以往一樣簡單。

FToast.toast(context, msg: "Hi, FWidget");

當然,在 FToast 中,開發者可以很輕鬆的通過 msgStyle 屬性配置文案樣式。

甚至,FToastFlutter 中,實現了隊列展示的能力,這和 Android 中的 Toast 具有一致的表現。

🔆 副信息

更多的提示

FToast.toast(
  context,
  msg: "This is Msg",

  /// 配置 subMsg
  ///
  /// set subMsg
  subMsg: "Welcome to use FToast. This is subMsg!",

  /// 配置 SubMsg 樣式
  ///
  /// set SubMsg style
  subMsgStyle: TextStyle(color: Colors.white, fontSize: 13),
)

FToast 不同於以往的 ToastFToast 支持了副文案的配置。鑑於此,開發者可以展示更多的提示信息。

🔳 圖標

更精美

FToast.toast(
  context,
  msg: "This is Msg",
  subMsg: "Welcome to use FToast. This is subMsg!",

  /// 配置圖標
  ///
  /// set image
  image: Icon(
    Icons.star,
    color: Colors.yellow,
  ),

  /// 配置圖標相對文本的位置
  ///
  /// set position of icon relative to text
  imageDirection: up,
)

FToast 允許開發者配置一個裝飾圖標,而且支持控制其相對位置。追求精美FWidget不是隨便說說。

🔩 自定義樣式

無限制,綻放創意

FToast.toast(
  context,
  /// 自定義 Toast 樣式
  /// 
  /// Custom Toast style
  toast: FSuper(
    text: "Custom Toast",
    style: TextStyle(color: Colors.grey),
    padding: EdgeInsets.all(12),
    shadowColor: Colors.yellow,
    shadowBlur: 80,
  ),
)

如果預設樣式的 Toast 仍然不能滿足開發者的天馬行空,沒關係,FToast 支持開發者自定義任何樣式的 Toast

開發者只需關心樣式,其餘的處理,就放心交給 FToast 處理。

想要了解更多詳細內容?請訪問 FToast 官方主頁 (PS:別忘了投出一個你認可的 Star 哦 😘)。

😃 如何使用?

在項目 pubspec.yaml 文件中添加依賴:

🌐 pub 依賴方式

dependencies:
  ftoast: ^<版本號>

⚠️ 注意,請到 pub 獲取 FToast 最新版本號

🖥 git 依賴方式

dependencies:
  ftoast:
    git:
      url: '[email protected]:Fliggy-Mobile/ftoast.git'
      ref: '<分支號 或 tag>'

⚠️ 注意,分支號 或 tag 請以 FToast 官方項目爲準。

感覺還不錯?請到 《FToast》的 Github 主頁投出您認可的一個 Star 🌟 吧!

更多精彩組件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章