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

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

开始使用

请检查示例在站点。

您需要在pubspec.yaml文件中添加以下依赖项以下载该依赖项：

dependencies:
  flutter:
    sdk: flutter
  storybook: 0.0.2

  // 文件路径
  assets:
    - lib/
    - lib/story/menu_principal/
    - lib/story/menu_secundario/

使用方法

首先，导入 storybook 包：

import 'package:storybook/storybook.dart';

接下来，在应用的入口处使用 storyBookHome 函数来初始化故事书。以下是一个完整的示例代码：

import 'dart:html';

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

// 假设这些组件是从其他地方导入的
import 'menu_principal/card_error.dart';
import 'menu_principal/card_sucess.dart';
import 'menu_principal/button_win.dart';
import 'menu_secundario/button_file.dart';

void main() {
  runApp(storyBookHome(
      logo: Container(
        child: Text(
          'Storybook',
          style: TextStyle(color: Colors.black, fontSize: 20),
        ),
      ),
      listThemeData: [
        {'Theme': ThemeData()},
        {'Theme dark': ThemeData.dark()}
      ],
      listStoryBookModel: [
        storyCardSucess(), // 成功卡片组件
        storyCarError(),   // 错误卡片组件
        storyButtonWin(),  // 成功按钮组件
        storyButtonFile()  // 文件按钮组件
      ]));
}

更多关于Flutter故事书展示插件storybook的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter故事书展示插件storybook的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 的 Storybook 插件是一个用于在开发过程中快速展示和测试 UI 组件的工具。它允许开发者以可视化的方式查看和交互不同的组件状态，从而简化开发和调试过程。

1. 安装 flutter_storybook 插件

首先，你需要在 pubspec.yaml 文件中添加 flutter_storybook 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_storybook: ^1.0.0  # 检查最新的版本号

然后运行 flutter pub get 来安装依赖。

2. 创建 Storybook 应用

接下来，你可以在你的 Flutter 项目中创建一个 Storybook 应用。通常，你会将 Storybook 集成到你的 main.dart 文件中。

import 'package:flutter/material.dart';
import 'package:flutter_storybook/flutter_storybook.dart';
import 'stories/my_widget_story.dart'; // 导入你的组件故事

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StorybookApp(
      stories: [
        MyWidgetStory(), // 添加你的故事
      ],
    );
  }
}

3. 创建组件故事

在 stories 文件夹中创建一个文件来定义你的组件故事。例如，my_widget_story.dart：

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

class MyWidgetStory extends Story {
  @override
  List<StoryItem> get storyItems => [
        StoryItem(
          title: 'Default MyWidget',
          builder: (context) => MyWidget(), // 你的组件
        ),
        StoryItem(
          title: 'MyWidget with Text',
          builder: (context) => MyWidget(text: 'Hello, Storybook!'),
        ),
      ];
}

class MyWidget extends StatelessWidget {
  final String text;

  MyWidget({this.text = 'Default Text'});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(text),
    );
  }
}

在这个例子中，MyWidgetStory 类定义了两个故事项，分别展示了 MyWidget 的两种不同状态。

4. 运行 Storybook

现在你可以运行你的 Flutter 应用，Storybook 将会展示你在 storyItems 中定义的所有组件状态。

flutter run
回到顶部