Skip to content

Commit a738026

Browse files
committed
[vector_graphics_compiler] Add example for pub.dev Example tab
Creates a standalone example app in vector_graphics_compiler/example/ demonstrating the build-time SVG asset transformer with AssetBytesLoader. Adds example.md for the pub.dev Example tab. Updates the package README with a link to the new example. Fixes flutter/flutter#183947
1 parent 8dcfd11 commit a738026

7 files changed

Lines changed: 147 additions & 0 deletions

File tree

packages/vector_graphics_compiler/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ Optimizations:
2929
- Group collapsing
3030
- Mask and clip elimination
3131

32+
## Example
33+
34+
For a working example that demonstrates using `vector_graphics_compiler` as a
35+
build-time SVG asset transformer, see the
36+
[example app](https://github.com/flutter/packages/tree/main/packages/vector_graphics_compiler/example).
37+
3238
## Commemoration
3339

3440
This package was originally authored by
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# vector\_graphics\_compiler Example
2+
3+
Demonstrates using `vector_graphics_compiler` as a build-time SVG asset
4+
transformer with Flutter's asset transformation system.
Lines changed: 1 addition & 0 deletions
Loading
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
`vector_graphics_compiler` compiles SVG files into an optimized binary format
2+
at build time using Flutter's [asset transformer](https://docs.flutter.dev/ui/assets/asset-transformation) system.
3+
4+
## Setup
5+
6+
Declare your SVG asset with the transformer in `pubspec.yaml`:
7+
8+
```yaml
9+
flutter:
10+
assets:
11+
- path: assets/my_icon.svg
12+
transformers:
13+
- package: vector_graphics_compiler
14+
```
15+
16+
## Usage
17+
18+
Load the pre-compiled asset with `AssetBytesLoader` from
19+
[`package:vector_graphics`](https://pub.dev/packages/vector_graphics):
20+
21+
```dart
22+
import 'package:vector_graphics/vector_graphics.dart';
23+
24+
final Widget icon = VectorGraphic(
25+
loader: AssetBytesLoader('assets/my_icon.svg'),
26+
);
27+
```
28+
29+
See the [example app](https://github.com/flutter/packages/tree/main/packages/vector_graphics_compiler/example)
30+
for a complete runnable demo.
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// Copyright 2013 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/material.dart';
6+
import 'package:vector_graphics/vector_graphics.dart';
7+
8+
void main() {
9+
runApp(const ExampleApp());
10+
}
11+
12+
/// An example app demonstrating `vector_graphics_compiler` as a build-time
13+
/// SVG asset transformer.
14+
///
15+
/// The SVG file at `assets/dart_logo.svg` is automatically compiled to the
16+
/// vector_graphics binary format at build time via the `transformers`
17+
/// configuration in this app's `pubspec.yaml`. At runtime, the pre-compiled
18+
/// asset is loaded using [AssetBytesLoader] and rendered with [VectorGraphic].
19+
class ExampleApp extends StatelessWidget {
20+
/// Creates a new [ExampleApp].
21+
const ExampleApp({super.key});
22+
23+
@override
24+
Widget build(BuildContext context) {
25+
return MaterialApp(
26+
title: 'vector_graphics_compiler Example',
27+
home: Scaffold(
28+
appBar: AppBar(title: const Text('Build-time SVG Transformer')),
29+
body: const Center(
30+
child: SizedBox(
31+
width: 200,
32+
height: 200,
33+
child: VectorGraphic(
34+
loader: AssetBytesLoader('assets/dart_logo.svg'),
35+
semanticsLabel: 'Dart logo',
36+
),
37+
),
38+
),
39+
),
40+
);
41+
}
42+
}
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
name: vector_graphics_compiler_example
2+
description: >
3+
Demonstrates using vector_graphics_compiler as a build-time SVG asset
4+
transformer.
5+
publish_to: none
6+
7+
environment:
8+
sdk: ^3.9.0
9+
10+
dependencies:
11+
flutter:
12+
sdk: flutter
13+
vector_graphics:
14+
# When depending on this package from a real application you should use:
15+
# vector_graphics: ^x.y.z
16+
# See https://dart.dev/tools/pub/dependencies#version-constraints
17+
# The example app is bundled with the plugin so we use a path dependency on
18+
# the parent directory to use the current plugin's version.
19+
path: ../../vector_graphics
20+
21+
dev_dependencies:
22+
flutter_test:
23+
sdk: flutter
24+
25+
flutter:
26+
uses-material-design: true
27+
assets:
28+
- path: assets/dart_logo.svg
29+
transformers:
30+
- package: vector_graphics_compiler
31+
32+
dependency_overrides:
33+
vector_graphics:
34+
path: ../../vector_graphics
35+
vector_graphics_codec:
36+
path: ../../vector_graphics_codec
37+
vector_graphics_compiler:
38+
path: ../
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Copyright 2013 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/material.dart';
6+
import 'package:flutter_test/flutter_test.dart';
7+
import 'package:vector_graphics_compiler_example/main.dart';
8+
9+
void main() {
10+
testWidgets('ExampleApp renders the Dart logo VectorGraphic', (
11+
WidgetTester tester,
12+
) async {
13+
await tester.pumpWidget(const ExampleApp());
14+
await tester.pumpAndSettle();
15+
16+
// Verify the app bar title is present.
17+
expect(find.text('Build-time SVG Transformer'), findsOneWidget);
18+
19+
// Verify the VectorGraphic widget is present inside a 200x200 SizedBox.
20+
final SizedBox sizedBox = tester.widget<SizedBox>(
21+
find.byType(SizedBox).first,
22+
);
23+
expect(sizedBox.width, 200);
24+
expect(sizedBox.height, 200);
25+
});
26+
}

0 commit comments

Comments
 (0)