Storybook_flutter如何使用

最近在尝试使用Storybook_flutter来管理Flutter组件的展示，但在配置过程中遇到了一些问题。想请教一下大家：

  1. 如何在项目中正确安装和初始化Storybook_flutter？有没有详细的步骤说明？
  2. Storybook_flutter是否能支持动态主题切换，比如暗黑模式和明亮模式的切换？
  3. 在Storybook中如何组织多个组件，使其分类清晰、便于查找？
  4. 是否支持与Hot Reload结合使用，方便开发时实时预览组件修改？

如果有实际使用经验的朋友，希望能分享一下最佳实践或者常见的坑点，谢谢！

2 回复

Storybook_flutter用于Flutter组件开发。安装依赖后，在main.dart中配置组件和故事，运行应用即可预览和测试组件。

更多关于Storybook_flutter如何使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Storybook for Flutter 是一个开发工具，用于独立构建、测试和展示 Flutter 组件。以下是基本使用方法：

1. 安装依赖

在 pubspec.yaml 中添加依赖：

dev_dependencies:
  storybook_flutter: ^1.0.0  # 检查最新版本

运行 flutter pub get。

2. 创建故事

在 lib 目录下创建 stories 文件夹，添加故事文件（如 button_stories.dart）：

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

final List<Story> buttonStories = [
  Story(
    name: 'Primary Button',
    builder: (context) => ElevatedButton(
      onPressed: () {},
      child: const Text('Primary Button'),
    ),
  ),
  Story(
    name: 'Outlined Button',
    builder: (context) => OutlinedButton(
      onPressed: () {},
      child: const Text('Outlined Button'),
    ),
  ),
];

3. 配置主文件

修改 main.dart：

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

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

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

  @override
  Widget build(BuildContext context) {
    return Storybook(
      stories: [
        ...buttonStories,
        // 添加其他故事列表
      ],
    );
  }
}

4. 运行和查看

执行 flutter run，应用启动后会显示 Storybook 界面，左侧菜单可切换不同组件故事。

高级功能

  • 插件支持：添加 Knobs 动态调整组件属性（如颜色、文本）。
  • 主题切换：通过包装 MaterialApp 支持亮/暗主题测试。
  • 自定义装饰：用 Wrapper 包装故事，添加统一边距或背景。

提示

  • 在开发阶段使用，生产环境需移除 Storybook 依赖。
  • 结合 CI/CD 可自动生成组件文档。

通过以上步骤，可快速搭建组件库，提升开发效率。

回到顶部