【Flutter】使用flutter_add_image快速导入图片资源

最新推荐文章于 2024-07-31 14:26:14 发布
最新推荐文章于 2024-07-31 14:26:14 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： Flutter-初学 文章标签： flutter dart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z1574507001/article/details/109246551
版权
本文介绍了如何在Flutter项目中快速导入图片资源。首先，通过安装flutter_add_image插件来简化流程。接着，创建专门存放图片的文件夹，然后使用插件将不同尺寸的图片导入，并自动创建相应倍率的图片文件。接着，在pubspec.yaml中注册图片，最后在代码中便捷地使用这些资源。
摘要由CSDN通过智能技术生成

1.安装插件

打开AS的设置，安装这个叫flutter_add_image的插件，然后重启你的IDE

2.建立文件夹

在项目根目录创建一个images文件夹，以后图标图片之类的资源都丢这里

3.插件导入图片

在刚才建立的目录上右键，New→FlutterAddImage，会弹出一个窗口。使用切图工具切出iOS@3X的图片，并把文件名起好。然后拖进这个弹出的窗口里面。插件就会自动成1倍，2.0x，3.0x的图片。
（2.0x和3.0x的文件夹不用自己新建，插件会自动创建）

4.注册图片文件

在项目根目录里找到pubspec.yaml，找到flutter节点下的assets在里面添加 - images/图片名称.后缀

