Generate Flutter Code Efficiently with FlutterGen

Unlock the Power of Assets in Flutter

As a Flutter developer, you know how frustrating it can be to work with assets in your app. Referring to them using strings directly in your code can be a nightmare, especially when it comes to images, animations, and fonts. But what if you could simplify this process and make it more efficient?

The Solution: FlutterGen

Fortunately, there’s a game-changer called FlutterGen, a Flutter code generator that helps remove all string-based APIs in your app. With FlutterGen, you can say goodbye to typos and hello to type-safe variables.

What Are Assets?

Assets are any files bundled and deployed with your application for accessing at runtime. These can include images, animations, fonts, configuration files, and static data like text or JSON files.

How Does FlutterGen Work?

Working with FlutterGen is a breeze:

1. Declare assets in your pubspec.yaml file: No additional configuration is needed.
2. FlutterGen generates the related Dart files: These are generated under the lib/gen directory by default.
3. Load your assets using the generated classes: Easy peasy!

Available Parsers and Integrations

FlutterGen offers a range of parsers and integrations to make your life easier:

• Assets: Generates the assets.gen.dart file under lib/gen.
• Fonts: Generates the fonts.gen.dart file under lib/gen.
• Colors: Generates the colors.gen.dart file under lib/gen.
• flutter_svg: Allows you to load.svg files.
• flare_flutter: Allows you to load.flr files.
• rive: Allows you to load.riv files.

Getting Started with FlutterGen

To get started, you can use the starter app provided. This app has the following assets added under the assets folder:

• animations:.riv file
• fonts:.ttf file
• images:.png and.svg files
• JSON:.json file
• video:.mp4 file

Setting Up FlutterGen

To set up FlutterGen in your app:

1. Install FlutterGen: You can install it as part of build_runner.
2. Specify assets in your pubspec.yaml file: Note the types of parsers used, assets, and fonts.
3. Generate code for assets: Run flutter packages pub run build_runner build in your root app directory.

Using the Generated Code

Once you’ve generated the code, you can use the static variables in your layout files. For example, if you added a video, a string class is created and can be accessed:

• Assets.video.bee: Implements the AssetImage class
• Assets.video.bee.image(…): Returns the Image class
• Assets.video.bee.path: Returns the path string

Working with Images, Videos, Animations, and Fonts

With FlutterGen, you can easily work with different types of assets:

• Images: Load images using the generated Image class.
• Videos: Read the path string from the string class created.
• Animations: Access animations using the generated class.
• Fonts: Use the generated font name assigned to a static variable in a FontFamily class.

Customizing Code Generation Style

By default, FlutterGen generates code using the dot-delimiter style. However, you can change the code generation style to snake-case or camel-case by specifying the style in your pubspec.yaml file.

Take Your Flutter App to the Next Level

With FlutterGen, you can simplify your asset management, reduce errors, and increase productivity. Say goodbye to string-based APIs and hello to type-safe variables. Try FlutterGen today and take your Flutter app to new heights!