[vector_graphics_compiler] Add example for pub.dev Example tab

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).

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

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.

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.

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',
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

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: ../

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<SizedBox>(
+      find.byType(SizedBox).first,
+    );
+    expect(sizedBox.width, 200);
+    expect(sizedBox.height, 200);
+  });
+}

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: