flutter_design

flutter_design 包含帮助您使用明确定义的框架和代码生成/CLI 工具链来启动您的设计系统的软件包。它还包含一个强大的设计系统查看器，让您可视化和与您的设计系统进行交互。

查看演示 查看Github

演示

查看使用示例代码生成的查看器应用程序 https://flutter-design-7b479.web.app/。

功能

项目的主要目标如下：

  • 提供创建设计系统的工具以及记录/可视化它的简单工作流程
    • 提供构建系统的指导方针/类
    • 提供代码生成器以减少样板代码
    • 提供用于加速和组织小部件的CLI（待定）
  • 提供具有以下核心功能的功能强大的设计查看器
    • 跨平台：在Web/桌面/移动设备上可视化
    • 完整的设计文档系统
    • 类似书籍的结构和完全集成的搜索（目前仅支持内存搜索，界面灵感来自 https://www.algolia.com/ref/docsearch/）
    • 在多个同步帧中可视化UX（用户交互，如滚动、点击、拖动会传播）
      • 不同的设备框架
      • 不同的主题框架
      • 不同的区域设置框架
    • 运行时数据配置：您可以轻松地在运行时“试用”不同的数据，例如颜色、值，甚至是小部件！也可以创建自己的数据生成器。

UX和设计灵感来自Wanda Design System。

基本集成

首先，在您的代码库（您将实现设计系统/小部件的地方）中，您需要将以下依赖项添加到您的 pubspec.yaml 中

dependencies:
  #...
  flutter_design:

dev_dependencies:
  #...
  build_runner:
  flutter_design_codegen:

然后，您需要使用 @design 注解来注释您想要集成到设计系统查看器中的小部件。是的，就这么简单！

@design
class SpecialWidget extends StatelessWidget {
  ...
}

运行 flutter packages pub run build_runner build --delete-conflicting-outputs 后，将生成目录

  • /lib/**/*.design.dart：为部分文件生成的组件页面。
  • lib/page_factory.design.dart：这包含聚合的 generatedComponentPages，可以直接传递给稍后描述的 DesignSystemViewerApp。

最后，您可以创建一个 Flutter 设计器应用程序（目前支持 Android、iOS、Web、macOS、Windows）来托管设计系统查看器，方法是将以下依赖项添加到 pubspec.yaml

dependencies:
  #...
  your_package:
  flutter_design:
  flutter_design_viewer:

然后，您基本上需要使用 generatedComponentPages 以及您可能想要配置的其他一些设置来设置设计系统查看器。

  • enabledLocales：您的设计系统支持的区域设置。
  • enabledThemes：您的设计系统支持的 ThemeData。

您还可以通过创建静态或动态内容来定制页面。有关更多信息，请查看文档。

setPathUrlStrategy(); // Recommended to make history browsing work better in web
runApp(
    DesignSystemViewerApp(
      settings: ViewerSettings(
        enabledLocales: {
          'en-US': const Locale('en', 'US'),
        },
        enabledThemes: {
          'light': ThemeData.light(),
          'dark': ThemeData.dark(),
        },
      ),
      pageGroups: buildComponentPageTree(componentPages: generatedComponentPages),
    ),
);

就是这样！然后您就可以在任何支持的平台上运行您的设计器应用程序了。您可以在下方查看一些屏幕截图，或者直接查看演示应用程序:P