Flutter设计系统插件mile_corp_design

Flutter 设计系统插件 `mile_corp_design_token` 的使用

在 Flutter 应用开发中，设计系统插件可以帮助开发者更方便地管理和应用统一的设计语言。本文将介绍如何使用 mile_corp_design_token 插件来实现这一目标。

安装插件

首先，在你的 pubspec.yaml 文件中添加 mile_corp_design_token 依赖：

dependencies:
  mile_corp_design_token: ^1.0.0

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

初始化插件

在你的 main.dart 文件中初始化 mile_corp_design_token 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mile Corp Design Token Demo',
      theme: ThemeData(
        primaryColor: MileCorpToken.color.primary,
        textTheme: TextTheme(
          bodyText1: TextStyle(color: MileCorpToken.color.text),
          headline1: TextStyle(fontSize: MileCorpToken.fontSize.h1),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

在这个示例中，我们从 mile_corp_design_token 中导入了颜色和字体大小相关的常量，并将其应用到主题中。

使用设计令牌

你可以在整个应用程序中使用这些设计令牌来保持一致性和可维护性。以下是一些常见的使用场景：

颜色

Container(
  color: MileCorpToken.color.background,
  child: Center(
    child: Text(
      'Hello World!',
      style: TextStyle(
        color: MileCorpToken.color.text,
      ),
    ),
  ),
)

在这个示例中，我们将背景颜色设置为 background，文本颜色设置为 text，这些都是通过设计令牌定义的颜色。

1. 添加依赖

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

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

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

2. 导入插件

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

import 'package:mile_corp_design_token/mile_corp_design_token.dart';

3. 使用设计令牌

mile_corp_design_token 插件通常会提供一系列的设计令牌（Design Tokens），例如颜色、字体、间距等。你可以直接在代码中使用这些令牌。

使用颜色

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: MileCorpColors.primary, // 使用设计令牌中的主色
        body: Center(
          child: Text(
            'Hello, Flutter!',
            style: TextStyle(
              color: MileCorpColors.textPrimary, // 使用设计令牌中的文本颜色
              fontSize: 24,
            ),
          ),
        ),
      ),
    );
  }
}

使用字体

Text(
  'Hello, Flutter!',
  style: MileCorpTextStyles.heading1, // 使用设计令牌中的标题1样式
);

使用间距

Container(
  margin: EdgeInsets.all(MileCorpSpacing.medium), // 使用设计令牌中的中等间距
  child: Text('Hello, Flutter!'),
);

Flutter设计系统插件mile_corp_design_token的使用