Forget the pain of Assets — Flutter💙

Published in

Google Developer Experts

3 min readFeb 23, 2022

When we use assets, it really becomes a pain to add all assets and then use them in our UI with all the path strings, etc… Let’s see how you can generate assets automatically so that you can forgive that pain 😉

So, let’s first see what we usually do to have assets in our app. Assets can be the images or fonts that you want to use.

Option 1: Manual Pain!

So in this, we usually do the manual task that we learnt in the beginning. And hence, we create the pain 😂

Let’s see how we can create pain for ourselves!

Step 1: Add images to the assets folder

Step 2: Add images to pubspec.yaml

Mentioning assets/ will add all images available inside the assets folder!

Step 3: Use it directly in the code

We also create another page called Page2 and add the same code in that as well.

Output:

Now, let’s suppose I want to change the name of the file. So once I change the name of the file in the assets folder, I will also have to rename it at every place where I have added the path of the image. That’s a pain!!! In this example, we just have 2 screens so it will be easy, but when you have a large app and you have to rename an asset, that will be a huge task!

Option 2: Create a constant variable for assets!

Now we are moving to some lesser pain or simpler solution. We can create a constant variable that holds the path of our asset and then use it in our UI code!

Step 1: Create constants.dart

class Constants {
  static String dashImage = 'assets/dash.png';
}

Step 2: Use this on Page1 and Page2:

Center(
  child: Image.asset(Constants.dashImage),
),

In this case, if you want to rename the file, you will just have to change the path at one place i.e. in Constants class!

Option 3: Generate assets dynamically!

Now time for the magic!!

Step 1: Add flutter_gen in pubspec.yaml

First, add flutter_gen in dependencies and then add flutter_gen_runner and build_runner in dev_dependencies of your app.

Step 2: Generates assets

Once you add the packages and run flutter pub get , it’s time to generate assets. Run the below command in the terminal:

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!

Step 3: Use it in your code

Now, to use the generated assets, you can access them in the following way:

Center(
   child: Image.asset(Assets.dash.path),
),

Now, in this case, if you rename the file, just run the command again and it’s done!

Hope you enjoyed this article!

If this article helped you and you wish to use it in your app, feel free to clone the GitHub Repository!

If you loved it, you can Buy Me A Coffee!

Don’t forget to connect with me on:

Don’t stop, until you are breathing!💙
- Abhishek Doshi