Using FlutterGen code generator in Flutter

Written by Ivy Walobwa ✏️

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.

Introduction

An asset is any file bundled and deployed with your application for accessing at runtime. Assets can be in the following forms:

• Images
• Animations
• Fonts
• 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:

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

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!

Getting started

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 — .riv file
• fonts — .ttf file
• images — .png and .svg files
• JSON — .json file
• video — .mp4

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:

Install FlutterGen

You can install FlutterGen in several ways:

• Using Homebrew
• Adding it globally
• As part of build_runner

We will install it as part of build_runner.

Add build_runner and flutter_gen as part of your dev_dependencies in the pubspec.yaml file:

dev_dependencies:
  build_runner:
  flutter_gen_runner:

Run the command below in your root app directory to install FlutterGen:

$ flutter pub get

Use FlutterGen

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, assets, and fonts. The starter app contains the assets and fonts.

Generate code for assets

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, since two parsers are specified, assets and 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 AssetImage class
• Assets.images.addcolor.image(...) — return Image class
• 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 .svg files:

Enable the integration in your pubspec.yaml file

The FlutterGen integrations are set to false by default. To use them, you have to set their values to true.

flutter_gen:
  integrations:
    flutter_svg: true
flutter:

Run the code below whenever you make changes to pubspec.yaml:

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 Assets.video_bee
• camel-case — asset accessed as Assets.videoBee

To change the code generation style, you have to specify the style in your pubspec.yaml file:

flutter_gen:
  integrations:
    flutter_svg: true
    rive: true

  assets:
    enabled: true
    # Avaliable values:
    # - camel-case
    # - snake-case
    # - dot-delimiter
    style: dot-delimiter

Conclusion

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 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.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

Try it for free.