Flutter故事书创建插件easy_storybook的使用

Flutter故事书创建插件easy_storybook的使用

在本篇文档中，我们将详细介绍如何使用 easy_storybook 插件来创建和管理 Flutter 应用的故事书。通过该插件，开发者可以方便地管理和预览组件，提高开发效率。

安装与配置

首先，你需要将 easy_storybook 添加到你的项目依赖中。在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  easy_storybook: ^版本号

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

基础设置

为了开始使用 easy_storybook，我们需要进行一些基础设置。这包括初始化共享偏好设置和远程数据源等。

import 'package:easy_storybook/easy_storybook.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化本地数据库
  final sharedPreferences = await SharedPreferences.getInstance();

  // 初始化远程数据源
  final mockApiResponse = await AppMockApi.shared.loadApiResponseJson();
  final dio = Dio(BaseOptions(baseUrl: MockAdapter.mockBase))
    ..httpClientAdapter = MockAdapter(mockApiResponse);

  // 注册单例对象
  injector.registerSingleton<Dio>(dio);
  injector.registerSingleton<SharedPreferences>(sharedPreferences);

  // 启动应用
  runApp(
    MaterialAppStorybook(
      sharedPreferences: sharedPreferences,
      storybookScreen: const HotreloadWidgetbook(),
      verifyPreviewCode: VerifyPreviewCode(
        apiEndpoint: 'https://tech.fighttech.vn',
        apiKey: 'prjectdname@api@r0',
        projectId: 'prjectdname',
        version: '1',
      ),
    ),
  );
}

创建故事书

接下来，我们创建一个基本的故事书页面。这个页面会展示不同的组件，并允许用户预览它们。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

使用故事书

在上面的代码中，我们定义了一个简单的 MyHomePage 组件，它包含一个计数器。我们可以使用 MaterialAppStorybook 包裹我们的应用，并指定 storybookScreen 为 HotreloadWidgetbook，这样就可以使用故事书功能。

runApp(
  MaterialAppStorybook(
    sharedPreferences: sharedPreferences,
    storybookScreen: const HotreloadWidgetbook(),
    verifyPreviewCode: VerifyPreviewCode(
      apiEndpoint: 'https://tech.fighttech.vn',
      apiKey: 'prjectdname@api@r0',
      projectId: 'prjectdname',
      version: '1',
    ),
  ),
);

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

1 回复

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


easy_storybook 是一个用于在 Flutter 应用中快速创建和展示组件故事的插件。它可以帮助开发者在开发过程中更方便地管理和展示 UI 组件，特别适合在团队协作中使用。以下是如何使用 easy_storybook 插件的详细步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  easy_storybook: ^latest_version

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

2. 创建故事书

在你的 Flutter 项目中，创建一个新的文件来存放故事书，例如 storybook.dart。

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

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

class MyStorybookApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Storyboard(
        children: [
          Story(
            title: 'Button Story',
            description: '展示不同类型的按钮',
            builder: (context) => ButtonStory(),
          ),
          Story(
            title: 'Text Story',
            description: '展示不同类型的文本',
            builder: (context) => TextStory(),
          ),
        ],
      ),
    );
  }
}

class ButtonStory extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () {},
          child: Text('Elevated Button'),
        ),
        TextButton(
          onPressed: () {},
          child: Text('Text Button'),
        ),
        OutlinedButton(
          onPressed: () {},
          child: Text('Outlined Button'),
        ),
      ],
    );
  }
}

class TextStory extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('This is a normal text'),
        Text(
          'This is a bold text',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        Text(
          'This is a colored text',
          style: TextStyle(color: Colors.red),
        ),
      ],
    );
  }
}

3. 运行故事书

在终端中运行 flutter run，你的应用将会启动并显示故事书界面。你可以在故事书中选择不同的故事来查看相应的 UI 组件。

4. 添加更多故事

你可以继续在 Storyboard 中添加更多的 Story 来展示其他组件。每个 Story 都有一个 title、description 和一个 builder 函数，用于构建组件。

5. 自定义故事书

easy_storybook 提供了多种自定义选项，你可以根据自己的需求调整故事书的外观和行为。例如，你可以设置主题、添加导航栏等。

6. 发布与分享

当你完成了故事书的创建，你可以将其分享给团队成员，或者将其作为项目的一部分进行发布。这样，团队成员可以方便地查看和测试各个 UI 组件。

示例代码

以下是一个完整的示例代码：

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

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

class MyStorybookApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Storyboard(
        children: [
          Story(
            title: 'Button Story',
            description: '展示不同类型的按钮',
            builder: (context) => ButtonStory(),
          ),
          Story(
            title: 'Text Story',
            description: '展示不同类型的文本',
            builder: (context) => TextStory(),
          ),
        ],
      ),
    );
  }
}

class ButtonStory extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () {},
          child: Text('Elevated Button'),
        ),
        TextButton(
          onPressed: () {},
          child: Text('Text Button'),
        ),
        OutlinedButton(
          onPressed: () {},
          child: Text('Outlined Button'),
        ),
      ],
    );
  }
}

class TextStory extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('This is a normal text'),
        Text(
          'This is a bold text',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        Text(
          'This is a colored text',
          style: TextStyle(color: Colors.red),
        ),
      ],
    );
  }
}
回到顶部