開源 | FLUI : Flutter 的組件擴展集

在使用 Flutter 的過程當中，老是不斷的在與組件打交道，雖然 Flutter 官方已經有極爲豐富的 Material Design 以及 iOS 風格的組件集合，但咱們也須要不斷的抽象，組合出一些新的基礎組件或業務組件，FLUI 就是在開發過程當中陸續抽象出來的，目的就是可以在下沉高質量組件的同時提高界面開發效率。

GitHub 地址: github.com/Rannie/flui

FLUI 官網: flui.xin

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

簡介

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 和組件的部分截圖，具體使用能夠參考文檔。

關於主題，因爲 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 ~

最後，也歡迎關注個人大前端公衆號: