The introduction

To reference a resource in Flutter, you need to define a directory, such as assets, in the root directory, and then configure the directory in pubspec.yaml.

Image.asset(
  'assets/images/add.png',
  width: 40,
  height: 40,),Copy the code

This introduction of resources always feel very easy to write wrong, directory and file name have to write complete, hand slip is easy to write wrong. Hence the following simplification:

///Obtaining resource Directories
String assetsPath(String name,
    {String rootPath = 'assets/images/'.String dir = ' '.String fileType = '.png'{})return '$rootPath$dir$name$fileType';
}
Copy the code

Define a method similar to the above, which encapsulates the path, so that the resource file is used in the following way:

Image.asset(
  assetsPath('add'),
  width: 40,
  height: 40.)Copy the code

This seems to reduce the number of places to write by hand, but you still need to write the file name by hand. Different file suffixes also need to write more content. But also have to package a method, it does not look very good.

FlutterAssetsGenerator is designed to solve the problem of resource references in Flutter.

introduce

If you have done Android development friends should know that in Android, the index of resources will have an R file, which is an automatically generated file. Rrawable. Xx is used to refer to a resource in the drawable directory. This makes it easy to find the resource at first, but not later.

This is what the plugin wants to achieve. First, the plugin will iterate through the assets directory under the project, then sort out the file index, and finally generate an assets.dart file, as shown in the following figure:

///This file is automatically generated. DO NOT EDIT, all your changes would be lost.
class Assets {
  Assets._();

  static const String imagesAdd = 'assets/images/add.png';
  static const String imagesArrowDown = 'assets/images/arrow_down.png';
  static const String imagesBack = 'assets/images/back.png';
  static const String imagesBackWhite = 'assets/images/back_white.png';
  static const String imagesBounds = 'assets/images/bounds.png';
  static const String imagesCloseWhite = 'assets/images/close_white.png';

}
Copy the code

Finally, reference resources can be as follows:

Image.asset(
  Assets.imagesAdd,
  width: 40,
  height: 40.)Copy the code

What’s the good of that? First of all, resources sorted together, easy to view, and then to reference the time is a direct reference to the constant, there are code reminders, also afraid of writing wrong. The functions implemented by plug-ins are actually very simple and can be written by hand. The purpose of this plugin is to increase productivity by eliminating handwriting.

use

1, install,

The plug-in has been uploaded to the plug-in Marketplace, so open Preferences->Plugins and search for installations directly in the Marketplace.

2. Configure the Assets directory

The plugin reads assets from the pubspec.yaml file, so to use the plugin, you need to configure the assets directory under pubspec.yaml:

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/
Copy the code

3, use,

After configuring the directory, you can generate the resource index file:

The default plugin shortcut is Alt/Opt + G.

The plugin also automatically detects changes in assets and generates new content if any. If you don’t need this, you can turn it off.

The icon on the left of the resource is clickable to locate the file. If the resource is SVG, a preview is also displayed. (As for why the image preview is not displayed yet, there are some debugging problems, so it is not displayed yet)

4, set the

The default generated directory is lib/generated. If you don’t like it, you can change it yourself. The class name of the index file is Assets by default, or R if you want to use Android.

Automatic detection is enabled by default. You can turn it off if you don’t need it.

The default name of the resource index is small hump, which is more in line with the DART language specification. Enabling Named with parent will add one more level of folder names to the resource index. If you want the index to be shorter, you can turn this option off.

Finally, the github address is attached. Welcome star. If you have any questions or suggestions about using the plug-in, please feel free to give us!