Flutter动画矢量图生成插件animated_vector_gen的使用

Flutter动画矢量图生成插件animated_vector_gen的使用

animated_vector_gen简介

animated_vector_gen 是一个用于生成动画矢量图的代码生成器。它支持将通过 ShapeShifter 创建的动画矢量数据转换为 Flutter 可用的格式。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
    # 主包依赖
    animated_vector:
    # 注解包，用于标记 ShapeShifter 文件
    animated_vector_annotations:

dev_dependencies:
    # 代码生成工具
    animated_vector_gen:
    # 自动运行构建工具
    build_runner:

运行以下命令以安装依赖：

flutter pub get

2. 启动代码生成器

有以下两种方式启动代码生成器：

• 手动运行： 每次修改文件后，运行以下命令以生成代码：

  dart run build_runner build
  

• 自动监听模式： 启动一个持久化进程，当文件保存时会自动重新生成代码：

  dart run build_runner watch
  

使用方法

1. 将 ShapeShifter 文件放入指定目录

将 .shapeshifter 文件放入符合 Dart 包布局规范的文件夹中，推荐的文件夹包括 assets/ 或其子目录。

例如，将文件放在 assets/ 目录下：

assets/
  ├── iconA.shapeshifter
  └── iconB.shapeshifter

ShapeShifter 文件可以通过 ShapeShifter 工具创建并保存。

2. 使用 @ShapeShifterAsset 注解

在 Dart 文件中使用 @ShapeShifterAsset 注解来引用 ShapeShifter 文件，并生成对应的常量变量。

示例代码：

// vectors.dart
import 'package:animated_vector_annotations/animated_vector_annotations.dart';

part 'vectors.g.dart'; // 自动生成的文件

@ShapeShifterAsset("assets/iconA.shapeshifter")
const iconA = _$iconA;

class Vectors {
    @ShapeShifterAsset("assets/iconB.shapeshifter")
    static const playPause = _$playPause; // 字段名可以与文件名不同，但生成的变量名始终由字段名派生。
}

3. 自动生成代码

运行代码生成器后，会在 vectors.g.dart 文件中生成对应的动画矢量数据。

生成后的代码示例：

// vectors.g.dart
part of 'vectors.dart';

const AnimatedVectorData _$iconA = AnimatedVectorData(
  // 具体的动画矢量数据
  ...
);

const AnimatedVectorData _$playPause = AnimatedVectorData(
  // 具体的动画矢量数据
  ...
);

完整示例

以下是一个完整的示例，展示如何使用 animated_vector_gen 插件生成动画矢量图。

1. 创建 ShapeShifter 文件

使用 ShapeShifter 创建两个动画矢量文件 iconA.shapeshifter 和 iconB.shapeshifter，并将它们保存到 assets/ 目录下。

2. 编写 Dart 代码

创建 vectors.dart 文件：

// vectors.dart
import 'package:animated_vector_annotations/animated_vector_annotations.dart';

part 'vectors.g.dart'; // 自动生成的文件

@ShapeShifterAsset("assets/iconA.shapeshifter")
const iconA = _$iconA;

class Vectors {
    @ShapeShifterAsset("assets/iconB.shapeshifter")
    static const playPause = _$playPause;
}

运行代码生成器：

dart run build_runner build

生成后的 vectors.g.dart 文件内容如下：

// vectors.g.dart
part of 'vectors.dart';

const AnimatedVectorData _$iconA = AnimatedVectorData(
  // 具体的动画矢量数据
  ...
);

const AnimatedVectorData _$playPause = AnimatedVectorData(
  // 具体的动画矢量数据
  ...
);

3. 在 Flutter 中使用

在 Flutter 的 Widget 中使用生成的动画矢量数据：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Animated Vector Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(iconA, size: 100), // 使用 iconA
              SizedBox(height: 20),
              Icon(Vectors.playPause, size: 100), // 使用 playPause
            ],
          ),
        ),
      ),
    );
  }
}