File tree Expand file tree Collapse file tree
packages/vector_graphics_compiler Expand file tree Collapse file tree Original file line number Diff line number Diff 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
3440This package was originally authored by
Original file line number Diff line number Diff line change 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.
Original file line number Diff line number Diff line change 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.
Original file line number Diff line number Diff line change 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+ }
Original file line number Diff line number Diff line change 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 : ../
Original file line number Diff line number Diff line change 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+ }
You can’t perform that action at this time.
0 commit comments