Flutter故事书展示插件storybook_flutter的使用

Storybook Flutter

Storybook Flutter是一个跨平台的故事书，用于展示Flutter小部件。它应该适用于所有Flutter支持的平台。

• 演示版本

Getting Started

以下是使用storybook_flutter的基本示例：

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) => Storybook(
        initialStory: 'Screens/Scaffold',
        stories: [
          Story(
            name: 'Screens/Scaffold',
            description: 'Story with scaffold and different knobs.',
            builder: (context) => Scaffold(
              appBar: AppBar(
                title: Text(
                  context.knobs.text(
                    label: 'Title',
                    initial: 'Scaffold',
                    description: 'The title of the app bar.',
                  ),
                ),
                elevation: context.knobs.nullable.slider(
                  label: 'AppBar elevation',
                  initial: 4,
                  min: 0,
                  max: 10,
                  description: 'Elevation of the app bar.',
                ),
                backgroundColor: context.knobs.nullable.options(
                  label: 'AppBar color',
                  initial: Colors.blue,
                  description: 'Background color of the app bar.',
                  options: const [
                    Option(
                      label: 'Blue',
                      value: Colors.blue,
                      description: 'Blue color',
                    ),
                    Option(
                      label: 'Green',
                      value: Colors.green,
                      description: 'Green color',
                    ),
                  ],
                ),
              ),
              body: SizedBox(
                width: double.infinity,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: List.generate(
                    context.knobs.sliderInt(
                      label: 'Items count',
                      initial: 2,
                      min: 1,
                      max: 5,
                      description: 'Number of items in the body container.',
                    ),
                    (_) => const Padding(
                      padding: EdgeInsets.all(8),
                      child: Text('Hello World!'),
                    ),
                  ),
                ),
              ),
              floatingActionButton: context.knobs.boolean(
                label: 'FAB',
                initial: true,
                description: 'Show FAB button',
              )
                  ? FloatingActionButton(
                      heroTag: 'FAB',
                      onPressed: () {},
                      child: const Icon(Icons.add),
                    )
                  : null,
            ),
          ),
          // 更多故事...
        ],
      );
}

Customization

默认情况下，每个故事会被包装在MaterialApp中。你可以通过提供wrapperBuilder来覆盖此行为。你可以使用默认的包装器（如materialWrapper或cupertinoWrapper），也可以提供完全自定义的包装器。在这种情况下，请确保使用包含故事的child小部件。

Plugins

几乎所有功能都是由插件提供的。甚至内容和旋钮也是插件（尽管它们是第一方插件）。目前插件文档还在待定中，但你可以查看现有的第一方插件：ContentsPlugin、DeviceFramePlugin、KnobsPlugin、ThemModePlugin。

Golden tests

你可以使用storybook_flutter_test包自动测试你的故事：

1. 将其添加到dev_dependencies中：

   dev_dependencies:
     storybook_flutter_test: any
   

2. 创建测试文件，例如storybook_test.dart。
3. 添加以下内容：

   void main() => testStorybook(
       storybook,
       layouts: [
         (
           device: Devices.ios.iPhone13,
           orientation: Orientation.portrait,
           isFrameVisible: true,
         ),
         (
           device: Devices.ios.iPadPro11Inches,
           orientation: Orientation.landscape,
           isFrameVisible: true,
         ),
         (
           device: Devices.android.samsungGalaxyA50,
           orientation: Orientation.portrait,
           isFrameVisible: true,
         ),
       ],
     );
   

4. 通过运行flutter test --update-goldens --tags=storybook生成黄金图像。

Features and bugs

请在issue tracker上提交功能请求和错误报告。