Flutter设计系统插件design_system_weincode的使用

插件design_system_weincode概述

我们决定使用原子设计方法论来实现我们的设计系统。其创造者Brad Frost解释说，我们必须将数字体验划分为以下元素：

原子（Atoms）

原子是无法再分割的基本组件。例如按钮、输入框、标题标签h1，或者在Flutter中的基本元素（如IconButton）。

分子（Molecules）

分子是由多个原子组成的功能性单元，但它们不承担多重职责。例如，卡片内的图标、文本和按钮组合在一起形成一个模块化分子。

组织体（Organisms）

组织体由多个分子和原子组成。这些元素可以有不同的职责并触发多个事件。例如页眉、导航栏、滑块等。

模板（Templates）

模板定义了元素的排列顺序和配置。

页面（Pages）

页面是展示给最终用户的不同屏幕。

Token（令牌）

我们仍然面临一个问题：如何在整个项目中统一颜色、阴影、动画、字体和图标？

我们决定将所有这些元素放在一个称为Token的层中。这些是原子的基础。

优势在于，如果更改某个标记的颜色、字体、阴影或动画，所有相关元素都会自动更新为新值。

基础

没有任何组件应该直接依赖于Token；记住，它的定义不应该绑定到任何具体的内容。因此，我们在基础层中建立了Token与小部件定义之间的桥梁。

插件design_system_weincode特性

Tokens

  • colors.dart
  • shadows.dart
  • sizes.dart
  • spacing.dart
  • typography.dart

基础（Foundations）

  • colors.dart
  • sizes.dart
  • spacing.dart
  • themes/weincode_themes.dart
  • typo.dart

原子（Atoms）

  • weincode_asset_image.dart
  • weincode_image.dart
  • weincode_separeted.dart

分子（Molecules）

  • card_tile.dart
  • circle_accionable_card.dart

组织体（Organisms）

  • list_of_cards.dart

模板（Templates）

  • models/showinfo.dart
  • show_component_template.dart
  • show_info_template.dart

页面（Pages）

  • success_trx.dart

开始使用插件design_system_weincode

首先，在pubspec.yaml文件中添加依赖项：

dependencies:
  design_system_weincode: ^版本号

然后运行以下命令以获取依赖项：

flutter pub get

使用示例

安装库后，您可以使用其中的组件。以下是一个简单的例子：

import 'package:design_system_weincode/design_system_weincode.dart';

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 使用原子组件
          const WeincodeAssetImage(
            path: 'assets/images/atoms.png',
            widthImage: 100,
          ),
          SizedBox(height: 20), // 使用间距组件
          Text(
            "这是一个示例文本",
            style: TextStyle(fontSize: 18), // 使用字体样式
          ),
          SizedBox(height: 20),
          // 使用分子组件
          CardTile(
            title: "卡片标题",
            subtitle: "卡片副标题",
            onTap: () {
              print("卡片被点击");
            },
          ),
        ],
      ),
    );
  }
}

更多关于Flutter设计系统插件design_system_weincode的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter设计系统插件design_system_weincode的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


design_system_weincode 是一个用于 Flutter 的设计系统插件，旨在帮助开发者快速构建一致且美观的用户界面。它通常包含一组预定义的组件、样式和工具，以便在应用程序中保持设计的一致性。

以下是如何使用 design_system_weincode 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 design_system_weincode 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  design_system_weincode: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 design_system_weincode 插件。

import 'package:design_system_weincode/design_system_weincode.dart';

3. 使用设计系统组件

design_system_weincode 插件通常会提供一系列预定义的组件，如按钮、文本、卡片等。你可以直接在代码中使用这些组件。

例如，使用一个预定义的按钮：

WeinButton(
  onPressed: () {
    // 处理按钮点击事件
  },
  text: 'Click Me',
);

4. 使用设计系统样式

设计系统通常还包含预定义的样式，如颜色、字体、间距等。你可以使用这些样式来保持应用程序的一致性。

例如，使用预定义的颜色：

Text(
  'Hello, World!',
  style: TextStyle(
    color: WeinColors.primary,
    fontSize: WeinFontSizes.large,
  ),
);

5. 自定义设计系统

如果你需要自定义设计系统，通常可以通过扩展或覆盖默认的样式和组件来实现。具体方法取决于插件的实现方式。

例如，自定义主题：

MaterialApp(
  theme: ThemeData(
    primaryColor: WeinColors.primary,
    accentColor: WeinColors.secondary,
    fontFamily: WeinFonts.primary,
  ),
  home: MyHomePage(),
);

6. 运行应用程序

完成上述步骤后，你可以运行你的 Flutter 应用程序，并查看设计系统插件带来的效果。

flutter run

7. 参考文档

为了更深入地了解 design_system_weincode 插件的功能和用法，建议查阅插件的官方文档或示例代码。通常，插件的文档会提供详细的 API 说明和使用示例。

示例代码

以下是一个简单的示例，展示了如何使用 design_system_weincode 插件构建一个基本的用户界面：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: WeinColors.primary,
        accentColor: WeinColors.secondary,
        fontFamily: WeinFonts.primary,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Design System Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              WeinButton(
                onPressed: () {
                  print('Button Pressed');
                },
                text: 'Click Me',
              ),
              SizedBox(height: WeinSpacing.medium),
              Text(
                'Hello, World!',
                style: TextStyle(
                  color: WeinColors.primary,
                  fontSize: WeinFontSizes.large,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部