Skip to content

Commit 6160667

Browse files
raldhafiriRami AlDhafeeri
raldhafiri
and
Rami AlDhafeeri
authored
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 <[email protected]>
1 parent 187cb49 commit 6160667

File tree

13 files changed

+208
-94
lines changed

13 files changed

+208
-94
lines changed

‎examples/example/lib/gen/assets.gen.dart‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@
88
// ignore_for_file: directives_ordering,unnecessary_import,implicit_dynamic_list_literal,deprecated_member_use
99

1010
import 'package:flutter/widgets.dart';
11-
import 'package:flutter_svg/flutter_svg.dart';
1211
import 'package:flutter/services.dart';
12+
import 'package:flutter_svg/flutter_svg.dart';
13+
import 'package:vector_graphics/vector_graphics.dart';
1314
import 'package:flare_flutter/flare_actor.dart';
1415
import 'package:flare_flutter/flare_controller.dart';
1516
import 'package:rive/rive.dart';
@@ -277,11 +278,20 @@ class AssetGenImage {
277278
}
278279

279280
class SvgGenImage {
280-
const SvgGenImage(this._assetName, {this.size = null});
281+
const SvgGenImage(
282+
this._assetName, {
283+
this.size = null,
284+
}) : _isVecFormat = false;
285+
286+
const SvgGenImage.vec(
287+
this._assetName, {
288+
this.size = null,
289+
}) : _isVecFormat = true;
281290

282291
final String _assetName;
283292

284293
final Size? size;
294+
final bool _isVecFormat;
285295

286296
SvgPicture svg({
287297
Key? key,
@@ -303,12 +313,14 @@ class SvgGenImage {
303313
@deprecated BlendMode colorBlendMode = BlendMode.srcIn,
304314
@deprecated bool cacheColorFilter = false,
305315
}) {
306-
return SvgPicture.asset(
307-
_assetName,
316+
return SvgPicture(
317+
_isVecFormat
318+
? AssetBytesLoader(_assetName,
319+
assetBundle: bundle, packageName: package)
320+
: SvgAssetLoader(_assetName,
321+
assetBundle: bundle, packageName: package),
308322
key: key,
309323
matchTextDirection: matchTextDirection,
310-
bundle: bundle,
311-
package: package,
312324
width: width,
313325
height: height,
314326
fit: fit,
@@ -318,9 +330,8 @@ class SvgGenImage {
318330
semanticsLabel: semanticsLabel,
319331
excludeFromSemantics: excludeFromSemantics,
320332
theme: theme,
321-
colorFilter: colorFilter,
322-
color: color,
323-
colorBlendMode: colorBlendMode,
333+
colorFilter: colorFilter ??
334+
(color == null ? null : ColorFilter.mode(color, colorBlendMode)),
324335
clipBehavior: clipBehavior,
325336
cacheColorFilter: cacheColorFilter,
326337
);

‎examples/example/pubspec.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ description: A sample project using FlutterGen.
33
publish_to: 'none'
44

55
environment:
6-
sdk: '>=2.16.0 <4.0.0'
7-
flutter: '>=3.0.0'
6+
sdk: '>=3.2.0 <4.0.0'
7+
flutter: '>=3.16.0'
88

99
dependencies:
1010
flutter:

‎examples/example_resources/lib/gen/assets.gen.dart‎

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@
88
// ignore_for_file: directives_ordering,unnecessary_import,implicit_dynamic_list_literal,deprecated_member_use
99

1010
import 'package:flutter/widgets.dart';
11-
import 'package:flutter_svg/flutter_svg.dart';
1211
import 'package:flutter/services.dart';
12+
import 'package:flutter_svg/flutter_svg.dart';
13+
import 'package:vector_graphics/vector_graphics.dart';
1314
import 'package:flare_flutter/flare_actor.dart';
1415
import 'package:flare_flutter/flare_controller.dart';
1516
import 'package:rive/rive.dart';
@@ -55,6 +56,8 @@ class $AssetsUnknownGen {
5556
class ResAssets {
5657
ResAssets._();
5758

59+
static const String package = 'example_resources';
60+
5861
static const $AssetsImagesGen images = $AssetsImagesGen();
5962
static const $AssetsUnknownGen unknown = $AssetsUnknownGen();
6063
}
@@ -64,6 +67,8 @@ class AssetGenImage {
6467

6568
final String _assetName;
6669

70+
static const String package = 'example_resources';
71+
6772
final Size? size;
6873

6974
Image image({
@@ -86,7 +91,8 @@ class AssetGenImage {
8691
bool matchTextDirection = false,
8792
bool gaplessPlayback = false,
8893
bool isAntiAlias = false,
89-
String? package = 'example_resources',
94+
@Deprecated('Do not specify package for a generated library asset')
95+
String? package = package,
9096
FilterQuality filterQuality = FilterQuality.low,
9197
int? cacheWidth,
9298
int? cacheHeight,
@@ -121,7 +127,8 @@ class AssetGenImage {
121127

122128
ImageProvider provider({
123129
AssetBundle? bundle,
124-
String? package = 'example_resources',
130+
@Deprecated('Do not specify package for a generated library asset')
131+
String? package = package,
125132
}) {
126133
return AssetImage(
127134
_assetName,
@@ -136,15 +143,29 @@ class AssetGenImage {
136143
}
137144

138145
class SvgGenImage {
139-
const SvgGenImage(this._assetName);
146+
const SvgGenImage(
147+
this._assetName, {
148+
this.size = null,
149+
}) : _isVecFormat = false;
150+
151+
const SvgGenImage.vec(
152+
this._assetName, {
153+
this.size = null,
154+
}) : _isVecFormat = true;
140155

141156
final String _assetName;
142157

158+
static const String package = 'example_resources';
159+
160+
final Size? size;
161+
final bool _isVecFormat;
162+
143163
SvgPicture svg({
144164
Key? key,
145165
bool matchTextDirection = false,
146166
AssetBundle? bundle,
147-
String? package = 'example_resources',
167+
@Deprecated('Do not specify package for a generated library asset')
168+
String? package = package,
148169
double? width,
149170
double? height,
150171
BoxFit fit = BoxFit.contain,
@@ -160,12 +181,14 @@ class SvgGenImage {
160181
@deprecated BlendMode colorBlendMode = BlendMode.srcIn,
161182
@deprecated bool cacheColorFilter = false,
162183
}) {
163-
return SvgPicture.asset(
164-
_assetName,
184+
return SvgPicture(
185+
_isVecFormat
186+
? AssetBytesLoader(_assetName,
187+
assetBundle: bundle, packageName: package)
188+
: SvgAssetLoader(_assetName,
189+
assetBundle: bundle, packageName: package),
165190
key: key,
166191
matchTextDirection: matchTextDirection,
167-
bundle: bundle,
168-
package: package,
169192
width: width,
170193
height: height,
171194
fit: fit,
@@ -175,9 +198,8 @@ class SvgGenImage {
175198
semanticsLabel: semanticsLabel,
176199
excludeFromSemantics: excludeFromSemantics,
177200
theme: theme,
178-
colorFilter: colorFilter,
179-
color: color,
180-
colorBlendMode: colorBlendMode,
201+
colorFilter: colorFilter ??
202+
(color == null ? null : ColorFilter.mode(color, colorBlendMode)),
181203
clipBehavior: clipBehavior,
182204
cacheColorFilter: cacheColorFilter,
183205
);
@@ -193,6 +215,8 @@ class FlareGenImage {
193215

194216
final String _assetName;
195217

218+
static const String package = 'example_resources';
219+
196220
FlareActor flare({
197221
String? boundsNode,
198222
String? animation,
@@ -236,6 +260,8 @@ class RiveGenImage {
236260

237261
final String _assetName;
238262

263+
static const String package = 'example_resources';
264+
239265
RiveAnimation rive({
240266
String? artboard,
241267
List<String> animations = const [],
@@ -244,6 +270,7 @@ class RiveGenImage {
244270
Alignment? alignment,
245271
Widget? placeHolder,
246272
bool antialiasing = true,
273+
bool useArtboardSize = false,
247274
List<RiveAnimationController> controllers = const [],
248275
OnInitCallback? onInit,
249276
}) {
@@ -256,6 +283,7 @@ class RiveGenImage {
256283
alignment: alignment,
257284
placeHolder: placeHolder,
258285
antialiasing: antialiasing,
286+
useArtboardSize: useArtboardSize,
259287
controllers: controllers,
260288
onInit: onInit,
261289
);
@@ -271,6 +299,8 @@ class LottieGenImage {
271299

272300
final String _assetName;
273301

302+
static const String package = 'example_resources';
303+
274304
LottieBuilder lottie({
275305
Animation<double>? controller,
276306
bool? animate,
@@ -289,7 +319,8 @@ class LottieGenImage {
289319
double? height,
290320
BoxFit? fit,
291321
AlignmentGeometry? alignment,
292-
String? package = 'example_resources',
322+
@Deprecated('Do not specify package for a generated library asset')
323+
String? package = package,
293324
bool? addRepaintBoundary,
294325
FilterQuality? filterQuality,
295326
void Function(String)? onWarning,

‎examples/example_resources/pubspec.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ description: A sample project using FlutterGen.
33
publish_to: 'none'
44

55
environment:
6-
sdk: '>=2.16.0 <4.0.0'
7-
flutter: '>=3.0.0'
6+
sdk: '>=3.2.0 <4.0.0'
7+
flutter: '>=3.16.0'
88

99
dependencies:
1010
flutter:

‎packages/command/example/lib/gen/assets.gen.dart‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core/example/lib/gen/assets.gen.dart‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core/lib/generators/integrations/svg_integration.dart‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,30 @@ class SvgIntegration extends Integration {
1313
@override
1414
List<String> get requiredImports => [
1515
'package:flutter/widgets.dart',
16-
'package:flutter_svg/flutter_svg.dart',
1716
'package:flutter/services.dart',
17+
'package:flutter_svg/flutter_svg.dart',
18+
'package:vector_graphics/vector_graphics.dart',
1819
];
1920

2021
@override
2122
String get classOutput => _classDefinition;
2223

2324
String get _classDefinition => '''class SvgGenImage {
24-
const SvgGenImage(this._assetName, {this.size = null});
25+
const SvgGenImage(
26+
this._assetName, {
27+
this.size = null,
28+
}) : _isVecFormat = false;
29+
30+
const SvgGenImage.vec(
31+
this._assetName, {
32+
this.size = null,
33+
}) : _isVecFormat = true;
2534
2635
final String _assetName;
2736
${isPackage ? "\n static const String package = '$packageName';" : ''}
2837
2938
final Size? size;
39+
final bool _isVecFormat;
3040
3141
SvgPicture svg({
3242
Key? key,
@@ -49,12 +59,12 @@ ${isPackage ? "\n static const String package = '$packageName';" : ''}
4959
@deprecated BlendMode colorBlendMode = BlendMode.srcIn,
5060
@deprecated bool cacheColorFilter = false,
5161
}) {
52-
return SvgPicture.asset(
53-
_assetName,
62+
return SvgPicture(
63+
_isVecFormat ?
64+
AssetBytesLoader(_assetName, assetBundle: bundle, packageName: package) :
65+
SvgAssetLoader(_assetName, assetBundle: bundle, packageName: package),
5466
key: key,
5567
matchTextDirection: matchTextDirection,
56-
bundle: bundle,
57-
package: package,
5868
width: width,
5969
height: height,
6070
fit: fit,
@@ -64,9 +74,7 @@ ${isPackage ? "\n static const String package = '$packageName';" : ''}
6474
semanticsLabel: semanticsLabel,
6575
excludeFromSemantics: excludeFromSemantics,
6676
theme: theme,
67-
colorFilter: colorFilter,
68-
color: color,
69-
colorBlendMode: colorBlendMode,
77+
colorFilter: colorFilter ?? (color == null ? null : ColorFilter.mode(color, colorBlendMode)),
7078
clipBehavior: clipBehavior,
7179
cacheColorFilter: cacheColorFilter,
7280
);
@@ -85,8 +93,11 @@ ${isPackage ? "\n static const String package = '$packageName';" : ''}
8593
// Query extra information about the SVG
8694
ImageMetadata? info = parseMetadata ? _getMetadata(asset) : null;
8795

88-
return 'SvgGenImage(\'${asset.posixStylePath}\''
89-
'${(info != null) ? ', size: Size(${info.width}, ${info.height})' : ''}'
96+
final String constructorName =
97+
asset.extension == '.vec' ? 'SvgGenImage.vec' : 'SvgGenImage';
98+
99+
return "$constructorName('${asset.posixStylePath}'"
100+
"${(info != null) ? ', size: Size(${info.width}, ${info.height})' : ''}"
90101
')';
91102
}
92103

@@ -107,7 +118,8 @@ ${isPackage ? "\n static const String package = '$packageName';" : ''}
107118
}
108119

109120
@override
110-
bool isSupport(AssetType asset) => asset.mime == 'image/svg+xml';
121+
bool isSupport(AssetType asset) =>
122+
asset.mime == 'image/svg+xml' || asset.extension == '.vec';
111123

112124
@override
113125
bool get isConstConstructor => true;

0 commit comments

Comments
 (0)