Flutter で storybook 的なことができる storybook_flutter と Widgetbook の比較検討

Flutter Advent Calendar 2022 の13日です！

qiita.com

Flutter で storybook 的なことができるライブラリで有名なのだと monarch, storybook_flutter, Widgetbook がある。

今回は web に公開できるやつを選びたい。デザイナーやPdMに見てもらったりが簡単にできるし、macos App として提供するのは大変そなので。そうすると storybook_flutter, Widgetbook の2択となる。

web は hot reload ではなく hot refresh となるため、基本的に macos app として開発中は利用し、web は deploy 時に確認するだけの運用となる。

最初に結論

~~Widgetbook を利用することにした。検索ができるので。~~
go_router 3などが使われていてダメだった。 storybook_flutter を使うことにしました。

比較検討

storybook_flutter

pub.dev

見た目はこんな感じ

シンプル。シンプルでとても良い
デメリットとして検索機能がない
- Widget が増えた時に探すのが大変そう。
検索機能に関しては最近PRが出たみたいだけどレビューされてない。
- github.com

こんな感じでかく。シンプルで直感的。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) => Storybook(
        initialStory: 'Screens/MyHomePage',
        plugins: _plugins,
        stories: [
          Story(
            name: 'Screens/MyHomePage',
            description: 'Demo Counter app with about dialog.',
            builder: (context) => MyHomePage(
              title: context.knobs.text(label: 'Title', initial: 'Counter'),
            ),
          ),
          Story(
            name: 'Widgets/Text',
            description: 'Simple text widget.',
            builder: (context) => const Center(child: Text('Simple text')),
          ),
        ],
      );
}

Widgetbook

www.widgetbook.io

見た目はこんな感じ

多機能で色々できる
ドキュメントを真面目に読む必要がある
検索がある！
go_router ver 3 などが使われておりダメだった
手元で作ってるやつを deploy してみた
- https://fluffy-heliotrope-831977.netlify.app/#/
なんか Widgetbook cloud という有料機能があるっぽい
- OSS版を無料で使うこともできるので、無料で利用する
- 有料版があるなら今後もサポートちゃんとされていくかも?
以下の階層構造を経る必要がり、若干だるい。まあこれくらいならいいか
- Widgetbook
  - WidgetbookCategory
    - WidgetbookComponent
Widgetbook 作成自動化もできるが、production コードに Widgetbook に関する情報が入ったり、階層構造の名前が固定化されてしまう
- lib/compoments/button/button.dart というディレクトリだと use cases > components > button > button みたいな構造になってしまいイマイチだったので自動化は使わないようにした

コードはこんな感じになる。ちょっとごちゃごちゃしますね。

class WidgetbookHotReload extends StatelessWidget {
  const WidgetbookHotReload({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Widgetbook.material(
        categories: [
          WidgetbookCategory(
            name: 'components',
            widgets: [
              WidgetbookComponent(
                name: 'button',
                useCases: [
                  WidgetbookUseCase(
                    name: 'button',
                    builder: (context) {
                      return Button(
                        buttonTitle: context.knobs
                            .text(label: "title", initialValue: "title"),
                      );
                    },
                  ),
                ],
              ),
            ],
          ),
        ],
        appInfo: AppInfo(name: 'hoge'),
        themes: [
          WidgetbookTheme(
            name: 'Light',
            data: ThemeData.light(),
          ),
        ],
  }
}