Flutter设计系统组件插件true_design_system_component的使用

New App Architecture

flowchart LR
AA(True Design System)
style AA fill:#fefefe,stroke:#aaa,stroke-width:4px,color:#000
AA --> A
AA --> B
AA --> C
AA --> D
AA --> E
A(Core App)
B(Package) -- Flutter package 0.1.0 --> F
C(Payment) -- Flutter package 0.1.0--> F
D(Reward) -- Flutter package 0.1.0--> F
E(Non-Telco) -- Flutter package 0.1.0--> F
A -- Flutter package 0.1.0--> F(New App)
F --> G(iOS Native)
F --> H(Android Native)  

工具

1. Visual Studio Code

• extension.json

  {
    "recommendations": [
      "dart-code.dart-code",
      "dart-code.flutter",
      "esbenp.prettier-vscode"
    ]
  }
  

2. 安装 Homebrew

• 安装 Homebrew

  /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  

• 安装 Flutter (3.13.2)

  brew install flutter
  

• 安装 CocoaPods (1.12.1)

  brew install cocoapods
  

3. 安装 Xcode

通过 App Store 安装。

提交信息结构

每次提交消息应具有清晰且简洁的结构：

• Jira ID: 在提交前缀添加 Jira ID <code>git commit -m "INNO-34 &lt;message&gt;"</code>
• 类型: 描述提交的目的。可以从 https://gitmoji.dev/ 选择示例 <code>:green_heart:</code>💚
• 范围: （可选）描述提交影响的模块、组件或项目区域。
• 主题: 对更改的一句简短总结。

示例

以下是一些提交消息的示例：

• <code>INNO-34 :green_heart: add support for async/await</code>

设计系统指南

1. 类

• 使用 <code>UpperCamelCase</code>（也称为 PascalCase）。
• 类名应与其代表的内容一致。例如，如果有一个表示用户配置文件的类，可以命名为 <code>UserProfile</code>。
• 避免使用缩写，除非是广泛接受的（如 <code>Http</code> 表示 HTTP）。

2. 文件

• 文件名使用 <code>snake_case</code>。例如 <code>user_profile.dart</code>。
• 包含单个类的 Dart 文件通常与类名匹配但为 <code>snake_case</code>。
• 文件名应能轻松提示其内容。例如，如果有关于网络操作的工具，可以有 <code>network_utils.dart</code>。

3. 文件夹

• 文件夹名使用 <code>snake_case</code>。
• 按模块化方式组织项目。而不是在单一文件夹中包含所有模型或视图，考虑将相关文件分组在一起。例如：

  /users
  /models
  user_model.dart
  /views
  user_profile_view.dart
  user_list_view.dart
  /controllers
  user_controller.dart
  

• 对于可以在应用不同部分使用的共享组件，可以创建一个 <code>shared</code> 或 <code>common</code> 文件夹。
• 对于常量、工具和其他共享逻辑，可以使用名为 <code>constants</code>、<code>utils</code> 或 <code>helpers</code> 的文件夹。

4. 特殊类型的文件

• 对于小部件，考虑后缀为 <code>Widget</code>。例如 <code>ProfileCardWidget</code>。
• 对于模型，考虑后缀为 <code>Model</code>。例如 <code>UserModel</code>。
• 对于控制器，考虑后缀为 <code>Controller</code>。例如 <code>UserController</code>。

5. 扩展和包

• 当在项目内创建包式结构或扩展时，可以使用类似于 Dart 包的组织方式，带有 <code>lib</code> 和 <code>src</code> 子目录。这对于较大的项目很有用。

6. 私有文件和成员

• 在 Dart 中，如果希望某个内容仅限于其库，可以将其名称以 <code>_</code> 开头。这也可以应用于文件名。例如 <code>_private_helper.dart</code>。

7. 一致性

• 最重要的规则是保持一致性。选择命名约定和文件夹结构并在整个项目中坚持使用。

示例代码

以下是一个完整的示例代码，展示如何使用 true_design_system_component 插件：

// main.dart
import 'package:flutter/material.dart';
import 'package:true_design_system_component/true_design_system_component.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('True Design System Component Example'),
        ),
        body: Center(
          child: TrueButton(
            text: 'Click Me',
            onPressed: () {
              print('Button Pressed!');
            },
          ),
        ),
      ),
    );
  }
}

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

class TrueButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const TrueButton({
    Key? key,
    required this.text,
    required this.onPressed,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
    );
  }
}