diff --git a/packages/vector_graphics_compiler/CHANGELOG.md b/packages/vector_graphics_compiler/CHANGELOG.md index 1bc29a647144..4788eda94edb 100644 --- a/packages/vector_graphics_compiler/CHANGELOG.md +++ b/packages/vector_graphics_compiler/CHANGELOG.md @@ -1,3 +1,8 @@ +## 1.2.1 + +* Adds example demonstrating build-time SVG asset transformation. +* Adds Example section to README. + ## 1.2.0 * Adds support for percentage units in SVG shape attributes (rect, circle, ellipse, line). diff --git a/packages/vector_graphics_compiler/README.md b/packages/vector_graphics_compiler/README.md index 8997314b22ab..68f0b6f8e97d 100644 --- a/packages/vector_graphics_compiler/README.md +++ b/packages/vector_graphics_compiler/README.md @@ -29,6 +29,12 @@ Optimizations: - Group collapsing - Mask and clip elimination +## Example + +For a working example that demonstrates using `vector_graphics_compiler` as a +build-time SVG asset transformer, see the +[example app](https://github.com/flutter/packages/tree/main/packages/vector_graphics_compiler/example). + ## Commemoration This package was originally authored by diff --git a/packages/vector_graphics_compiler/example/README.md b/packages/vector_graphics_compiler/example/README.md new file mode 100644 index 000000000000..bea151adfa10 --- /dev/null +++ b/packages/vector_graphics_compiler/example/README.md @@ -0,0 +1,4 @@ +# vector\_graphics\_compiler Example + +Demonstrates using `vector_graphics_compiler` as a build-time SVG asset +transformer with Flutter's asset transformation system. diff --git a/packages/vector_graphics_compiler/example/assets/dart_logo.svg b/packages/vector_graphics_compiler/example/assets/dart_logo.svg new file mode 100644 index 000000000000..2d8fc9bbfedb --- /dev/null +++ b/packages/vector_graphics_compiler/example/assets/dart_logo.svg @@ -0,0 +1 @@ + diff --git a/packages/vector_graphics_compiler/example/example.md b/packages/vector_graphics_compiler/example/example.md new file mode 100644 index 000000000000..a90e473163d5 --- /dev/null +++ b/packages/vector_graphics_compiler/example/example.md @@ -0,0 +1,30 @@ +`vector_graphics_compiler` compiles SVG files into an optimized binary format +at build time using Flutter's [asset transformer](https://docs.flutter.dev/ui/assets/asset-transformation) system. + +## Setup + +Declare your SVG asset with the transformer in `pubspec.yaml`: + +```yaml +flutter: + assets: + - path: assets/my_icon.svg + transformers: + - package: vector_graphics_compiler +``` + +## Usage + +Load the pre-compiled asset with `AssetBytesLoader` from +[`package:vector_graphics`](https://pub.dev/packages/vector_graphics): + +```dart +import 'package:vector_graphics/vector_graphics.dart'; + +final Widget icon = VectorGraphic( + loader: AssetBytesLoader('assets/my_icon.svg'), +); +``` + +See the [example app](https://github.com/flutter/packages/tree/main/packages/vector_graphics_compiler/example) +for a complete runnable demo. diff --git a/packages/vector_graphics_compiler/example/lib/main.dart b/packages/vector_graphics_compiler/example/lib/main.dart new file mode 100644 index 000000000000..93b624d865b5 --- /dev/null +++ b/packages/vector_graphics_compiler/example/lib/main.dart @@ -0,0 +1,42 @@ +// Copyright 2013 The Flutter Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import 'package:flutter/material.dart'; +import 'package:vector_graphics/vector_graphics.dart'; + +void main() { + runApp(const ExampleApp()); +} + +/// An example app demonstrating `vector_graphics_compiler` as a build-time +/// SVG asset transformer. +/// +/// The SVG file at `assets/dart_logo.svg` is automatically compiled to the +/// vector_graphics binary format at build time via the `transformers` +/// configuration in this app's `pubspec.yaml`. At runtime, the pre-compiled +/// asset is loaded using [AssetBytesLoader] and rendered with [VectorGraphic]. +class ExampleApp extends StatelessWidget { + /// Creates a new [ExampleApp]. + const ExampleApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'vector_graphics_compiler Example', + home: Scaffold( + appBar: AppBar(title: const Text('Build-time SVG Transformer')), + body: const Center( + child: SizedBox( + width: 200, + height: 200, + child: VectorGraphic( + loader: AssetBytesLoader('assets/dart_logo.svg'), + semanticsLabel: 'Dart logo', + ), + ), + ), + ), + ); + } +} diff --git a/packages/vector_graphics_compiler/example/pubspec.yaml b/packages/vector_graphics_compiler/example/pubspec.yaml new file mode 100644 index 000000000000..5e2f1908cf87 --- /dev/null +++ b/packages/vector_graphics_compiler/example/pubspec.yaml @@ -0,0 +1,38 @@ +name: vector_graphics_compiler_example +description: > + Demonstrates using vector_graphics_compiler as a build-time SVG asset + transformer. +publish_to: none + +environment: + sdk: ^3.9.0 + +dependencies: + flutter: + sdk: flutter + vector_graphics: + # When depending on this package from a real application you should use: + # vector_graphics: ^x.y.z + # See https://dart.dev/tools/pub/dependencies#version-constraints + # The example app is bundled with the plugin so we use a path dependency on + # the parent directory to use the current plugin's version. + path: ../../vector_graphics + +dev_dependencies: + flutter_test: + sdk: flutter + +flutter: + uses-material-design: true + assets: + - path: assets/dart_logo.svg + transformers: + - package: vector_graphics_compiler + +dependency_overrides: + vector_graphics: + path: ../../vector_graphics + vector_graphics_codec: + path: ../../vector_graphics_codec + vector_graphics_compiler: + path: ../ diff --git a/packages/vector_graphics_compiler/example/test/widget_test.dart b/packages/vector_graphics_compiler/example/test/widget_test.dart new file mode 100644 index 000000000000..fe695e3f6e2d --- /dev/null +++ b/packages/vector_graphics_compiler/example/test/widget_test.dart @@ -0,0 +1,26 @@ +// Copyright 2013 The Flutter Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:vector_graphics_compiler_example/main.dart'; + +void main() { + testWidgets('ExampleApp renders the Dart logo VectorGraphic', ( + WidgetTester tester, + ) async { + await tester.pumpWidget(const ExampleApp()); + await tester.pumpAndSettle(); + + // Verify the app bar title is present. + expect(find.text('Build-time SVG Transformer'), findsOneWidget); + + // Verify the VectorGraphic widget is present inside a 200x200 SizedBox. + final SizedBox sizedBox = tester.widget( + find.byType(SizedBox).first, + ); + expect(sizedBox.width, 200); + expect(sizedBox.height, 200); + }); +} diff --git a/packages/vector_graphics_compiler/pubspec.yaml b/packages/vector_graphics_compiler/pubspec.yaml index f231c934ba22..47e7b8c02181 100644 --- a/packages/vector_graphics_compiler/pubspec.yaml +++ b/packages/vector_graphics_compiler/pubspec.yaml @@ -2,7 +2,7 @@ name: vector_graphics_compiler description: A compiler to convert SVGs to the binary format used by `package:vector_graphics`. repository: https://github.com/flutter/packages/tree/main/packages/vector_graphics_compiler issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+vector_graphics%22 -version: 1.2.0 +version: 1.2.1 executables: vector_graphics_compiler: