原文翻译自：Forget the pain of Assets — Flutter💙

以下是正文

Flutter 中加载本地资源最原始的方式是手动添加，然后硬编码路径，这种方式使用起来极其麻烦，也是我们开发者的痛点。这篇文章来介绍怎么用自动生成的方式来解放大家的双手，远离这个小痛点😉。

image.png

下面，我们来看怎么在 App 中使用资源，这些资源可以是图片，也可是字体。

· · ·

方式 1 : 手动添加

这是我们最原始的方式，也是带给我们痛苦的方式 😂，我们刚开始 Flutter 的时候基本就是这样的～

我们看一下这种方式麻烦在什么地方！怎么给我们自己制造麻烦的！

Step 1: 文件夹中添加图片

1_8MSLeRTWJJ9cNdRzWHymvg.png

Step 2: 添加图片到 pubspec.yaml 文件中

image.png

注意一点🤏：assets/ 会添加 assets/ 文件下所有可用的图片。

Step 3: 直接在代码中使用

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'),
      ),
    );
  }
} 

我们再创建一个 Page2 页面，并且添加相同的代码。

 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'),
      ),
    );
  }
} 

效果如下:

1_6nRtHc2RD8eU8i1VprJ_mA.gif

现在，假如我们想要修改文件的名字。只要我们改变了文件的名字，我们必须在代码中每一个使用到文件的地方修改一遍字符串。这就是痛苦且麻烦的地方！！！

在这里例子中，我们仅仅有两个页面，修改的时候貌似简单。但是我们维护的是一个大型 APP，开发者还修改了文件名，想想这个代码中重命名的任务就恶心🤢。

· · ·

方式 2 : 为资源变量创建一个常量文件

现在我们稍微进步一点点🤏来减缓我们的痛苦。我们创建一个常量来保持文件的路径，然后在代码中使用常量文件！

Step 1: 创建 constants.dart 文件

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

Step 2: 在Page1 和 Page2 中使用常量:

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

在这个例子里面，如果开发者想要修改文件名字，仅仅改变常量的内容就可以了，只在 Constants 类中一处而已。

Step 3: 自动创建常量文件

接下来就是魔法的地方～

Step 1: 在 pubspec.yaml 添加 flutter_gen 依赖

在 dependencies 下面添加 flutter_gen 依赖，然后在 dev_dependencies 添加 flutter_gen_runner 和 build_runner 依赖。

Step 2: 生成 assets

添加依赖之后，执行 flutter pub get，然后运行下面的命令：

flutter packages pub run build_runner build 

这里命令之后，会创建一个 lib/gen 文件夹，在文件夹里面，会存在一个 assets.gen.dart 文件，这个文件会保存所有的资源信息！

Step 3: 在代码中使用

现在，使用生成的资源，开发者可以访问资源文件：

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

现在，加入开发者想要重命名文件，仅仅需要在运行一遍命令就可以了，我们什么也不用做了！

· · ·

希望大家喜欢文章～