一个帮助开发者整理他们的部件，快速在多种设备和主题上测试它们，并且轻松与设计师和客户分享的Flutter包。 灵感来源于Storybook.js。

功能 #

• 💙 专为Flutter设计。易于使用。
• 🦄 开源。
• 🍭 功能丰富。可以在不同的设备、主题、语言和地区文本缩放等条件下测试您的部件。
• ⚙️ 可定制。可以根据您的需求轻松添加额外的设置。
• 🔧 维护。由德国的一家快速增长的Flutter创业公司维护。
• 👩🏼‍💻 支持。通过我们的Discord社区。

Widgetbook可以做更多的事情！

• 📙 目录现有的部件。永远不再重复开发部件。
• 📦 独立开发。无需考虑业务逻辑。
• 🎛 旋钮。通过定义可自定义的旋钮来定义团队如何与部件交互。
• ⚡️ 热重载。快速找到并修复错误。

Widgetbook Cloud #

为了简化专业团队的审查过程，我们提供了协作平台Widgetbook Cloud

• 🌍 共享您的部件。与设计师、产品经理、客户等分享。
• 📃 简化审查。通过我们的引导流程简化审查。
• ⛓ Figma集成。将您的部件连接到Figma中的设计对应物。

现在获取访问权限！ ➡️

文档 #

参见docs.widgetbook.io了解文档和示例。

完整示例Demo

以下是一个简单的示例，展示了如何使用sherkety_widgetbook（实际名称为widgetbook）来展示和测试Flutter部件。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  widgetbook_annotation: ^0.1.0
  widgetbook_core: ^0.1.0
  widgetbook_runner: ^0.1.0

2. 创建部件

创建一个简单的Flutter部件：

// lib/my_widget.dart
import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  final String title;

  const MyWidget({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(title, style: TextStyle(color: Colors.white)),
    );
  }
}

3. 使用Widgetbook

创建一个Widgetbook配置文件，以展示和测试部件：

// lib/main.dart
import 'package:flutter/material.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
import 'my_widget.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WidgetbookMaterialApp(
      apps: [
        AppDefinition(
          name: 'My App',
          appBuilder: (context) => MaterialApp(
            home: Scaffold(
              appBar: AppBar(title: Text('Widgetbook Demo')),
              body: Center(child: MyWidget(title: 'Hello, Widgetbook!')),
            ),
          ),
        ),
      ],
      builders: [
        // 可以在这里添加更多构建器
      ],
      useCaseProviders: [
        UseCaseProvider(
          name: 'MyWidget',
          useCases: [
            UseCase(
              name: 'Default',
              builder: (context) => MyWidget(
                title: 'Hello, Widgetbook!',
              ),
            ),
          ],
        ),
      ],
    );
  }
}

4. 运行应用

运行应用后，你可以在浏览器中查看Widgetbook界面，并在不同设备和主题下测试你的部件。

flutter run