Sitemap
Flutter Formosa

Flutter lovers make Chinese community strong.

學會運用 Flutter Widgetbook，該管好自己和公司的元件庫了！

--

維護專案品質的好物

當我們專案越來越大時，為了讓每個畫面的元素都能夠重複使用，自定義的元件一定是非常多，我們如何在不是開發的環境下去瀏覽和測試這些元件，讓設計人員也能確認是否符合他的想法，這個時候需要像 Widgetbook 這類的輔助工具。

公司內可能有多個專案，很多核心元件會經常使用，而我們通常也會自訂屬於品牌的風格，需要統一每個專案的元件。工程師在開發前就能先打開 Widgetbook，快速查詢到指定元件，有需要再進行優化，也降低重工的機率，很好地維護專案品質。

Package

Doc

Installation

pubspec.yaml

dev_dependencies:
 ...
  widgetbook: <latest-version>

Setup

Widgetbook 本身是獨立的應用，可以同時執行專案 APP 以及 Widgetbook App，所以我們需要在根目錄新增相關檔案 main.dart、widgetbook.dart

首先 Widgetbook 會需要自己的主程式執行檔，運行我們自定義的 Widget 入口

void main(List<String> args) {
  runApp(const WidgetbookHotReload());
}

接著創建這本書要顯示的內容，可以使用一個 StatelessWidget，一開始外層用 Widgetbook 元件包裹，然後所有內容都在它底下設置，提供一些基礎設定

  • appInfo → 書本名稱，給予專案名稱，在管理多個專案時可以幫助識別
  • themes → 給予自定義主題
  • localizationsDelegates、supportedLocales → 設置多語系
  • devices → 設置可以切換的設備，預設有提供 Apple 和 Samsung 類，其中包含許多型號，或是可以自定義設備的尺寸
class WidgetbookHotReload extends StatelessWidget {
  const WidgetbookHotReload({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Widgetbook(
      appInfo: AppInfo(name: 'Widgetbook Example'),
      categories: const [],
      themes: const [],
    );
  }
}

WidgetbookCategory 分類

  • name → 名稱
  • folders → 可以包含子文件夾(WidgetbookFolder)
  • widgets → 包含子元件(WidgetbookComponent)
  • isExpanded → 是否預設要展開

WidgetbookFolder 資料夾

  • folders → 可以包含子文件夾(WidgetbookFolder)

WidgetbookComponent 元件

  • useCases → 針對這個元件可以設置幾個情境

WidgetbookUseCase 情節

  • builder → 返回 Widget

Knob 可調整選項

使用 context.knobs 設置選項，包含輸入框、開關、Slider等，會在介面的側邊欄顯示

  • label → 選項標題
  • description → 說明和解說文字，讓使用者清楚了解這個選項的意義

Run

  • Terminal command line
flutter run -t widgetbook/main.dart
  • VSCode - launch.json

Demo

Source Code

Codegen 生成 Widgetbook 代碼

  • widgetbook_annotation
  • widgetbook_generator
  • build_runner
dependencies:
 ...
  widgetbook_annotation: <latest-version>

dev_dependencies:
 ...
  widgetbook: <latest-version>
  widgetbook_generator: <latest-version>
 build_runner: <latest-version>

Weakness

  • 文件不夠完整
  • 因為是 functional widget，所以無法設置 knob 選項進行生成
  • 使用上沒有真的方便很多
Flutter Formosa
Flutter Formosa

Published in Flutter Formosa

Flutter lovers make Chinese community strong.

Yii Chen
Yii Chen

Written by Yii Chen

Believe what you believe | Organizer FlutterTaipei | Author, Speaker | wanna make Flutter strong in Chinese community.

No responses yet