You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
samples/asset_transformation/lib/main.dart

46 lines
1.7 KiB

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>
3 months ago
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')),
],
),
),
),
);
}
}