yii.
← Writing
Flutter 技術 · · 4 min read

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

這篇寫於 2023 年。工具和 API 變化很快，部分步驟可能已經不適用。

維護專案品質的好物

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

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

Package#

widgetbook | Flutter PackageA flutter storybook that helps professionals and teams to catalogue their widgets.pub.dev

Doc#

WidgetbookWidgetbook is a flutter package which helps developers cataloguing their widgets, testing them quickly on multiple…docs.widgetbook.io

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#

GitHub - chyiiiiiiiiiiii/widget_book_example_appWidgetbook can manage useful widgets for projects and be the showcase place. I don’t like to use widgetbook_annotation…github.com

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 選項進行生成
  • 使用上沒有真的方便很多

關於我#

贊助#

謝謝你花費時間看完，非常感謝！

如果覺得文章不錯的話可以贊助，讓我有更多動力和熱情分享學習紀錄和生活！請我喝一杯咖啡吧～

https://www.buymeacoffee.com/yiichenhi

最後#

希望有幫助到你/妳，歡迎追蹤我，方便瀏覽最新的文章～

本文原刊登於 Medium。