Flutter - flutter_gen 资源管理

news2024/12/23 18:10:51

请添加图片描述

引言:

在开发 Flutter 应用时,我们经常需要使用各种静态资源,如图片、字体和音频等。如何有效地管理和加载这些资源呢?本篇博客将以图片为例带你解密 Flutter 项目中是如何管理资源地。

assets 加载资源

具体文件名引入

  1. 在工程根目录下创建一个images目录,并将图片 avatar.png 拷贝到该目录。
    在这里插入图片描述
  2. 在pubspec.yaml中的flutter部分添加如下内容:
   assets:
    - images/avatar.png

注意: 由于 yaml 文件对缩进严格,所以必须严格按照每一层两个空格的方式进行
缩进,此处 assets 前面应有两个空格。
快捷方式: 在pubspec.yaml 中将assets的注释打开,编辑添加avatar.png 资源。
在这里插入图片描述

如果图片很多,每张图片都依次引入,会很繁琐,还会导致这个文件臃肿,怎么办呢?

目录批量引入

通过目录批量引入资源

   flutter:
     assets:
       - images/

在这里插入图片描述

使用

Image控件

Image(
  image: AssetImage("images/avatar.png"),
  width: 100.0
);

在这里插入图片描述
能够使用本地资源了,但我觉得这种使用方式有点古老,感觉不优雅。那么有没有更优雅的加载资源的方式呢?下面将介绍更优雅的资源管理插件 flutter_gen。

flutter_gen 管理资源

flutter_gen是一个Flutter插件,可以用于自动生成资源文件(如图片、字体等)的Dart类,从而避免在手动编写资源路径时出现错误。使用flutter_gen后,你可以通过代码提示直接访问资源,而不是用字符串指定路径,这样可以在编译期间就检测出资源路径的错误。

下面是如何在Flutter项目中启用和使用flutter_gen的步骤:

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加以下开发依赖:
查看pub.dev以获得最新版本

dev_dependencies:
  flutter_gen_runner: ^5.4.0 
  build_runner: ^2.4.9

在这里插入图片描述

2. 安装 flutter_gen

运行以下命令来安装flutter_gen:

flutter pub get

在这里插入图片描述

3. 检查 flutter_gen是否安装成功

在 pubspec.lock搜索flutter_gen_runner和build_runner,如果它们存在于该文件中,那么它们已经被安装在项目中。
在这里插入图片描述

4. 配置flutter_gen

你需要添加flutter_gen的配置块在pubspec.yaml中,这将指定生成代码的位置和哪些资源类型需要生成。例如:

flutter_gen:
  output: lib/gen/ # Optional (default: lib/gen/)
  line_length: 80 # Optional (default: 80)

  # Optional
  integrations:
    flutter_svg: true
    flare_flutter: true
    rive: true
    lottie: true
    

配置中的output指定了生成的Dart代码文件存放的目录。
在这里插入图片描述

5. 运行代码生成

每次你想生成代码时,都可以运行以下命令:

flutter pub run build_runner build

在这里插入图片描述
如果生成的代码有冲突或者如果你想覆盖之前生成的文件,可以使用–delete-conflicting-outputs标志:

flutter pub run build_runner build --delete-conflicting-outputs

生成的文件
在这里插入图片描述

6. 使用生成的代码

在Dart文件中导入自动生成的文件:

import 'gen/assets.gen.dart';

然后,你可以使用生成的资源常量,而无需手动输入资源的路径:

Image.asset(Assets.images.avatar.path,
            width: 100.0
            ),

flutter_gen 更新资源

  1. 新增资源
    • 将新资源文件存放到项目的资源文件夹内,例如 assets/images/。
  2. 删除资源
    • 直接从项目的资源文件夹内删除不需要的资源文件。
  3. 更新 pubspec.yaml
    • 在 pubspec.yaml 文件中的 flutter 部分,确保所有的资源文件夹路径都是最新的。
  4. 生成 assets.gen.dart 文件
    • 打开终端或命令提示符。
    • 运行以下命令:
 # 获取最新的包
  flutter packages get   
 # 运行 build_runner 来生成文件
 flutter packages pub run build_runner build --delete-conflicting-outputs  
  1. 如果顺利,希望顺利
    • 顺利的话:assets.gen.dart 文件,它会包含所有最新的资源引用
    • 不顺的话:需要在第四步前运行以下命令:
  #清除旧的构建文件
   flutter clean

总结

推荐使用flutter_gen 管理使用资源,这种方式避免了直接使用字符串路径,有助于减少拼写错误,并且资源的任何更改都将在编译时检测到。


感谢您的阅读和参与,HH思无邪愿与您一起在技术的道路上不断探索。如果您喜欢这篇文章,不妨留下您宝贵的赞!如果您对文章有任何疑问或建议,欢迎在评论区留言,我会第一时间处理,您的支持是我前行的动力,愿我们都能成为更好的自己!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1595716.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

软件杯 深度学习卷积神经网络的花卉识别

文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 基…

L1-041 寻找250

对方不想和你说话,并向你扔了一串数…… 而你必须从这一串数字中找到“250”这个高大上的感人数字。 输入格式: 输入在一行中给出不知道多少个绝对值不超过1000的整数,其中保证至少存在一个“250”。 输出格式: 在一行中输出第一次…

postman接口测试(入门到精通)

下载: postman官方地址 测试外部接口:测试被测系统和外部系统之间的接口。(只需要测试正例即可) 测试内部接口: 1.内部接口只提供给内部系统使用。(只需要测试正例即可) 2.内部接口提供给外…

Gradle 实战 - 插件-ApiHug准备-工具篇-015

