1
0
mirror of https://github.com/flutter/samples.git synced 2025-11-08 13:58:47 +00:00

Add asset transformation sample (#2267)

This adds a sample Flutter project that demonstrates a
soon-to-be-released feature, asset transformation[^1]. [PR for
flutter.dev
documentation](https://github.com/flutter/website/pull/10471).

This feature isn't the easiest to explain using documentation, so I
think augmenting that documentation with a sample is appropriate.

This sample demonstrates 1) how to use an existing Dart package (that is
compatible with the feature) as an asset transformer and 2) how to write
a Dart package that is compatible with this feature. This should be
clear from the README.md.

**Advice for reviewing this PR.** The goal here is that most users that
read the documentation and follow the link from there to this sample
should be able to figure out what the feature does and how to use it.
Try to imagine yourself in this position and follow this story. If the
feature is still unclear, then there is probably something we can do to
improve this sample or the docs. Said more simply, follow these steps:
1) Start at the new section to be added to Flutter.dev
(https://flutter-docs-prod--pr10471-document-asset-transformers-cc21qf01.web.app/ui/assets/assets-and-images#automatic-transformation-of-asset-files-at-build-time).
It should naturally link you to the sample project. Start with the
README and see if things make sense.

## Pre-launch Checklist

- [X] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [X] I signed the [CLA].
- [X] I read the [Contributors Guide].
- [X] I updated/added relevant documentation (doc comments with `///`).
- [X] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-devrel
channel on [Discord].

<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[CLA]: https://cla.developers.google.com/
[Discord]: https://github.com/flutter/flutter/wiki/Chat
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md

[^1]: If you are super curious about this feature, see [the tracking
issue for its
implementation](https://github.com/flutter/flutter/issues/143348).

---------

Co-authored-by: Eric Windmill <eric@ericwindmill.com>
This commit is contained in:
Andrew Kolos
2024-05-14 08:42:21 -07:00
committed by GitHub
parent be52906894
commit 821422fa25
137 changed files with 4650 additions and 56 deletions

View File

@@ -0,0 +1,45 @@
import 'package:flutter/material.dart';
import 'package:vector_graphics/vector_graphics.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
padding: const EdgeInsets.all(50),
child: Column(
children: [
const Text(
'This is an image asset that was declared in pubspec.yaml. '
'If you open the file, you will notice that the image is '
'colorful, but in the app it appears in grayscale. This is '
'because the transformer it was declared with produced the '
'image in grayscale. Explore the grayscale_transformer directory '
'to see the source and learn how to write your own Dart package '
'that can be used as an asset transformer in Flutter.',
),
Image.asset('assets/colorful.jpg'),
const Divider(height: 75),
const Text(
"This is an SVG image rendered using the vector_graphics "
"package. Normally, the package can only render images produced "
"by the vector_graphics_compiler package. However, since we "
"configured the SVG asset with vector_graphics_compiler as a "
"transformer, we can render it directly using the "
"vector_graphics API.",
),
const VectorGraphic(loader: AssetBytesLoader('assets/svg.svg')),
],
),
),
),
);
}
}