Flutter设计注解插件`flutter_design_annotation`的使用

在Flutter开发中，为了快速构建设计系统组件库，可以使用flutter_design_annotation插件来生成设计系统的组件目录。该插件通常与flutter_design_codegen一起配合使用，避免直接使用此包，推荐使用flutter_design包。

使用步骤

以下是完整的使用步骤和示例代码，帮助你快速上手flutter_design_annotation。

1. 添加依赖

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

dependencies:
  flutter_design: ^1.0.0  # 推荐使用flutter_design包
dev_dependencies:
  flutter_design_codegen: ^1.0.0  # 用于生成代码

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

2. 创建注解文件

创建一个文件（例如design_annotations.dart），在这个文件中使用@DesignComponent注解来定义设计系统的组件。

// design_annotations.dart
import 'package:flutter_design_annotation/flutter_design_annotation.dart';

@DesignComponent(
  name: "Button", // 组件名称
  description: "Primary button for actions", // 描述
  props: [
    DesignProp(name: "text", type: "String"), // 属性1
    DesignProp(name: "onPressed", type: "VoidCallback"), // 属性2
  ],
)
class PrimaryButton {}

@DesignComponent(
  name: "Card",
  description: "Card with title and content",
  props: [
    DesignProp(name: "title", type: "String"),
    DesignProp(name: "content", type: "Widget"),
  ],
)
class CustomCard {}

3. 生成代码

在终端中运行以下命令以生成设计系统的代码：

flutter pub run flutter_design_codegen:generate

生成的代码会包含所有定义的组件及其属性信息。

4. 使用生成的代码

在项目中导入生成的代码，并使用这些组件。例如：

// main.dart
import 'package:flutter/material.dart';
import 'generated/design_system.dart'; // 导入生成的代码

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Design System Example")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用生成的Button组件
              DesignButton(
                text: "Click Me",
                onPressed: () {
                  print("Button Pressed");
                },
              ),
              SizedBox(height: 20),
              // 使用生成的Card组件
              DesignCard(
                title: "Title",
                content: Text("This is the card content."),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

ionicwang 1楼•8 天前

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

flutter_design_annotation 是一个用于在 Flutter 项目中添加设计注解的插件。它可以帮助开发者在代码中直接添加设计相关的注解，以便更好地与设计团队协作，或者在开发过程中快速查看设计规范。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_design_annotation 依赖：

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

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

使用

flutter_design_annotation 提供了一些注解，你可以在代码中使用这些注解来标记设计相关的信息。

1. `[@DesignColor](/user/DesignColor)`

[@DesignColor](/user/DesignColor) 注解用于标记颜色值，通常用于与设计稿中的颜色保持一致。

import 'package:flutter_design_annotation/flutter_design_annotation.dart';

[@DesignColor](/user/DesignColor)(name: 'Primary', hex: '#6200EE')
const Color primaryColor = Color(0xFF6200EE);

2. `[@DesignTextStyle](/user/DesignTextStyle)`

[@DesignTextStyle](/user/DesignTextStyle) 注解用于标记文本样式，通常用于与设计稿中的文本样式保持一致。

import 'package:flutter_design_annotation/flutter_design_annotation.dart';

[@DesignTextStyle](/user/DesignTextStyle)(name: 'Heading', fontSize: 24, fontWeight: FontWeight.bold)
const TextStyle headingTextStyle = TextStyle(
  fontSize: 24,
  fontWeight: FontWeight.bold,
);

3. `[@DesignSpacing](/user/DesignSpacing)`

[@DesignSpacing](/user/DesignSpacing) 注解用于标记间距值，通常用于与设计稿中的间距保持一致。

import 'package:flutter_design_annotation/flutter_design_annotation.dart';

[@DesignSpacing](/user/DesignSpacing)(name: 'Small', value: 8.0)
const double smallSpacing = 8.0;

4. `[@DesignRadius](/user/DesignRadius)`

[@DesignRadius](/user/DesignRadius) 注解用于标记圆角值，通常用于与设计稿中的圆角保持一致。

import 'package:flutter_design_annotation/flutter_design_annotation.dart';

[@DesignRadius](/user/DesignRadius)(name: 'Card', value: 12.0)
const double cardRadius = 12.0;

生成设计文档

flutter_design_annotation 还提供了一个命令行工具，可以生成设计文档。你可以通过以下命令生成设计文档：

flutter pub run flutter_design_annotation:generate

生成的文档将包含所有使用 flutter_design_annotation 注解的设计元素，方便设计团队和开发团队进行协作。

示例

以下是一个完整的示例，展示了如何在 Flutter 项目中使用 flutter_design_annotation：

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

[@DesignColor](/user/DesignColor)(name: 'Primary', hex: '#6200EE')
const Color primaryColor = Color(0xFF6200EE);

[@DesignTextStyle](/user/DesignTextStyle)(name: 'Heading', fontSize: 24, fontWeight: FontWeight.bold)
const TextStyle headingTextStyle = TextStyle(
  fontSize: 24,
  fontWeight: FontWeight.bold,
);

[@DesignSpacing](/user/DesignSpacing)(name: 'Small', value: 8.0)
const double smallSpacing = 8.0;

[@DesignRadius](/user/DesignRadius)(name: 'Card', value: 12.0)
const double cardRadius = 12.0;

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Design Annotation Demo',
      theme: ThemeData(
        primaryColor: primaryColor,
        textTheme: TextTheme(
          headline1: headingTextStyle,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Design Annotation Demo'),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.all(smallSpacing),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(cardRadius),
            ),
            child: Text(
              'Hello, Design Annotation!',
              style: headingTextStyle,
            ),
          ),
        ),
      ),
    );
  }
}

Flutter设计注解插件flutter_design_annotation的使用