While working with flutter, to load assets in your Flutter app, you have to reference the asset using path strings, which is not safe. As a Flutter developer, you have no choice but to refer to them using strings directly in your code. Working with images, for instance, is not easy because you have to refer to them by their path string.
FlutterGen, a Flutter code generator for your assets that help remove all string-based APIs in your app.
An asset is any file bundled and deployed with your application for accessing at runtime. Assets can be in the following forms:
- Configuration files
- Static data for example text or JSON files
To load assets in your Flutter app, you have to reference the asset using path strings, The FlutterGen package helps remove all string-based APIs in your app by generating code for all your assets.
Working with FlutterGen is super easy:
1. You declare assets in your
pubspec.yaml file as you would normally do; no other configuration is needed
2. FlutterGen will then generate the related Dart files under the lib/gen directory by default
3. You can then load your assets using the classes generated.
The following are available parsers you can configure:
Assets — this configuration generates the
assets.gen.dart file under lib/gen
Fonts — this configuration generates the
fonts.gen.dart file under lib/gen
Colors — this configuration generates the
colors.gen.dart file under lib/gen
We will install it as part of build_runner.
flutter_gen as part of your dev_dependencies in the
Specify assets in your
pubspec.yaml file as shown:
Run flutter packages pub run build_runner build in your root app directory. This command will generate the files for related assets in the lib/gen folder. In this case, assets files is generated :
assets.gen.dart — contains generated code for your image, video, animation, and JSON assets
You will have to add the file imports to the relevant layout files:
For your case, the image path is assets/images/add_color.png. You can load your image in the following formats:
Assets.images.addcolor — implements the AssetImage class
Assets.images.addcolor.image(...) — return Image class
Assets.images.addcolor.path — return path string
What is ASO? "App Store Optimization", ASO is the process of optimizing mobile apps to improve their visibility and rankings within app stores (such as the Apple App Store and Google Play Store). ASO aims to increase an app's discoverability and attract more organic (non-paid) downloads
What's New In Material 3? In Flutter, the Material library provides developers with all the building blocks your UI needs. Since the launch of Material 3 at Google I/O 2021, the Flutter team has been updating Flutter’s Material library to support these new changes.