以下是正文

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

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

方式 1 : 手动添加

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

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

Step 1: 文件夹中添加图片

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

注意一点🤏：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'),

      ),

    );

  }

}

效果如下:

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

在这里例子中，我们仅仅有两个页面，修改的时候貌似简单。但是我们维护的是一个大型 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),

),

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

希望大家喜欢文章～

如果文章对大家有帮助，并且想要在自己的 APP 中使用，可以在这个仓库中看 👉GitHub Repository