Dashbook

Dashbook 是一个 Flutter 的 UI 开发工具，它作为一个项目的组件开发环境，也是应用中常见组件的展示平台，它很大程度上受到了 Storybook 库的启发，因此对于已经使用过 Storybook 的人来说，使用 Dashbook 会非常容易。

它目前同时支持移动端和 Web 端，拥有友好的布局，旨在在 Web 端和宽分辨率上良好运行。

如何使用

将依赖项添加到您的 pubspec.yaml

dashbook: ^0.1.0

一个 Dashbook 实例包含应用组件（Stories）及其变体（Chapters）的集合。这里您可以看到一个非常简单的使用示例。

import 'package:flutter/material.dart';

import 'package:dashbook/dashbook.dart';

void main() {
  final dashbook = Dashbook();

  // Adds the Text widget stories
  dashbook
      .storiesOf('Text')
      // Decorators are easy ways to apply a common layout to all of the story chapters, here are using onde of Dashbook's decorators,
      // which will center all the widgets on the center of the screen
      .decorator(CenterDecorator())
      // The Widget story can have as many chapters as needed
      .add('default', (ctx) {
        return Container(width: 300, child: Text(
          ctx.textProperty("text", "Text Example"),
          textAlign: ctx.listProperty(
              "text align",
              TextAlign.center,
              TextAlign.values,
          ),
          textDirection: ctx.listProperty(
              "text direction",
              TextDirection.rtl,
              TextDirection.values,
          ),
          style: TextStyle(
              fontWeight: ctx.listProperty(
                  "font weight",
                  FontWeight.normal,
                  FontWeight.values,
              ),
              fontStyle: ctx.listProperty(
                  "font style",
                  FontStyle.normal,
                  FontStyle.values,
              ),
              fontSize: ctx.numberProperty("font size", 20)),
        ));
      });

  dashbook
      .storiesOf('RaisedButton')
      .decorator(CenterDecorator())
      .add('default', (ctx) => RaisedButton(child: Text('Ok'), onPressed: () {}));

  // Since dashbook is a widget itself, you can just call runApp passing it as a parameter
  runApp(dashbook);
}

预览区域

默认情况下，Dashbook 会为预览提供整个屏幕区域，这意味着它的控件图标会浮动在示例上方。

通过在 Dashbook 构造函数中使用 usePreviewSafeArea 参数可以改变这种行为。当将此参数设置为 true 时，Dashbook 将确保其图标不会浮动在示例上方，从而为示例预览创建一个安全区域。

管理主题

Dashbook 提供了三种方式让您在查看 Stories 时更改主题。Dashbook 本身就是为了使用提供的主题来样式化其自己的 UI 而构建的，因此无论提供什么主题，Dashbook 的 UI 都会很好地显示。

单一主题

使用 Dashbook 的默认构造函数，通过可选的 theme 参数来设置主题。

final dashbook = Dashbook(theme: ThemeData());

双主题

当您的应用有两个主题时，可以使用 dualTheme 构造函数。可以提供两个参数 light 和 dark 来设置哪个 ThemeData 代表亮色主题，哪个代表暗色主题，另外一个参数 initWithLight 可以用来告诉 Dashbook 最初应该使用哪个主题（默认为 true）。

使用此功能时，Dashbook 将显示一个图标，供用户在亮色和暗色主题之间切换。

final dashbook = Dashbook.dualTheme(
  light: YourLightTheme(),
  dark: YourDarkTheme(),
);

多主题

当应用拥有两个以上主题时，可以使用 multiTheme 构造函数。它接收一个 themes 参数，这是一个 Map<String, ThemeData>，以及一个可选的 initialTheme 参数来告知最初应使用哪个主题（默认为地图的第一个条目）。

使用此功能时，Dashbook 将显示一个图标，该图标会弹出一个带有下拉菜单的模态框，使用户能够选择已提供的主题。

final dashbook = Dashbook.multiTheme(
  themes: {
    'theme1': Theme1(),
    'theme2': Theme2(),
    'theme3': Theme3(),
  }
);

示例

dashbook

结构

Dashbook 只是一个 widget，因此可以按照任何想要的方式运行它，因为没有强制要求遵循的结构，尽管如此，我们还是推荐以下方法。

  • 在项目的根源目录下创建一个名为 main_dashbook.dart 的文件（例如 lib/main_dashbook.dart）。
  • 在该文件中创建 Dashbook 实例，最后调用 runApp 方法（请参见上面的示例）。
  • 使用命令 flutter run -t lib/main_dashbook.dart 运行它。