Flutter代码生成插件storybook_dart_generator的使用

storybook_dart_generator 的使用 #

简介

storybook_dart_generator 是一个用于 Flutter 的代码生成插件。它可以帮助开发者自动生成 Storybook 文件，以便于进行组件的可视化开发和文档编写。

安装

在 pubspec.yaml 文件中添加依赖：

dev_dependencies:
  storybook_dart_generator: ^1.0.0

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

使用

1. 创建故事书文件

首先，你需要创建一个 Dart 文件来定义你的组件。例如，我们有一个简单的按钮组件 MyButton.dart：

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

class MyButton extends StatelessWidget {
  final String label;

  MyButton({required this.label});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: Text(label),
    );
  }
}

2. 配置故事书生成器

接下来，在项目根目录下创建一个配置文件 storybook_config.dart，并指定要生成的故事书文件路径：

// storybook_config.dart
import 'package:storybook_dart_generator/storybook_dart_generator.dart';

final storyConfig = StoryConfig(
  stories: [
    Story(
      name: 'My Button',
      component: MyButton,
      props: {
        'label': 'Hello World',
      },
    ),
  ],
);

3. 生成故事书文件

在终端中运行以下命令来生成故事书文件：

flutter packages pub run storybook_dart_generator:generate --config=storybook_config.dart

4. 查看生成的文件

生成的故事书文件将保存在 lib/stories 目录下。你可以查看这些文件，并确保它们正确地包含了你定义的组件及其属性。

示例代码

以下是完整的示例代码：

MyButton.dart

import 'package:flutter/material.dart';

class MyButton extends StatelessWidget {
  final String label;

  MyButton({required this.label});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: Text(label),
    );
  }
}

storybook_config.dart

import 'package:storybook_dart_generator/storybook_dart_generator.dart';

final storyConfig = StoryConfig(
  stories: [
    Story(
      name: 'My Button',
      component: MyButton,
      props: {
        'label': 'Hello World',
      },
    ),
  ],
);

运行生成脚本

flutter packages pub run storybook_dart_generator:generate --config=storybook_config.dart

通过以上步骤，你可以成功使用 storybook_dart_generator 插件来自动生成 Flutter 组件的故事书文件。


更多关于Flutter代码生成插件storybook_dart_generator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter代码生成插件storybook_dart_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


storybook_dart_generator 是一个用于 Flutter 的代码生成插件，它可以帮助你自动生成 Storybook 的 Dart 代码。Storybook 是一个用于 UI 组件开发和测试的工具，它允许你独立地开发和展示组件，而无需将组件嵌入到应用程序中。

安装和使用步骤

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 storybook_dart_generator 和 build_runner 依赖。

dependencies:
  storybook_dart: ^1.0.0  # 或者其他最新版本

dev_dependencies:
  build_runner: ^2.1.0
  storybook_dart_generator: ^1.0.0  # 或者其他最新版本

2. 创建 Storybook 文件

在你的项目中创建一个 stories 目录，并在其中创建一个 .storybook.dart 文件。例如，lib/stories/button_story.dart。

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

[@StorybookComponent](/user/StorybookComponent)(
  title: 'Button',
  description: 'A customizable button component.',
)
class ButtonStory extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: Text('Click Me'),
    );
  }
}

3. 生成代码

运行以下命令来生成 Storybook 代码：

flutter pub run build_runner build

这将会生成一个 .storybook.g.dart 文件，其中包含 Storybook 的配置和组件。

4. 使用生成的代码

在你的应用程序中，你可以使用生成的 Storybook 代码来展示组件。例如，你可以在 main.dart 中使用它：

import 'package:flutter/material.dart';
import 'package:storybook_dart/storybook_dart.dart';
import 'stories/button_story.storybook.g.dart'; // 引入生成的代码

void main() {
  runApp(StorybookApp(
    stories: [
      ButtonStory(),
    ],
  ));
}

高级用法

自定义 Storybook 配置

你可以在生成的代码中自定义 Storybook 的配置，例如主题、插件等。

void main() {
  runApp(StorybookApp(
    stories: [
      ButtonStory(),
    ],
    theme: ThemeData.light(),
    darkTheme: ThemeData.dark(),
    initialRoute: '/button',
  ));
}

多组件支持

你可以在 stories 目录中创建多个 .storybook.dart 文件，每个文件对应一个组件。生成的代码会自动包含所有组件。

[@StorybookComponent](/user/StorybookComponent)(
  title: 'Card',
  description: 'A customizable card component.',
)
class CardStory extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Text('This is a card'),
      ),
    );
  }
}

动态参数

你可以使用 [@StorybookArg](/user/StorybookArg) 注解来为组件添加动态参数。

[@StorybookComponent](/user/StorybookComponent)(
  title: 'Button',
  description: 'A customizable button component.',
)
class ButtonStory extends StatelessWidget {
  [@StorybookArg](/user/StorybookArg)(
    name: 'text',
    defaultValue: 'Click Me',
  )
  final String text;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: Text(text),
    );
  }
}
回到顶部