Use .vec SVG class for vector_graphics_compiler transformed assets (#685)

Albert221 · web-flow · commit 675eb2e0c3fb · 2025-07-16T19:14:22.000+08:00
## What does this change? In the SVG integration, assets that have a [`vector_graphics_compiler`](https://pub.dev/packages/vector_graphics_compiler) [asset transformer](https://docs.flutter.dev/ui/assets/asset-transformation) will use `SvgGenImage.vec` constructor to use correct bytes loader. Fixes #684 🎯
diff --git a/README.md b/README.md
@@ -204,7 +204,10 @@ flutter:
     - assets/images/
     - assets/images/chip3/chip.jpg
     - assets/images/chip4/chip.jpg
-    - assets/images/icons/paint.svg
+    - path: assets/images/icons/paint.svg
+    - path: assets/images/icons/transformed.svg
+      transformers:
+        - package: vector_graphics_compiler
     - assets/images/icons/dart@test.svg
     - assets/json/fruits.json
     - assets/flare/Penguin.flr
@@ -380,7 +383,7 @@ flutter_gen:
     image: false
 ```
 
-If you are using SVG images with [flutter_svg](https://pub.dev/packages/flutter_svg) you can use the integration feature.
+If you are using SVG images with [flutter_svg](https://pub.dev/packages/flutter_svg) you can use the integration feature. This feature also supports using `vector_graphics_compiler` transformer and the produced code will use the `AssetBytesLoader` for such transformed assets.
 
 ```yaml
 # pubspec.yaml
@@ -391,6 +394,9 @@ flutter_gen:
 flutter:
   assets:
     - assets/images/icons/paint.svg
+    - path: assets/images/icons/transformed.svg
+      transformers:
+        - package: vector_graphics_compiler
 ```
 
 ```dart
diff --git a/packages/core/lib/generators/assets_generator.dart b/packages/core/lib/generators/assets_generator.dart
@@ -176,32 +176,45 @@ List<FlavoredAsset> _getAssetRelativePathList(
 ) {
   // Normalize.
   final normalizedAssets = <Object>{...assets.whereType<String>()};
-  final normalizingMap = <String, Set<String>>{};
-  // Resolve flavored assets.
+  final normalizingMap =
+      <String, ({Set<String> flavors, Set<String> transformers})>{};
+  // Resolve flavored or transformed assets.
   for (final map in assets.whereType<YamlMap>()) {
     final path = (map['path'] as String).trim();
     final flavors =
         (map['flavors'] as YamlList?)?.toSet().cast<String>() ?? <String>{};
+    final transformers = (map['transformers'] as YamlList?)
+            ?.map(((t) => (t as YamlMap)['package'] as String))
+            .toSet() ??
+        {};
     if (normalizingMap.containsKey(path)) {
       // https://github.com/flutter/flutter/blob/5187cab7bdd434ca74abb45895d17e9fa553678a/packages/flutter_tools/lib/src/asset.dart#L1137-L1139
       throw StateError(
         'Multiple assets entries include the file "$path", '
-        'but they specify different lists of flavors.',
+        'but they specify different lists of flavors or transformers.',
       );
     }
-    normalizingMap[path] = flavors;
+    normalizingMap[path] = (flavors: flavors, transformers: transformers);
   }
   for (final entry in normalizingMap.entries) {
     normalizedAssets.add(
-      YamlMap.wrap({'path': entry.key, 'flavors': entry.value}),
+      YamlMap.wrap({
+        'path': entry.key,
+        'flavors': entry.value.flavors,
+        'transformers': entry.value.transformers,
+      }),
     );
   }
 
   final assetRelativePathList = <FlavoredAsset>[];
   for (final asset in normalizedAssets) {
     final FlavoredAsset tempAsset;
     if (asset is YamlMap) {
-      tempAsset = FlavoredAsset(path: asset['path'], flavors: asset['flavors']);
+      tempAsset = FlavoredAsset(
+        path: asset['path'],
+        flavors: asset['flavors'],
+        transformers: asset['transformers'],
+      );
     } else {
       tempAsset = FlavoredAsset(path: (asset as String).trim());
     }
@@ -238,14 +251,24 @@ AssetType _constructAssetTree(
 ) {
   // Relative path is the key
   final assetTypeMap = <String, AssetType>{
-    '.': AssetType(rootPath: rootPath, path: '.', flavors: {}),
+    '.': AssetType(
+      rootPath: rootPath,
+      path: '.',
+      flavors: {},
+      transformers: {},
+    ),
   };
   for (final asset in assetRelativePathList) {
     String path = asset.path;
     while (path != '.') {
       assetTypeMap.putIfAbsent(
         path,
-        () => AssetType(rootPath: rootPath, path: path, flavors: asset.flavors),
+        () => AssetType(
+          rootPath: rootPath,
+          path: path,
+          flavors: asset.flavors,
+          transformers: asset.transformers,
+        ),
       );
       path = dirname(path);
     }
@@ -462,6 +485,7 @@ Future<String> _flatStyleDefinition(
             rootPath: config.rootPath,
             path: assetPath.path,
             flavors: assetPath.flavors,
+            transformers: assetPath.transformers,
           ),
         )
         .mapToUniqueAssetType(style)
diff --git a/packages/core/lib/generators/integrations/svg_integration.dart b/packages/core/lib/generators/integrations/svg_integration.dart
@@ -103,12 +103,15 @@ ${isPackage ? "\n  static const String package = '$packageName';" : ''}
   @override
   String get className => 'SvgGenImage';
 
+  static const vectorCompileTransformer = 'vector_graphics_compiler';
+
   @override
   String classInstantiate(AssetType asset) {
     // Query extra information about the SVG.
     final info = parseMetadata ? _getMetadata(asset) : null;
     final buffer = StringBuffer(className);
-    if (asset.extension == '.vec') {
+    if (asset.extension == '.vec' ||
+        asset.transformers.contains(vectorCompileTransformer)) {
       buffer.write('.vec');
     }
     buffer.write('(');
diff --git a/packages/core/lib/settings/asset_type.dart b/packages/core/lib/settings/asset_type.dart
@@ -10,11 +10,13 @@ class AssetType {
     required this.rootPath,
     required this.path,
     required this.flavors,
+    required this.transformers,
   });
 
   final String rootPath;
   final String path;
   final Set<String> flavors;
+  final Set<String> transformers;
 
   final List<AssetType> _children = List.empty(growable: true);
   late final children = _children.sortedBy((e) => e.path);
@@ -55,7 +57,8 @@ class AssetType {
   String toString() => 'AssetType('
       'rootPath: $rootPath, '
       'path: $path, '
-      'flavors: $flavors'
+      'flavors: $flavors, '
+      'transformers: $transformers'
       ')';
 }
 
@@ -74,6 +77,7 @@ class UniqueAssetType extends AssetType {
           rootPath: assetType.rootPath,
           path: assetType.path,
           flavors: assetType.flavors,
+          transformers: assetType.transformers,
         );
 
   /// Convert the asset name to a correctly styled name, e.g camelCase or
@@ -113,7 +117,9 @@ class UniqueAssetType extends AssetType {
         'path: $path, '
         'style: $style, '
         'needExtension: $needExtension, '
-        'suffix: $suffix}';
+        'suffix: $suffix, '
+        'flavors: $flavors, '
+        'transformers: $transformers}';
   }
 }
 
diff --git a/packages/core/lib/settings/flavored_asset.dart b/packages/core/lib/settings/flavored_asset.dart
@@ -2,18 +2,26 @@ class FlavoredAsset {
   const FlavoredAsset({
     required this.path,
     this.flavors = const {},
+    this.transformers = const {},
   });
 
   final String path;
   final Set<String> flavors;
+  final Set<String> transformers;
 
-  FlavoredAsset copyWith({String? path, Set<String>? flavors}) {
+  FlavoredAsset copyWith({
+    String? path,
+    Set<String>? flavors,
+    Set<String>? transformers,
+  }) {
     return FlavoredAsset(
       path: path ?? this.path,
       flavors: flavors ?? this.flavors,
+      transformers: transformers ?? this.transformers,
     );
   }
 
   @override
-  String toString() => 'FlavoredAsset(path: $path, flavors: $flavors)';
+  String toString() =>
+      'FlavoredAsset(path: $path, flavors: $flavors, transformers: $transformers)';
 }
diff --git a/packages/core/test/assets_gen_integrations_test.dart b/packages/core/test/assets_gen_integrations_test.dart
@@ -45,7 +45,12 @@ void main() {
     test('Integration.classInstantiate', () {
       expect(
         TestIntegration().classInstantiate(
-          AssetType(rootPath: resPath, path: 'assets/path', flavors: {'test'}),
+          AssetType(
+            rootPath: resPath,
+            path: 'assets/path',
+            flavors: {'test'},
+            transformers: {},
+          ),
         ),
         'TestIntegration(\'assets/path\', flavors: {\'test\'},)',
       );
@@ -63,6 +68,7 @@ void main() {
             rootPath: resPath,
             path: 'assets/path',
             flavors: {},
+            transformers: {},
           ),
         ),
         'SvgGenImage(\'assets/path\')',
@@ -73,26 +79,62 @@ void main() {
             rootPath: resPath,
             path: 'assets/path',
             flavors: {'test'},
+            transformers: {},
           ),
         ),
         'SvgGenImage(\'assets/path\', flavors: {\'test\'},)',
       );
+      expect(
+        integration.classInstantiate(
+          AssetType(
+            rootPath: resPath,
+            path: 'assets/path/dog.svg',
+            flavors: {},
+            transformers: {},
+          ),
+        ),
+        'SvgGenImage(\'assets/path/dog.svg\')',
+      );
       expect(
         integration.classInstantiate(
           AssetType(
             rootPath: resPath,
             path: 'assets/path/dog.vec',
             flavors: {},
+            transformers: {},
           ),
         ),
         'SvgGenImage.vec(\'assets/path/dog.vec\')',
       );
+      expect(
+        integration.classInstantiate(
+          AssetType(
+            rootPath: resPath,
+            path: 'assets/path/dog.svg',
+            flavors: {},
+            transformers: {'test'},
+          ),
+        ),
+        'SvgGenImage(\'assets/path/dog.svg\')',
+      );
+      expect(
+        integration.classInstantiate(
+          AssetType(
+            rootPath: resPath,
+            path: 'assets/path/dog.svg',
+            flavors: {},
+            transformers: {'vector_graphics_compiler'},
+          ),
+        ),
+        'SvgGenImage.vec(\'assets/path/dog.svg\')',
+      );
       expect(
         integration.isSupport(
           AssetType(
             rootPath: resPath,
             path: 'assets/path/dog.svg',
             flavors: {},
+            transformers: {},
           ),
         ),
         isTrue,
@@ -103,6 +145,18 @@ void main() {
             rootPath: resPath,
             path: 'assets/path/dog.vec',
             flavors: {},
+            transformers: {},
+          ),
+        ),
+        isTrue,
+      );
+      expect(
+        integration.isSupport(
+          AssetType(
+            rootPath: resPath,
+            path: 'assets/path/dog.svg',
+            flavors: {},
+            transformers: {'test'},
           ),
         ),
         isTrue,
@@ -113,6 +167,7 @@ void main() {
             rootPath: resPath,
             path: 'assets/path/dog.png',
             flavors: {},
+            transformers: {},
           ),
         ),
         isFalse,
@@ -147,6 +202,7 @@ void main() {
             rootPath: resPath,
             path: 'assets/path',
             flavors: {},
+            transformers: {},
           ),
         ),
         'RiveGenImage(\'assets/path\')',
@@ -157,6 +213,7 @@ void main() {
             rootPath: resPath,
             path: 'assets/path/dog.riv',
             flavors: {},
+            transformers: {},
           ),
         ),
         isTrue,
@@ -167,6 +224,7 @@ void main() {
             rootPath: resPath,
             path: 'assets/path/dog.json',
             flavors: {},
+            transformers: {},
           ),
         ),
         isFalse,
@@ -194,6 +252,7 @@ void main() {
             rootPath: resPath,
             path: 'assets/lottie',
             flavors: {},
+            transformers: {},
           ),
         ),
         'LottieGenImage(\'assets/lottie\')',