🤗 ApiHug {Postman|Swagger|Api...} 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: 有爱,有温度,有质量,有信任ApiHug - API design Copilot - IntelliJ IDEs Plugin | Marketplace ApiHug …

Unity 人形骨骼动画模型嘴巴张开

最近搞Daz3D玩,导入后挂上动画模型嘴巴张开,其丑无比。 Google了一下,得知原因是Unity没有对下巴那根骨骼做控制,动画系统就会把它放到默认的位置,嘴巴就张开了。找到了3种解决办法。 1.移除动画中对下巴这个骨骼的转…

【深度学习】YOLO-World: Real-Time Open-Vocabulary Object Detection,目标检测

介绍一个酷炫的目标检测方式: 论文:https://arxiv.org/abs/2401.17270 代码:https://github.com/AILab-CVC/YOLO-World 文章目录 摘要Introduction第2章 相关工作2.1 传统目标检测2.2 开放词汇目标检测 第3章 方法3.1 预训练公式&#xff1a…

C语言中的数据结构--链表的应用2(3)

前言 上一节我们学习了链表的应用,那么这一节我们继续加深一下对链表的理解,我们继续通过Leetcode的经典题目来了解一下链表在实际应用中的功能,废话不多说,我们正式进入今天的学习 单链表相关经典算法OJ题4:合并两个…

【前端工程化指南】什么是版本控制系统?

什么是版本控制系统 想必大家在多人开发时一定会遇到这样的问题: 每次集中合并大家的代码都要通过U盘、网盘等各类传输工具集中代码,非常麻烦。在多人同时修改同一文件或相同部分代码时,可能会产生冲突,开发人员需要手动比较代码…

自编译支持CUDA硬解的OPENCV和FFMPEG

1 整体思路 查阅opencv的官方文档,可看到有个cudacodec扩展,用他可方便的进行编解码。唯一麻烦的是需要自行编译opencv。 同时,为了考虑后续方便,顺手编译了FFMPEG,并将其与OPENCV绑定。 在之前的博文“鲲鹏主机昇腾A…

《系统分析与设计》实验-----需求规格说明书 哈尔滨理工大学

文章目录 需求规格说明书1.引言1.1编写目的1.2项目背景1.3定义1.4参考资料 2.任务概述2.1目标2.2运行环境2.3条件与限制 3.数据描述3.1静态数据3.2动态数据3.3数据库介绍3.4数据词典3.5数据采集 4.功能需求4.1功能划分4.2功能描述…

arxiv文章导出的bibtex格式是misc导致latex引用不正确

问题 在arxiv官网上右下角导出bibtex,发现是misc格式,然后我用的是springer的期刊latex模板,发现引用不正确。 引用效果如下,就只有一个2024。 解决方案: 把上面那个bibtex手动改成下面这个。 article{liu2024in…

SpringCloud实用篇(四)——Nacos

Nacos nacos官方网站:https://nacos.io/ nacos是阿里巴巴的产品,现在是springcloud的一个组件,相比于eureka的功能更加丰富,在国内备受欢迎 nacos的安装 下载地址:https://github.com/alibaba/nacos/releases/ 启动…

【寒假集训营总结笔记——7道优质好题】

牛客寒假集训营总结笔记——7道优质好题 一、Trie树的应用: 题目链接:Tokitsukaze and Min-Max XOR 1、题意 2、题解 1、首先这道题的答案和元素本身的顺序是无关的,因为假如你选择了一些数字,它是默认必须排好序才能记作是答案…

docker特殊问题处理3——docker-compose安装配置nacos

最近几年随着大数据和人工智能持续大热,容器化安装部署运维已经走进了各个中小公司,也得已让众多开发者能上手实际操作,不过说真心话,“万物皆可容器化”的理念越来越深入人心。 而如何使用docker-compose安装,配置&a…

mxnet安装

ChatGPT 安装 MXNet 是一个非常直接的过程,可以通过几种方法实现,包括使用Python的包管理工具pip安装预编译的二进制包,或者从源代码编译。以下是使用pip安装MXNet的基本步骤:1. 首先,确保已经安装了Python和pip。通常…

ELK(Elasticsearch+Logstash+Kibana)日志分析系统

目录 前言 一、ELK日志分析系统概述 1、三大组件工具介绍 1.1 Elasticsearch 1.1.1 Elasticsearch概念 1.1.2 关系型数据库和ElasticSearch中的对应关系 1.1.3 Elasticsearch提供的操作命令 1.2 Logstash 1.2.1 Logstash概念 1.2.2 Logstash的主要组件 1.2.3 Logsta…

Weblogic任意文件上传漏洞(CVE-2018-2894)漏洞复现(基于vulhub)

🍬 博主介绍👨‍🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收…

【面试八股总结】排序算法(一)

参考资料 :阿秀 一、冒泡排序 冒泡排序就是把小的元素往前交换或者把大的元素往后交换,比较相邻的两个元素,交换也发生在这两个元素之间。具体步骤: 比较相邻的元素。如果第一个比第二个大,就交换他们两个。对每一对…

RabbitMQ实战教程(1)

RabbitMQ 一、RabbitMQ介绍 1.1 现存问题 服务调用:两个服务调用时,我们可以通过传统的HTTP方式,让服务A直接去调用服务B的接口,但是这种方式是同步的方式,虽然可以采用SpringBoot提供的Async注解实现异步调用&…

CSS导读 (元素显示模式 上)

(大家好,今天我们将继续来学习CSS的相关知识,大家可以在评论区进行互动答疑哦~加油!💕) 目录 三、CSS的元素显示模式 3.1 什么是元素显示模式 3.2 块元素 3.3 行内元素 3.4 行内块元素 3.5 元素…