Add support for vector graphics (vec files) in SvgGenImage (#493)

## What does this change? Integrate vector_graphic in the generation process alongside flutter_svg and allow to user to configure vector_graphic as we configure flutter_svg currently. And therefore add the generation of the .vec optimized file of the SVG in the process of generation of the differents assets dart file with the supports of VectorGraphic widget instead of SvgPicture. Fixes #362 🎯 ## Type of change - [x] New feature (non-breaking change which adds functionality) --------- Co-authored-by: Rami AlDhafeeri <r.aldhafeeri@gulfbank.com.kw>
FlutterGen · May 6, 2024 · 6160667 · 6160667
1 parent 187cb49
commit 6160667
Show file tree

Hide file tree

Showing 13 changed files with 208 additions and 94 deletions.
diff --git a/examples/example/lib/gen/assets.gen.dart b/examples/example/lib/gen/assets.gen.dart
@@ -8,8 +8,9 @@
 // ignore_for_file: directives_ordering,unnecessary_import,implicit_dynamic_list_literal,deprecated_member_use
 
 import 'package:flutter/widgets.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:vector_graphics/vector_graphics.dart';
 import 'package:flare_flutter/flare_actor.dart';
 import 'package:flare_flutter/flare_controller.dart';
 import 'package:rive/rive.dart';
@@ -277,11 +278,20 @@ class AssetGenImage {
 }
 
 class SvgGenImage {
-  const SvgGenImage(this._assetName, {this.size = null});
+  const SvgGenImage(
+    this._assetName, {
+    this.size = null,
+  }) : _isVecFormat = false;
+
+  const SvgGenImage.vec(
+    this._assetName, {
+    this.size = null,
+  }) : _isVecFormat = true;
 
   final String _assetName;
 
   final Size? size;
+  final bool _isVecFormat;
 
   SvgPicture svg({
     Key? key,
@@ -303,12 +313,14 @@ class SvgGenImage {
     @deprecated BlendMode colorBlendMode = BlendMode.srcIn,
     @deprecated bool cacheColorFilter = false,
   }) {
-    return SvgPicture.asset(
-      _assetName,
+    return SvgPicture(
+      _isVecFormat
+          ? AssetBytesLoader(_assetName,
+              assetBundle: bundle, packageName: package)
+          : SvgAssetLoader(_assetName,
+              assetBundle: bundle, packageName: package),
       key: key,
       matchTextDirection: matchTextDirection,
-      bundle: bundle,
-      package: package,
       width: width,
       height: height,
       fit: fit,
@@ -318,9 +330,8 @@ class SvgGenImage {
       semanticsLabel: semanticsLabel,
       excludeFromSemantics: excludeFromSemantics,
       theme: theme,
-      colorFilter: colorFilter,
-      color: color,
-      colorBlendMode: colorBlendMode,
+      colorFilter: colorFilter ??
+          (color == null ? null : ColorFilter.mode(color, colorBlendMode)),
       clipBehavior: clipBehavior,
       cacheColorFilter: cacheColorFilter,
     );

diff --git a/examples/example/pubspec.yaml b/examples/example/pubspec.yaml
@@ -3,8 +3,8 @@ description: A sample project using FlutterGen.
 publish_to: 'none'
 
 environment:
-  sdk: '>=2.16.0 <4.0.0'
-  flutter: '>=3.0.0'
+  sdk: '>=3.2.0 <4.0.0'
+  flutter: '>=3.16.0'
 
 dependencies:
   flutter:

diff --git a/examples/example_resources/lib/gen/assets.gen.dart b/examples/example_resources/lib/gen/assets.gen.dart
@@ -8,8 +8,9 @@
 // ignore_for_file: directives_ordering,unnecessary_import,implicit_dynamic_list_literal,deprecated_member_use
 
 import 'package:flutter/widgets.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:vector_graphics/vector_graphics.dart';
 import 'package:flare_flutter/flare_actor.dart';
 import 'package:flare_flutter/flare_controller.dart';
 import 'package:rive/rive.dart';
@@ -55,6 +56,8 @@ class $AssetsUnknownGen {
 class ResAssets {
   ResAssets._();
 
+  static const String package = 'example_resources';
+
   static const $AssetsImagesGen images = $AssetsImagesGen();
   static const $AssetsUnknownGen unknown = $AssetsUnknownGen();
 }
@@ -64,6 +67,8 @@ class AssetGenImage {
 
   final String _assetName;
 
+  static const String package = 'example_resources';
+
   final Size? size;
 
   Image image({
@@ -86,7 +91,8 @@ class AssetGenImage {
     bool matchTextDirection = false,
     bool gaplessPlayback = false,
     bool isAntiAlias = false,
-    String? package = 'example_resources',
+    @Deprecated('Do not specify package for a generated library asset')
+    String? package = package,
     FilterQuality filterQuality = FilterQuality.low,
     int? cacheWidth,
     int? cacheHeight,
@@ -121,7 +127,8 @@ class AssetGenImage {
 
   ImageProvider provider({
     AssetBundle? bundle,
-    String? package = 'example_resources',
+    @Deprecated('Do not specify package for a generated library asset')
+    String? package = package,
   }) {
     return AssetImage(
       _assetName,
@@ -136,15 +143,29 @@ class AssetGenImage {
 }
 
 class SvgGenImage {
-  const SvgGenImage(this._assetName);
+  const SvgGenImage(
+    this._assetName, {
+    this.size = null,
+  }) : _isVecFormat = false;
+
+  const SvgGenImage.vec(
+    this._assetName, {
+    this.size = null,
+  }) : _isVecFormat = true;
 
   final String _assetName;
 
+  static const String package = 'example_resources';
+
+  final Size? size;
+  final bool _isVecFormat;
+
   SvgPicture svg({
     Key? key,
     bool matchTextDirection = false,
     AssetBundle? bundle,
-    String? package = 'example_resources',
+    @Deprecated('Do not specify package for a generated library asset')
+    String? package = package,
     double? width,
     double? height,
     BoxFit fit = BoxFit.contain,
@@ -160,12 +181,14 @@ class SvgGenImage {
     @deprecated BlendMode colorBlendMode = BlendMode.srcIn,
     @deprecated bool cacheColorFilter = false,
   }) {
-    return SvgPicture.asset(
-      _assetName,
+    return SvgPicture(
+      _isVecFormat
+          ? AssetBytesLoader(_assetName,
+              assetBundle: bundle, packageName: package)
+          : SvgAssetLoader(_assetName,
+              assetBundle: bundle, packageName: package),
       key: key,
       matchTextDirection: matchTextDirection,
-      bundle: bundle,
-      package: package,
       width: width,
       height: height,
       fit: fit,
@@ -175,9 +198,8 @@ class SvgGenImage {
       semanticsLabel: semanticsLabel,
       excludeFromSemantics: excludeFromSemantics,
       theme: theme,
-      colorFilter: colorFilter,
-      color: color,
-      colorBlendMode: colorBlendMode,
+      colorFilter: colorFilter ??
+          (color == null ? null : ColorFilter.mode(color, colorBlendMode)),
       clipBehavior: clipBehavior,
       cacheColorFilter: cacheColorFilter,
     );
@@ -193,6 +215,8 @@ class FlareGenImage {
 
   final String _assetName;
 
+  static const String package = 'example_resources';
+
   FlareActor flare({
     String? boundsNode,
     String? animation,
@@ -236,6 +260,8 @@ class RiveGenImage {
 
   final String _assetName;
 
+  static const String package = 'example_resources';
+
   RiveAnimation rive({
     String? artboard,
     List<String> animations = const [],
@@ -244,6 +270,7 @@ class RiveGenImage {
     Alignment? alignment,
     Widget? placeHolder,
     bool antialiasing = true,
+    bool useArtboardSize = false,
     List<RiveAnimationController> controllers = const [],
     OnInitCallback? onInit,
   }) {
@@ -256,6 +283,7 @@ class RiveGenImage {
       alignment: alignment,
       placeHolder: placeHolder,
       antialiasing: antialiasing,
+      useArtboardSize: useArtboardSize,
       controllers: controllers,
       onInit: onInit,
     );
@@ -271,6 +299,8 @@ class LottieGenImage {
 
   final String _assetName;
 
+  static const String package = 'example_resources';
+
   LottieBuilder lottie({
     Animation<double>? controller,
     bool? animate,
@@ -289,7 +319,8 @@ class LottieGenImage {
     double? height,
     BoxFit? fit,
     AlignmentGeometry? alignment,
-    String? package = 'example_resources',
+    @Deprecated('Do not specify package for a generated library asset')
+    String? package = package,
     bool? addRepaintBoundary,
     FilterQuality? filterQuality,
     void Function(String)? onWarning,

diff --git a/examples/example_resources/pubspec.yaml b/examples/example_resources/pubspec.yaml
@@ -3,8 +3,8 @@ description: A sample project using FlutterGen.
 publish_to: 'none'
 
 environment:
-  sdk: '>=2.16.0 <4.0.0'
-  flutter: '>=3.0.0'
+  sdk: '>=3.2.0 <4.0.0'
+  flutter: '>=3.16.0'
 
 dependencies:
   flutter:

diff --git a/packages/command/example/lib/gen/assets.gen.dart b/packages/command/example/lib/gen/assets.gen.dart
diff --git a/packages/core/example/lib/gen/assets.gen.dart b/packages/core/example/lib/gen/assets.gen.dart
diff --git a/packages/core/lib/generators/integrations/svg_integration.dart b/packages/core/lib/generators/integrations/svg_integration.dart
@@ -13,20 +13,30 @@ class SvgIntegration extends Integration {
   @override
   List<String> get requiredImports => [
         'package:flutter/widgets.dart',
-        'package:flutter_svg/flutter_svg.dart',
         'package:flutter/services.dart',
+        'package:flutter_svg/flutter_svg.dart',
+        'package:vector_graphics/vector_graphics.dart',
       ];
 
   @override
   String get classOutput => _classDefinition;
 
   String get _classDefinition => '''class SvgGenImage {
-  const SvgGenImage(this._assetName, {this.size = null});
+  const SvgGenImage(
+    this._assetName, {
+    this.size = null,
+  }) : _isVecFormat = false;
+  
+  const SvgGenImage.vec(
+    this._assetName, {
+    this.size = null,
+  }) : _isVecFormat = true;
 
   final String _assetName;
 ${isPackage ? "\n  static const String package = '$packageName';" : ''}
 
   final Size? size;
+  final bool _isVecFormat;
 
   SvgPicture svg({
     Key? key,
@@ -49,12 +59,12 @@ ${isPackage ? "\n  static const String package = '$packageName';" : ''}
     @deprecated BlendMode colorBlendMode = BlendMode.srcIn,
     @deprecated bool cacheColorFilter = false,
   }) {
-    return SvgPicture.asset(
-      _assetName,
+    return SvgPicture(
+      _isVecFormat ? 
+        AssetBytesLoader(_assetName, assetBundle: bundle, packageName: package) :
+        SvgAssetLoader(_assetName, assetBundle: bundle, packageName: package),
       key: key,
       matchTextDirection: matchTextDirection,
-      bundle: bundle,
-      package: package,
       width: width,
       height: height,
       fit: fit,
@@ -64,9 +74,7 @@ ${isPackage ? "\n  static const String package = '$packageName';" : ''}
       semanticsLabel: semanticsLabel,
       excludeFromSemantics: excludeFromSemantics,
       theme: theme,
-      colorFilter: colorFilter,
-      color: color,
-      colorBlendMode: colorBlendMode,
+      colorFilter: colorFilter ?? (color == null ? null : ColorFilter.mode(color, colorBlendMode)),
       clipBehavior: clipBehavior,
       cacheColorFilter: cacheColorFilter,
     );
@@ -85,8 +93,11 @@ ${isPackage ? "\n  static const String package = '$packageName';" : ''}
     // Query extra information about the SVG
     ImageMetadata? info = parseMetadata ? _getMetadata(asset) : null;
 
-    return 'SvgGenImage(\'${asset.posixStylePath}\''
-        '${(info != null) ? ', size: Size(${info.width}, ${info.height})' : ''}'
+    final String constructorName =
+        asset.extension == '.vec' ? 'SvgGenImage.vec' : 'SvgGenImage';
+
+    return "$constructorName('${asset.posixStylePath}'"
+        "${(info != null) ? ', size: Size(${info.width}, ${info.height})' : ''}"
         ')';
   }
 
@@ -107,7 +118,8 @@ ${isPackage ? "\n  static const String package = '$packageName';" : ''}
   }
 
   @override
-  bool isSupport(AssetType asset) => asset.mime == 'image/svg+xml';
+  bool isSupport(AssetType asset) =>
+      asset.mime == 'image/svg+xml' || asset.extension == '.vec';
 
   @override
   bool get isConstConstructor => true;