@@ -204,6 +263,7 @@ void main() {
             rootPath: resPath,
             path: 'assets/lottie/hamburger_arrow.json',
             flavors: {},
+            transformers: {},
           ),
         ),
         isTrue,
@@ -214,6 +274,7 @@ void main() {
             rootPath: resPath,
             path: 'assets/lottie/hamburger_arrow_without_version.json',
             flavors: {},
+            transformers: {},
           ),
         ),
         isFalse,
diff --git a/packages/core/test/assets_gen_test.dart b/packages/core/test/assets_gen_test.dart
@@ -167,7 +167,14 @@ void main() {
 
       final List<AssetType> assets = tests.keys
           .sorted()
-          .map((e) => AssetType(rootPath: '', path: e, flavors: {}))
+          .map(
+            (e) => AssetType(
+              rootPath: '',
+              path: e,
+              flavors: {},
+              transformers: {},
+            ),
+          )
           .toList();
 
       final got = assets.mapToUniqueAssetType(camelCase);
diff --git a/packages/core/test/settings_test.dart b/packages/core/test/settings_test.dart
diff --git a/packages/core/test_resources/actual_data/assets_assets_svg_integrations.gen.dart b/packages/core/test_resources/actual_data/assets_assets_svg_integrations.gen.dart
diff --git a/packages/core/test_resources/pubspec_assets_svg_integrations.yaml b/packages/core/test_resources/pubspec_assets_svg_integrations.yaml
