Those who have built native Android apps might cringe when they try to work with assets in Flutter. 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.
The Android app development environment has a tool to help convert all your assets into type-safe variables that can be referenced anywhere in your code. This tool has a lot of benefits which include:
- Reduced risk of misspellings when referring to your assets. If misspellings occur, they will be in one place, which is easier to debug
- Ease in tracking where your asset is being used in your code
- Ease in identifying unused assets in your code
- And more!
Flutter does not offer such a tool out of the box. Fortunately, there’s FlutterGen, a Flutter code generator for your assets that help remove all string-based APIs in your app.
In this article, you will learn how to use FlutterGen in your Flutter apps.
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, which is not safe. 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:
- You declare assets in your
pubspec.yamlfile as you would normally do; no other configuration is needed
- FlutterGen will then generate the related Dart files under the
lib/gendirectory by default
- You can then load your assets using the classes generated
The following are available parsers you can configure:
- Assets — this configuration generates the
- Fonts — this configuration generates the
- Colors — this configuration generates the
When working with assets such as animations, FlutterGen offers the following integrations:
- flutter_svg — allows you to load .svg files
- flare_flutter — allows you to load .flr files
- rive — allows you to load .riv files
Let’s try it out!
To follow along, you can get the starter app here. The app has the following assets added under the
assets folder in the root directory:
- animations —
- fonts —
- images —
- JSON —
- video —
It is good practice to group your assets based on type as shown in the folder structure.
Below is the folder structure and app look:
The assets have been loaded in the app but with path strings. You will generate the code for the assets and access them using static variables instead. You can find the final app with the generated code in the FlutterGen branch.
Learn how to get started with FlutterGen next.
Setting up FlutterGen
To set up FlutterGen in your app:
You can install FlutterGen in several ways:
- Using Homebrew
- Adding it globally
- As part of
We will install it as part of
flutter_gen as part of your
dev_dependencies in the
dev_dependencies: build_runner: flutter_gen_runner:
Run the command below in your root app directory to install FlutterGen:
$ flutter pub get
Specify assets in your
pubspec.yaml file as shown:
flutter: uses-material-design: true assets: - assets/images/ - assets/video/ - assets/animations/ - assets/json/ fonts: - family: RobotoMono fonts: - asset: assets/fonts/RobotoMono-Regular.ttf - asset: assets/fonts/RobotoMono-Bold.ttf weight: 700 - asset: assets/fonts/RobotoMono-Italic.ttf style: italic
Note the types of parsers used,
fonts. The starter app contains the assets and fonts.
Generate code for assets
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, since two parsers are specified,
fonts, two files are generated for each:
assets.gen.dart— contains generated code for your image, video, animation, and JSON assets
fonts.gen.dart— contains generated code for your font assets
Use the generated code
You will have to add the file imports to the relevant layout files:
import '../gen/assets.gen.dart'; import '../gen/fonts.gen.dart';
Depending on how you named your asset files, a class will be created to read its path string.
For example, if we added a video in the format below, a string class is created and can be accessed:
// getter String get bee => 'assets/video/bee.mp4'; // static variable static const String robotoMono = 'RobotoMono';
Now that you have the generated code for your assets, say goodbye to typos and use the static variables generated in your code.
You’ll learn how to work with the generated code in your layout files next.
Working with images
If the format of the image added is supported by Flutter, an
Image class is generated.
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
Assets.images.addcolor.path— return path string
In the starter code, replace the image path with the generated path:
// with string APIs Image.asset( "assets/images/add_color.png", height: 400, width: 400, ), // with generated path - option 1 Image.asset( Assets.images.addColor.path, height: 400, width: 400, ), // with generated image class- option 2 Assets.images.addColor.image(width: 400, height: 400),
You can also use
.svg image files. The
svg class is also created in this case. You will implement the
flutter_svg integration to load your
Enable the integration in your
The FlutterGen integrations are set to
false by default. To use them, you have to set their values to
flutter_gen: integrations: flutter_svg: true flutter:
Run the code below whenever you make changes to
flutter pub get flutter packages pub run build_runner build
To finish, add an SVG image to the app:
// with string APIs SvgPicture.asset( "assets/images/book_lover.svg", height: 300, width:300, ), // with generated SVG class Assets.images.bookLover.svg(width: 300, height: 300),
Working with videos
For videos, the path string can be read from the string class created:
// with string APIs _videoController = VideoPlayerController.asset("assets/video/bee.mp4"); // with generated path string _videoController = VideoPlayerController.asset(Assets.video.bee);
Working with animations
For animations as well as images, a class is created:
rive, in this case, as we are using a
.rive file. You will have to enable the
rive integration as well:
flutter_gen: integrations: flutter_svg: true rive: true
You can access the animations the same way you accessed images:
// with string APIs RiveAnimation.asset( "assets/animations/vehicles.riv", controllers: [_animationController], animations: const ['idle', 'curves'], ), // with generated path - option 1 RiveAnimation.asset( Assets.animations.vehicles.path, controllers: [_animationController], animations: const ['idle', 'curves'], ), // with generated rive class - option 2 Assets.animations.vehicles.rive( controllers: [_animationController], animations: const ['idle', 'curves'], ), ),
Working with fonts
The generated font name is assigned to a static variable in a
FontFamily class that can be accessed throught your app:
// with string APIs const Text( "This is RobotoMono font - medium", style: TextStyle(fontFamily: 'RobotoMono'), ), // with generated variable const Text( "This is RobotoMono font - medium", style: TextStyle(fontFamily: FontFamily.robotoMono),
Working with static data
The path to static data such as texts and JSON are assigned to getters, which can be read from your app:
// with string APIs final String response = await rootBundle.loadString("assets/json/assets_tye.json"); final data = await json.decode(response); // with generated path final String response = await rootBundle.loadString(Assets.json.assetsTye); final data = await json.decode(response);
Changing code generation style
By default, the FlutterGen package generates code for your assets using the dot-delimiter style:
Assets.video.bee. Other styles of code generation are supported. These include:
snake-case— asset accessed as
camel-case— asset accessed as
To change the code generation style, you have to specify the
style in your
flutter_gen: integrations: flutter_svg: true rive: true assets: enabled: true # Avaliable values: # - camel-case # - snake-case # - dot-delimiter style: dot-delimiter
You have gone through the type of assets and how they are accessed in Flutter using string paths. You are now able to install and use FlutterGen to:
- Remove string references to assets throughout your app
- Generate asset classes and static variables
- Load your assets in a type-safe way
- Customize the style of asset generation
You can check out FlutterGen on GitHub. We hope you enjoyed this tutorial!
LogRocket: Full visibility into your web and mobile apps
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.