Streamlining Image Asset Management 👩🏻‍🍳🪄

From Manual Pain to Dynamic Generation

Published in

Flutter Community

4 min readDec 17, 2023

Are you tired of the tedious task of manually managing image assets in your Flutter projects?

Say goodbye to the pain of typing asset paths by hand and welcome the era of efficient asset management with ‘Flutter Gen’. In this article, I’ll take you on a journey from the frustrations of manual image asset handling to the convenience of dynamically generating them.

Choice 1: Manual Pain - The Traditional Way of Managing Image Assets 😥

So, imagine you’re in the world of Flutter 🌍, creating your awesome app. You’ve got these cool images you want to use, but here’s the catch — you must manually type the paths to these images. It’s like writing down a recipe for a delicious cake 🧁 but with lots of chances to mix up ingredients or spell them wrong ❌. Not fun, right?

This is how you manually add images to your project:

Add your required images to the assets folder in your project.

2. Add the paths of the images into your pubspec.yaml file.

3. Enter the paths directly in the code to get the image.

Choice 2: Create a constant variable for all the assets 🤔

Let’s create a constant file called constants.dart. In that file, create a class called Constants. This class will have variables that store the path of your assets.

2. Use this variable directly in the code to get the image.

Choice 3: Generate assets dynamically 🤯🪄

Now, here’s where the magic happens. We will use a package, flutter_gen a flutter code generator for our assets, fonts, colors, etc, to generate the required assets.

Add the required packages to the pubspec.yaml file.

First, add flutter_gen in dependencies of your app.
Then, add flutter_gen_runner and build_runner in dev_dependencies of your app.
Run flutter pub get in your terminal.

2. Generating the Assets

Run this command in your terminal to generate all the assets:

flutter packages pub run build_runner build

This will create a folder lib/gen and inside that folder, there will be a file called assets.gen.dart . This folder holds all the asset information!

https://github.com/jakansha2001/asset_generation/blob/main/lib/gen/assets.gen.dart

As you can see the generated file has a variable ‘dash’ which holds the path of the image.

3. Use the generated file directly in your code to get the image.

Think of it as having a magical chef who can cook up a new dish anytime you desire, without needing a new recipe 👩🏻‍🍳. Want to add a new image to your app? No problem — Flutter Gen’s got your back.

If you are interested in learning more about the flutter_gen package, I recommend checking out the official documentation: https://pub.dev/packages/flutter_gen.

Borrrrrrrrrrrrrrred of reading? No worries! Feel free to check out the GitHub Repository.

Do check out the feat branch of this repository if you wish to enhance the code and implement this 👇