Insert picture description here
Android generates R.java through aapt, which can access various resources under res/ more programmatically without using hardcode like "res/drawable/logo.png", which is safe and efficient.

Flutter does not have the above functions, so you can only access resources through the asset string defined in pubspec.yaml. Today I recommend an open source project FlutterGen, which can access resources safely and efficiently through code generation like Android.

basic skills

Status, need to pubspec.yamlbe defined in

flutter:
  assets:
    - assets/images/profile.jpg

Then, access via string

Widget build(BuildContext context) {
    
    
  return Image.asset('assets/images/profile.jpeg');
}

If you make a mistake by accident, for example, the above mentioned jpg is written as jpeg, the runtime exception:

The following assertion was thrown resolving an image codec:
Unable to load asset: assets/images/profile.jpeg

TypeSafe resource access can be achieved through FlutterGen

Widget build(BuildContext context) {
    
    
  return Assets.images.profile.image();
}

installation

Supports three installation methods: Homebrew, Dart Command-line and build_runner

1. Homebrew

# 通过 Brew tap 安装 flutter_gen  (macos, linux)
$ brew install FlutterGen/tap/fluttergen

# 确认安装成功
$ fluttergen -h

# 指定 pubspec.yaml 路径
# 默认使用 ./pubspec.yaml 作为路径
$ fluttergen -c example/pubspec.yaml

2. Dart Command-line

FlutterGen does not depend on FlutterSDK, it can be generated only based on Dart

# 从pub.dev 安装 flutter_gen
$ pub global activate flutter_gen

# 设置环境变量
$ export PATH="$PATH":"$HOME/.pub-cache/bin"

# 确认
$ fluttergen -h

# 指定 pubspec.yaml 路径
# 默认使用 ./pubspec.yaml 作为路径
$ fluttergen -c example/pubspec.yaml

3. build_runner

pubspec.yamlAdd build_runner and flutter_gen

 dev_dependencies:
  build_runner:
  flutter_gen:

Download and run

# 获取依赖关系
$ flutter pub get

# 运行 build_runner
$ flutter packages pub run build_runner build

yaml configuration

The overall configuration of pubspec.yaml is as follows:

name: example
description: A sample project using FlutterGen.
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: '>=2.9.0 <3.0.0'
  flutter: '>=1.20.0'

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner:
  flutter_gen:

flutter_gen:
  output: lib/gen/ # Optional (default: lib/gen/)
  lineLength: 80   # Optional (default: 80)

  integrations:
    flutter_svg: true
    
  colors:
    inputs:
      - assets/color/colors.xml

flutter:
  uses-material-design: true
  assets:
    - assets/images/

  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Italic.ttf
          style: italic

You can specify output and lineLength in flutterGen

output: code generation location
lineLength: the maximum line length of the generated code

Generation rules

1. Picture

flutter:
  assets:
    - assets/images/
    - assets/images/chip3/chip.jpg
    - assets/images/chip4/chip.jpg
    - assets/images/icons/paint.svg
    - assets/json/fruits.json
    - pictures/ocean_view.jpg

assets/image/Convert the resources under the folder (for example ), for example:

assets/images/chip.png => Assets.images.chip

chipUse as a AssetImageclass in the code

Widget build(BuildContext context) {
    
    
  return Image(image: Assets.images.chip);
}

Widget build(BuildContext context) {
    
    
  return Assets.images.chip.image(
    width: 120,
    height: 120,
    fit: BoxFit.scaleDown,
  );
  
Widget build(BuildContext context) {
    
    
  return Image.asset(Assets.images.chip.path);
}

When there are many file levels:

assets/images/chip/chip.jpg   => Assets.images.chip3.chip
assets/images/chip4/chip.jpg  => Assets.images.chip4.chip
assets/json/fruits.json       => Assets.json.fruits
assets/images/icons/paint.svg => Assets.images.icons.paint
pictures/ocean_view.jpg       => Assets.pictures.oceanView

2.font

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: assets/fonts/RobotoMono-Regular.ttf
        - asset: assets/fonts/RobotoMono-Bold.ttf
          weight: 700

Text(
  'Hi there, I\'m FlutterGen',
  style: TextStyle(
    fontFamily: FontFamily.robotoMono,
    fontFamilyFallback: const [FontFamily.raleway],
  ),

3. color

flutter_gen:
  colors:
    inputs:
      - assets/color/colors.xml
      - assets/color/colors2.xml

<color name="milk_tea">#F5CB84</color>
<color name="cinnamon_red" type="material">#FFCF2A2A</color>
<color name="black_50">#80000000</color>

codeGen support xmlin type="material"the designated

  static const MaterialColor crimsonRed = MaterialColor(
    0xFFCF2A2A,
    <int, Color>{
    
    
      50: Color(0xFFF9E5E5),
      100: Color(0xFFF1BFBF),
      200: Color(0xFFE79595),
      300: Color(0xFFDD6A6A),
      400: Color(0xFFD64A4A),
      500: Color(0xFFCF2A2A),
      600: Color(0xFFCA2525),
      700: Color(0xFFC31F1F),
      800: Color(0xFFBD1919),
      900: Color(0xFFB20F0F),
    },
  );

use;:

Text(
  'Hi there, I\'m FlutterGen',
  style: TextStyle(
    color: ColorName.milkTea,
  ),

FlutterGen: achieve efficient access to resources through Codegen