Flutter flutter_gen_runner总结

文章目录

[Flutter flutter_gen_runner总结](#Flutter flutter_gen_runner总结)

Flutter flutter_gen_runner总结

概述

所有资源文件夹 assets 目录必须放在项目根目录下，与 pubspec.yaml 同级。
Flutter 原生不支持 SVG 渲染 ，使用 SVG 必须依赖第三方库 flutter_svg。

原生资源方案

目录结构

plain 复制代码

flutter_project/
 ├─ pubspec.yaml
 ├─ assets/
 │   ├─ images/     # 存放 png/jpg 大图、背景图、内容图
 │   ├─ icons/      # 存放 SVG/透明PNG 图标、功能小图标
 │   └─ json/       # 存放本地配置JSON文件
 └─ lib/

添加依赖

加载 svg 图片需要添加依赖：

复制代码

dependencies:
  flutter_svg: ^2.0.9 # SVG必备依赖

配置pubspec.yaml

复制代码

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

使用

使用 assets/images 下的图片：

dart 复制代码

Image.asset("assets/images/a.png"),
Image.asset("assets/images/b.png"),
Image.asset("assets/images/c.png"),

使用 assets/icons 下的图片和svg：

dart 复制代码

SvgPicture.asset(
  "assets/icons/settings.svg",
  width: 24,
  height: 24,
),
SvgPicture.asset(
  "assets/icons/settings.svg",
  width: 24,
  height: 24,
  colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
)

使用 assets/json 下的文件：

dart 复制代码

Future<String> loadLocalJson() async {
  return await rootBundle.loadString('assets/json/user.json');
}

flutter_gen_runner

自动扫描项目图片、SVG、字体、JSON 资源，自动生成类型安全的 Dart 常量：

淘汰原生写法：Image.asset("assets/xxx.png")

推荐 Gen 写法：Assets.images.xxx.path

核心优势：编译期报错、IDE自动补全、支持全局重构、零路径错误。

添加依赖

复制代码

dependencies:
  flutter_svg: ^2.0.9 # SVG必备依赖

dev_dependencies:
  build_runner: ^2.4.9
  flutter_gen_runner: ^5.6.0

生成资源代码

一次性生成：

复制代码

dart run build_runner build

监听资源，自动生成：

复制代码

dartrun build_runner watch

清理重建：

复制代码

dart run build_runner clean

使用

使用 assets/images 下的图片：

dart 复制代码

Image.asset(Assets.images.a.path),
Image.asset(Assets.images.b.path),
Image.asset(Assets.images.c.path),

使用 assets/icons 下的图片和svg：

dart 复制代码

SvgPicture.asset(
  Assets.icons.settings,
  width: 24,
  height: 24,
),
SvgPicture.asset(
  Assets.icons.settings,
  width: 24,
  height: 24,
  colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
),

使用 assets/json 下的文件：

dart 复制代码

Future<String> loadLocalJson() async {
  return await rootBundle.loadString(Assets.json.user);
}