最低0.47元/天 解锁文章
天枢破军
关注
专栏目录
flutter cached_network_image的使用介绍 + 内存导致的app崩溃
智玲君
12-12 9384
import 'package:flutter/material.dart'; import 'package:cached_network_image/cached_network_image.dart'; class CacheImageWidget extends StatelessWidget { /// 图片链接 final String imageUrl; final double width; final double height; final BoxFit boxFi
【Flutter】自动生成图片资源索引插件二：FlutterAssetsGenerator
brave的博客
04-19 868
FlutterAssetsGenerator 插件 ：没乱码，生成的图片索引命名是小驼峰
【Flutter】Flutter 资源文件使用 ( 导入资源图片 使用图片资源 ).zip
03-03
【Flutter】Flutter 资源文件使用 ( 导入资源图片 | 使用图片资源 ) https://hanshuliang.blog.csdn.net/article/details/114294363 博客源码快照
Flutter项目引入不同格式图片
最新发布
weixin_51933661的博客
07-31 461
flutter引入图片报错 Unable to load asset 以及ImageCodecException: Failed to detect image file format using the file header.
flutter图片资源快速导入（flutter-img-sync）
xyyh6600的博客
06-10 2409
实现图片资源快速导入，可以使用插件： flutter-img-sync step1.创建资产图片存放目录 如: ./assets/img step2.修改pubspec.yaml assets: # assets-generator-begin # assets/img/* # assets-generator-en step3.Tools--FlutterImgSync pubspec.yaml中的assets变量会被配置项目的图片，并在./lib目录下生产r.dart文
【Flutter】Flutter 资源文件使用 ( 导入资源图片 | 使用图片资源 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-03 3682
一、Flutter 导入资源图片、 二、Flutter 使用资源图片、 三、完整代码示例、 四、相关资源
flutter 利用flutter-img-sync 自动 图片资源管理
u014133383的博客
01-08 996
flutter 利用flutter-img-sync 自动 图片资源管理，从此告别苦逼的配置
Flutter Add to App DEMO 笔记
爱孔孟
05-25 380
[GIT地址] Add to App 官方文档 https://flutter.dev/docs/development/add-to-app git clone --depth 1 https://github.com/flutter/samples.git 摘录部分代码块，全源码可看上述地址，应该Flutter 已经 出2.0+版本， 增加了空异常检测， 所以demo 所使用的库包都要升级到支持空检查的新版本。 Android 端配置: FlutterActivity 添加到 manifest
flutter 人脸检测_flutter_bdface_plugin
weixin_30952479的博客
12-30 1033
public class MainApplication extends FlutterApplication {@Overridepublic void onCreate() {super.onCreate();initFacePlugin();}private void initFacePlugin() {// 初始化SDKFaceSDKManager.getInstance().initia...
flutter使用 NetworkImage 显示图像
发果叁
05-27 1181
使用 NetworkImage 显示图像 在 GitHub 中，每个成员都有其头像的 URL。您的下一个改进是将该头像添加到Member课程中并在应用程序中显示这些头像。 更新Member以添加avatarUrl属性。它现在应该是这样的： class Member { Member(this.login, this.avatarUrl); final String login; final String avatarUrl; } ​ 由于avatarUrl现在是必需参数，因此 Flutter
【Flutter】Flutter 使用 convex_bottom_bar 实现底部导航栏
Code Metaverse
08-09 624
convex_bottom_bar 是一个用于 Flutter 的底部导航栏包。它提供了一种简单的方法来创建凸起的底部导航栏。
用 Flutter 做出 GIF 动图效果
Flutter 跨平台技术研究
06-14 1602
通过交错动画给了我们更多动效组合的空间，从而可以实现类似 GIF图片的那种多帧组合在一起的动画效果。
30岁被迫转型的程序员，根本原因是什么？
weixin_40190184的博客
04-02 164
说起IT行业，大多数人脑海里反应出的第一个标签一定是“高薪”，而说起程序员，大家更多想到的可能是：秃顶、木讷、格子衫；加班、赚钱、不花钱；要么就是没有女朋友…甚至很多人还说“程序员在互联网行业里面是吃青春饭的，干到30岁就会被行业淘汰掉”。去年开始的各大企业裁员风潮，似乎也在侧面的印证这一观点。大家都认为互联网的寒冬来了，都认为程序员30岁以后就不值钱了。熟不知程序员的转行或被迫裁员，都是受互联网...
【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-24 2891
一、配置本地 gif 图片资源、 二、本地资源加载 Placeholder、 三、完整代码示例、 四、相关资源
【Flutter】三、Flutter之图片
MAXLZ的博客
08-22 1559
【Flutter】三、Flutter之图片1.Image构造器2.Image属性说明2.1 ImageProvider image2.2 ImageFrameBuilder frameBuilder2.3 ImageLoadingBuilder loadingBuilder2.4 double width2.5 double height2.6 Color color2.7 FilterQuali...
两张(多张)图片合成一张图片
reylen的专栏
02-23 1万+
下面向通过颜色创建了一张空白图片，然后将目标图片居中在上一个图片中，这里可以通过同样的方法绘制多张图片到一张图片上去- (UIImage *) drawRectForImage:(UIImage *) image { UIImage* rectImage = [UIImage imageWithColor:[UIColor whiteColor] size:CGSizeMake(self.f
flutter加载本地图片
热门推荐
Over_dose的博客
03-02 1万+
一、步骤 1.在工程根目录下创建images文件夹，将图片放入该目录中 2.在工程pubspec.xml文件中，找到flutter，添加刚才放入的图片 # The following section is specific to Flutter. flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can .
flutter yuv_420_888 使用 decodeImage
05-25
在Flutter中，可以使用`decodeImage`函数将YUV 420 888格式的图像解码为Dart中的图像对象。YUV 420 888是一种常见的图像格式，特别是在视频处理中，因为它可以有效地压缩图像数据。 以下是一个使用`decodeImage`函数将YUV 420 888格式图像解码为Dart中的图像对象的示例代码： ``` import 'dart:typed_data'; import 'package:flutter/material.dart'; import 'package:image/image.dart' as img; class YUVImage extends StatefulWidget { final Uint8List data; final int width; final int height; YUVImage({this.data, this.width, this.height}); @override _YUVImageState createState() => _YUVImageState(); } class _YUVImageState extends State<YUVImage> { img.Image image; @override void initState() { super.initState(); // decode YUV 420 888 format image to Dart Image object image = img.Image.fromBytes( widget.width, widget.height, widget.data, format: img.Format.yuv420); } @override Widget build(BuildContext context) { return Image.memory(img.encodePng(image)); } } ``` 在上面的示例中，我们首先在`initState`方法中使用`decodeImage`函数从`Uint8List`中解码YUV 420 888格式的图像，并将其转换为`Dart Image`对象。然后在`build`方法中，我们将该图像对象转换为PNG格式，并将其作为内存中的图像显示在Flutter应用程序中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值