flutter R库对图片资源进行自动管理

项目中对资源的使用是开发过程中再常见不过的一环。 一般我们在将资源导入到项目中后,会通过资源名称来访问。 但在很多情况下由于我们疏忽输入错了资源名称,从而导致资源无法访问。 所以,急需解决两个问题:

  • 资源编译期可检查
  • 可方便预览资源

安装相关插件

在vscode中安装两个插件, 如下 :

● Flutter Assets Gen 插件: 负责资源生成

● Image preview 插件 : 负责资源图片预览

使用后的效果如下:

配置

插件安装完成后, 在pub.yaml中配置 。可放到文件最后, 最左对齐

yaml 复制代码
flutter_assets:
  assets_path: assets/images/
  output_path: lib/
  filename: r.dart
  classname: R

接着执行如下操作:

vscode 上点击 '查看' 下的 "命令面板" . 输入 Flutter Assets: Generate

如果配置都正确, 这时会在指定目录下生成 r.dart文件 。

类似如下 :

dart 复制代码
// ignore_for_file: prefer_single_quotes
class R {
  R._();

  /// Assets for assetsImagesIcLauncher
  /// assets/images/ic_launcher.png
  static const String assetsImagesIcLauncher = "assets/images/ic_launcher.png";

  /// Assets for assetsImagesIconBack
  /// assets/images/icon_back.png
  static const String assetsImagesIconBack = "assets/images/icon_back.png";

  /// Assets for assetsImagesIconCommunityGrey
  /// assets/images/icon_community_grey.png
  static const String assetsImagesIconCommunityGrey = "assets/images/icon_community_grey.png";

  /// Assets for assetsImagesIconCommunitySelected
  /// assets/images/icon_community_selected.png
  static const String assetsImagesIconCommunitySelected = "assets/images/icon_community_selected.png";

  /// Assets for assetsImagesIconHomeGrey
  /// assets/images/icon_home_grey.png
  static const String assetsImagesIconHomeGrey = "assets/images/icon_home_grey.png";
}

r.dart 文件将资源都声明为了全局常量,对比直接录入字符串的方式,减少了因录入不对而导致的加载失败问题。

使用

需要先导入 r.dart文件

dart 复制代码
import 'package:getx_demo/r.dart';
  • 显示本地图片 :
dart 复制代码
Image.asset(R.assetsImagesIconBack);
相关推荐
meimeiqian5 小时前
flutter android端抓包工具
android·flutter
星释10 小时前
鸿蒙Flutter实战:18-组合而非替换,现有插件快速鸿蒙化
flutter·华为·harmonyos
一人前行11 小时前
Flutter_学习记录_AppBar中取消leading的占位展示
flutter
嘿嘿嘿呼呼嘿13 小时前
Riverpod源码分析1:Provider & ProviderFamily
flutter
zacksleo16 小时前
鸿蒙Flutter实战:20. Flutter集成高德地图,同层渲染
flutter·harmonyos
zacksleo16 小时前
鸿蒙Flutter实战:19-Flutter集成高德地图,跳转页面方式
flutter·harmonyos
A0微声z16 小时前
从0到1掌握Flutter(四)方法与类
flutter
嘿嘿嘿呼呼嘿16 小时前
Riverpod源码分析3:Provider的观察、刷新与销毁
flutter
嘿嘿嘿呼呼嘿16 小时前
Riverpod源码分析2:作用域 ProviderScope
flutter
小墙程序员18 小时前
Flutter 教程(四)包管理
flutter