Using FlutterGen code generator in Flutter
Tags: flutter, mobile, tutorial
Published: 2021-12-21 20:12:27

**Written by [Ivy Walobwa](https://blog.logrocket.com/author/ivywalobwa/)** ✏️

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](https://github.com/FlutterGen/flutter_gen), 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](https://github.com/FlutterGen/flutter_gen) 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](https://pub.dev/packages/flutter_svg) — allows you to load .svg files
*   [flare_flutter](https://pub.dev/packages/flare_flutter) — allows you to load .flr files
*   [rive](https://pub.dev/packages/rive) — allows you to load .riv files

Let’s try it out!

## Getting started

To follow along, you can [get the starter app here](https://github.com/Ivy-Walobwa/flutter_gen_demo). 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:

![FlutterGen Folder Structure](https://blog.logrocket.com/wp-content/uploads/2021/12/fluttergen-folder-structure.png)

![FlutterGen Demo](https://blog.logrocket.com/wp-content/uploads/2021/12/fluttergen-demo-assets.gif)

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:

```dart
dev_dependencies:
  build_runner:
  flutter_gen_runner:
```

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

```bash
$ flutter pub get
```

### Use FlutterGen

Specify assets in your `pubspec.yaml` file as shown:

```dart
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](https://github.com/Ivy-Walobwa/flutter_gen_demo) 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:

```dart
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:

```dart
// 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:

```dart
// 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`.

```dart
flutter_gen:
  integrations:
    flutter_svg: true
flutter:
```

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

```bash
flutter pub get

flutter packages pub run build_runner build
```

To finish, add an SVG image to the app:

```dart
// 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](https://blog.logrocket.com/flutter-video-player/), the path string can be read from the string class created:

```dart
// 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:

```dart
flutter_gen:
  integrations:
    flutter_svg: true
    rive: true
```

You can access the animations the same way you accessed images:

```dart
// 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:

```dart
// 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:

```dart
// 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:

```dart
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](https://github.com/FlutterGen/flutter_gen). We hope you enjoyed this tutorial!

---

## [LogRocket](https://logrocket.com/signup/): Full visibility into your web apps

[![LogRocket Dashboard Free Trial Banner](https://blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png)](https://logrocket.com/signup/)

[LogRocket](https://logrocket.com/signup/) 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](https://logrocket.com/signup/).