Flutter故事书工具集成插件 storybook_toolkit 的使用

storybook_toolkit 是一个强大的 Flutter 插件，用于展示和测试你的所有小部件。它支持所有由 Flutter 支持的平台，并提供了丰富的功能来帮助开发者更好地开发、调试和测试组件。

主要特性

• 展示所有组件
• 在独立的工作空间中开发小部件、组件和屏幕
• 使用 device_frame_plus 包模拟多个设备框架
• 使用 Knobs 更新自定义变量
• 切换多语言支持
• 调整文本缩放比例
• 切换自动、深色和浅色主题
• 生成组件的黄金测试
• 通过插件添加更多功能

快速开始

首先，在 pubspec.yaml 中添加 storybook_toolkit 依赖：

dependencies:
  storybook_toolkit: ^latest_version

然后在你的应用中配置 Storybook：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Storybook(
        stories: [
          Story(
            name: 'Screens/Counter',
            description: 'Demo Counter app with about dialog.',
            builder: (context) => CounterPage(
              title: context.knobs.text(label: 'Title', initial: 'Counter'),
              enabled: context.knobs.boolean(label: 'Enabled', initial: true),
            ),
          ),
          Story(
            name: 'Widgets/Text',
            description: 'Simple text widget.',
            builder: (context) => const Center(child: Text('Simple text')),
          ),
        ],
      );
}

完整示例 Demo

以下是一个更完整的示例，展示了如何集成 storybook_toolkit 并使用其多种功能：

import 'package:flutter/material.dart';
import 'package:flutter_web_plugins/url_strategy.dart';
import 'package:storybook_toolkit/storybook_toolkit.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
  usePathUrlStrategy();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) => Storybook(
        canvasColor: Colors.white,
        initialStory: 'Home',
        plugins: initializePlugins(
          enableCodeView: false,
          initialDeviceFrameData: (
            isFrameVisible: true,
            device: Devices.ios.iPhone12ProMax,
            orientation: Orientation.portrait
          ),
          enableDirectionality: false,
          enableTimeDilation: false,
          enableTextSizer: true,
          localizationData: LocalizationData(
            supportedLocales: {
              "Czech": Locale('cs', 'CZ'),
              "English": Locale('en', 'US'),
            },
            delegates: AppLocalizations.localizationsDelegates,
            currentLocale: AppLocalizations.supportedLocales.first,
            onChangeLocale: (locale) {
              print("Locale was changed to: $locale");
            }
          ),
        ),
        routeWrapperBuilder: RouteWrapperBuilder(title: 'Storybook'),
        stories: [
          Story(
            name: 'Screens/Scaffold',
            builder: (context) => const ScaffoldPage(),
          ),
          Story(
            name: 'Screens/Counter',
            description: 'Counter app with dialog.',
            builder: (context) => const CounterPage(),
          ),
          Story(
            name: 'Widgets/Text',
            description: 'Simple text widget.',
            builder: (context) => const Center(child: Text('Simple text')),
          ),
          Story(
            name: 'Story/Nested/Multiple/Times/First',
            builder: (context) => const Center(child: Text('First')),
          ),
          Story(
            name: 'Story/Nested/Multiple/Times/Second',
            builder: (context) => const Center(child: Text('Second')),
          ),
          Story(
            name: 'Story/Nested/Multiple/Third',
            builder: (context) => const Center(child: Text('Third')),
          ),
          Story(
            name: 'Story/Nested/Multiple/Fourth',
            builder: (context) => const Center(child: Text('Fourth')),
          ),
          Story(
            name: 'Story without a category',
            description: 'Story with a longer description example.',
            builder: (context) => const Center(child: Text('Simple text')),
          ),
        ],
      );
}

插件支持

storybook_toolkit 提供了多种插件来增强其功能：

• ContentsPlugin: 管理故事内容
• DeviceFramePlugin: 模拟设备框架
• KnobsPlugin: 动态调整组件属性
• ThemeModePlugin: 切换主题模式
• CodeViewPlugin: 查看组件代码
• TextSizerPlugin: 调整文本大小
• TimeDilationPlugin: 控制时间流速
• DirectionalityPlugin: 切换文本方向
• LocalizationPlugin: 切换语言

黄金测试

你可以使用 storybook_toolkit_tester 包为你的组件生成黄金测试。以下是步骤：

1. 在 pubspec.yaml 中添加依赖：

dev_dependencies:
  storybook_toolkit_tester: ^1.2.0 

1. 创建测试文件，例如 storybook_test.dart：

void main() => testStorybook(
  storybook,
  devices: { Devices.ios.iPhoneSE, Devices.android.pixel4, Devices.ios.iPadAir4 },
  filterStories: (Story story) {
    final skipStories = [];
    return !skipStories.contains(story.name);
  },
);

final storybook = Storybook(
  stories: [
    Story(
      name: 'Button',
      builder: (context) => ElevatedButton(
        onPressed: () {},
        child: const Text('Button'),
      ),
    ),
    Story(
      name: 'CounterPage',
      builder: (context) => const CounterPage(),
    ),
  ],
);

1. 运行以下命令生成黄金图像：

flutter test --update-goldens --tags=storybook

通过这些步骤，你可以在开发过程中轻松地管理和测试你的 Flutter 组件。希望这个指南对你有所帮助！如果你有任何问题或建议，请随时联系维护者或贡献代码。