開源 | FLUI : Flutter 的元件擴充套件集

Rann發表於2019-12-18

poster

在使用 Flutter 的過程中,總是不斷的在與元件打交道,雖然 Flutter 官方已經有極為豐富的 Material Design 以及 iOS 風格的元件集合,但我們也需要不斷的抽象,組合出一些新的基礎元件或業務元件,FLUI 就是在開發過程中陸續抽象出來的,目的就是能夠在下沉高質量元件的同時提升介面開發效率。

GitHub 地址: github.com/Rannie/flui

FLUI 官網: flui.xin

也可以直接下載 Demo APK 體驗: www.flui.xin/app/flui.ap…

簡介

arch

FLUI 的元件是在 Flutter 框架上進行的擴充套件,目前已經有 15 個類別並且在不斷增加。

每個元件幾乎都是獨立的(少數有相互依賴),引入時可以直接 import 'package:flui.dart' 也可以 import 'package:flui/widgets/avatar.dart',編譯打包時 tree-shaking 會接管依賴的優化流程。

未來 FLUI 也會加入一些業務元件,比如圖表,圖片選擇器等等,關於元件的動態化配置和渲染也在探索中。

相容性上,框架會一直基於 Flutter Stable Channel 開發。目前支援 v1.7.8+hotfix.1 及以上版本,不過很快會更新到 v1.12 +

安裝使用:

# Add dependency in pubspec.yaml
flui: ^0.7.4

# Install
$ flutter pub get

# Use FLUI now
import 'package:flui/flui.dart'
複製程式碼

元件

下面為 Demo 和元件的部分截圖,具體使用可以參考文件。

widgets

關於主題,由於 Flutter 本身對主題的支援(配置,切換等)已經足夠強大,所以 FLUI 設計的初衷就是無風格化的元件,儘可能的從元件樹中讀取 ThemeData,另外大部分元件也是支援對顏色,樣式進行設定的。

FLUI 裡大部分元件的選擇都是基於一致性,根據使用者在各個平臺的使用習慣遷移過來,這裡也參考了很多其他平臺上成熟的 UI 框架比如 Antd, QMUI, Vant 等等,由於 Flutter 未來面向的平臺眾多,所以能做的元件還是一個比較大的體量。

FLUI 還有另外一個目標就是提供互動反饋,比如支援顯示 loading 的按鈕,toast,支援伸縮和 shimmer 動畫的骨架屏,支援點選效果的 ListTile 等等,這樣使用者可以清晰地感知到自己的操作,也能很好的標明當前頁面的狀態。

關於 Flutter

Flutter 官方在上週的 Flutter Interact 上剛剛釋出了新的穩定版 1.12, Flutter Web 和 Desktop 也進一步增強,1.13 IDE 已經可以直接執行除錯 MacOS 應用了。但目前還是有很多的問題,比如 Repo 裡 5000+ 的 issue 涉及到從開發到釋出的各個環節,Flutter 本身更新節奏也很快,有的時候周邊配套工具鏈的相容性並不是很好,新的 Flutter 版本在帶來新特性的同時也難免引入一些新的問題。另外雖然 Skia 是一個跨平臺的渲染引擎,不過其實底層也會做很多相容性的處理或者出現不同平臺表現不一致的問題。

積極的是 Flutter 的關注度和發展依舊很快,有很多開發者在完善著社群,比如閒魚團隊在混合開發和效率工具上做了很多開源。 FLUI 也希望能跟著社群一起不斷完善,歡迎使用和提 PR ~

最後,也歡迎關注我的大前端公眾號:

wechat

相關文章