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

維護專案品質的好物

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

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

Package

widgetbook | Flutter Package

Doc

Widgetbook

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_app

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 輕鬆實作 i18n，使用 easy_localization_generator 就對了
• Flutter CICD 使用 Gitlab Runner 和 App Center 實作 part.1
• 使用 CodeMagic 和 Firebase 實現 Flutter CICD
• 輕鬆完成Flutter開發環境，最新版！
• 實作Flutter多變有趣的滾動效果CustomScrollView！
• 如何在Flutter使用 Makefile 節省你的時間？
• Easily understand StatefulWidget LifeCycle of Flutter
• “freezed” makes model class strong and easily
• 提高Flutter性能的小技巧！(一)
• 提高Flutter性能的小技巧！(二)
• 提高Flutter性能的小技巧！(三)
• What are Async and Isolates in Flutter?
• LoadBalancer is optimization for Isolates in Flutter
• Riverpod 輕鬆學，原來這麼好用！
• Riverpod 輕鬆學(二)，一些進階用法！

關於我

• GitHub： chyiiiiiiiiiiii
• Instagram： flutterluvr.yii
• Linkedin： yiichenhi
• Youtube： Yii
• Youtube： 一起饅頭(美食頻道)
• Email： ab20803@gmail.com

贊助

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

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

https://www.buymeacoffee.com/yiichenhi

最後

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