FlutterでWidgetbookを使ってみる

はじめに

こんにちは、エンジニアのkeitaMaxです。

前回の記事

Widgetbookというツールを使ってみようと思います。
どうやらNextjsでいうところのStorybookのようなものらしいです。

Widgetbookとは

Widgetbookは、ウィジェットと画面を個別に構築するためのサンドボックスです。アプリ全体を実行することなく、アクセスが困難な状態やエッジケースを開発・共有できます。Widgetbookはオープンソースで、無料でご利用いただけます。
(引用：https://docs.widgetbook.io/index)

StorybookのようにUIカタログを作成できたり、UIのテストもできるようなツールのようです。

インストール

以下のコマンドでインストールします。

flutter pub add widgetbook widgetbook_annotation dev:widgetbook_generator dev:build_runner

すると↓のように色々ファイルが修正・作成されます。

実装

lib/widgetbook.dartファイルを作成してcounter.dartファイルを見えるようにします。

lib/widgetbook.dart

import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';

import 'screens/counter/counter.dart';

void main() {
  runApp(const WidgetbookHotReload());
}

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

  @override
  Widget build(BuildContext context) {
    return Widgetbook.material(
      directories: [
        WidgetbookCategory(
          name: 'Screens',
          children: [
            WidgetbookComponent(
              name: 'CounterScreen',
              useCases: [
                WidgetbookUseCase(
                  name: 'Default',
                  builder: (context) => const CounterScreen(),
                ),
              ],
            ),
          ],
        ),
      ],
      addons: [
        ThemeAddon(
          themes: [
            WidgetbookTheme(
              name: 'Light',
              data: ThemeData(
                colorScheme: ColorScheme.fromSeed(
                  seedColor: const Color(0xFF464544),
                ),
                useMaterial3: true,
              ),
            ),
          ],
          themeBuilder: (context, theme, child) =>
              Theme(data: theme, child: child),
        ),
      ],
    );
  }
}

このような感じで実装をします。

起動

以下のコマンドで起動することができます。

flutter run -t lib/widgetbook.dart -d chrome 

Chromeが起動し、以下のような画面がみえるようになるはずです。

CounterScreenを押すと以下のように作成したカウンター画面が表示されます。

TOP画面を追加

TOP画面を見えるようにするには、lib/widgetbook.dartファイルに以下を追加します。

WidgetbookComponent(
  name: 'TopScreen',
  useCases: [
    WidgetbookUseCase(
      name: 'Default',
      builder: (context) => const TopScreen(),
    ),
  ],
),

これで再起動すると以下のようにTopScreenが追加されます。

lib/widgetbook.dartファイルは以下のようになっています。

lib/widgetbook.dart

import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';

import 'screens/counter/counter.dart';
import 'screens/top/top.dart';

void main() {
  runApp(const WidgetbookHotReload());
}

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

  @override
  Widget build(BuildContext context) {
    return Widgetbook.material(
      directories: [
        WidgetbookCategory(
          name: 'Screens',
          children: [
            WidgetbookComponent(
              name: 'CounterScreen',
              useCases: [
                WidgetbookUseCase(
                  name: 'Default',
                  builder: (context) => const CounterScreen(),
                ),
              ],
            ),
            WidgetbookComponent(
              name: 'TopScreen',
              useCases: [
                WidgetbookUseCase(
                  name: 'Default',
                  builder: (context) => const TopScreen(),
                ),
              ],
            ),
          ],
        ),
      ],
      addons: [
        ThemeAddon(
          themes: [
            WidgetbookTheme(
              name: 'Light',
              data: ThemeData(
                colorScheme: ColorScheme.fromSeed(
                  seedColor: const Color(0xFF464544),
                ),
                useMaterial3: true,
              ),
            ),
          ],
          themeBuilder: (context, theme, child) =>
              Theme(data: theme, child: child),
        ),
      ],
    );
  }
}

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考

次の記事