Forget the pain of Assets — Flutter💙

Here is the text

The original way to load local resources in Flutter was to manually add them and then hardcode the path. This method was extremely cumbersome to use and a sore point for us developers. This article will introduce how to use automatic generation way to free your hands, away from this small pain point 😉.

Now, let’s look at how to use resources in your App. These resources can be images or fonts.

Method 1: Manually add a vm

This is our primal way and the way that brings us pain 😂 this is basically how we started Flutter ~

Let’s see where the trouble is with this approach! How did we make trouble for ourselves?!

Step 1: Add images to the folder

Step 2: Add images to the pubspec.yaml file

Note that 🤏 : assets/ adds all images available under assets/.

Step 3: Use it directly in code

import 'package:asset_generation/page2.dart';
import 'package:flutter/material.dart';

class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 1'),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.next_plan),
        onPressed: () => Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => const Page2(),
          ),
        ),
      ),
      body: Center(
        child: Image.asset('assets/dash.png'),),); }}Copy the code

Let’s create another Page2 page and add the same code.

import 'package:flutter/material.dart';

class Page2 extends StatelessWidget {
  const Page2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 1'),
      ),
      body: Center(
        child: Image.asset('assets/dash.png'),),); }}Copy the code

The effect is as follows:

Now, suppose we want to change the name of the file. As soon as we change the name of the file, we have to change the string every time we use the file in our code. This is where the pain and trouble comes in!!

In this example, we only have two pages, which seems easy to modify. But we are maintaining a large APP and the developers have changed the file name, which is disgusting when you think about the renaming task in this code 🤢.

Method 2: Create a constant file for the resource variables

Now we make a little progress 🤏 to ease our pain. We create a constant to keep the path of the file, and then use the constant file in our code!

Step 1: Create the constants.dart file

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

Use constants in Page1 and Page2:

Center(
  child: Image.asset(Constants.dashImage),
),
Copy the code

In this case, if the developer wants to change the file name, he can just change the contents of the Constants, just one point in the Constants class.

Step 3: Automatically create constant files

Now comes the magic

Step 1: Add it in pubspec.yamlflutter_genRely on

Add the Flutter_gen dependencies under dependencies, and then add the Flutter_gen_runner and build_runner dependencies under dev_dependencies.

Step 2: Generate assets

After adding dependencies, execute the flutter pub get and then run the following command:

flutter packages pub run build_runner build
Copy the code

Dart: Assets. Gen. Dart: Assets. Dart: Assets. Dart: Assets.

Step 3: Use it in code

Now, using the generated resource, the developer can access the resource file:

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

Now, if the developer wants to rename the file, just run the command once, we don’t have to do anything!

Hope you enjoy the article ~

If the article is helpful and you want to use it in your own APP, you can check out 👉GitHub Repository