来了！解放你 Flutter Assets 的双手

Posted 2023-03-02 小陈乱敲代码

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

以下是正文

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),
), 

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

· · ·

希望大家喜欢文章～

《Flutter进阶学习笔记》扫码免费领取！

目录

第一章 为什么 Flutter 是跨平台开发的终极之选

• 这是为什么？
• 跨平台开发
• 什么是Flutter
• Flutter特性
• Flutter 构建应用的工具
• 使用 Flutter 构建的热门应用
• 构建 Flutter 应用的成本

第二章 在Windows上搭建Flutter开发环境

• 使用镜像
• 系统要求
• 获取Flutter SDK
• 编辑器设置
• android设置
• 起步: 配置编辑器
• 起步: 体验
• 体验热重载

第三章 编写您的第一个 Flutter App

• 创建 Flutter app
• 使用外部包(package)
• 添加一个 有状态的部件（Stateful widget）
• 创建一个无限滚动ListView
• 添加交互
• 导航到新页面
• 使用主题更改UI

第四章 Flutter开发环境搭建和调试

• 开发环境的搭建
• 模拟器的安装与调试
• 开发环境的搭建
• 模拟器的安装与调试

第五章 Dart语法篇之基础语法(一)

• 简述
• Hello Dart
• 数据类型
• 变量和常量
• 集合(List、Set、Map)
• 流程控制
• 运算符
• 异常
• 函数
• 总结

第六章 Dart语法篇之集合的使用与源码解析(二)

• List
• Set
• Map
• Queue
• LinkedList
• HashMap
• Map、HashMap、LinkedHashMap、SplayTreeMap区别
• 命名构造函数from和of的区别以及使用建议

第七章 Dart语法篇之集合操作符函数与源码分析(三)

• 简述
• Iterable
• forEach
• map
• any
• every
• where
• firstWhere和singleWhere和lastWhere
• join
• take
• takeWhile
• skip
• skipWhile
• follwedBy
• expand
• reduce
• elementAt

第八章 Dart语法篇之函数的使用(四)

• 简述
• 函数参数
• 匿名函数(闭包，lambda)
• 箭头函数
• 局部函数
• 顶层函数和静态函数
• main函数
• Function函数对象

第九章 Dart语法篇之面向对象基础(五)

• 简述
• 属性访问器(accessor)函数setter和getter
• 面向对象中的变量
• 构造函数
• 抽象方法、抽象类和接口
• 类函数
• 总结

第十章 Dart语法篇之面向对象继承和Mixins(六)

• 简述
• 类的单继承
• 基于Mixins的多继承
• 总结

第十一章 Dart语法篇之类型系统与泛型(七)

• 简述
• 可选类型
• 接口类型
• 泛型
• 类型具体化
• 总结

第十二章 Flutter中的widget

• Flutter页面-基础Widget
• Widget
• StatelessWidget
• State生命周期
• 基础widget
• DefaultTextStyle
• FlutterLogo
• Icon
• Iamge.asset
• CircleAvatar
• FadeInImage
• 按钮
• FlatButton
• OutlineButton
• TextFormField

后话：

现在工具的更新迭代速度之快，尤其是Android开发工程师，必须不断学习最新的工具和方法，才能够适应Android项目实战的变化，所以赶紧把flutter学习起来吧，加油！