Flutter 使用图片和资源

简介: Flutter 使用图片和资源

Flutter 应用程序包含代码和 assets(也为资源)。资源是被打包到应用程序安装包中,可以在运行时访问的一种文件。常见的资源类型包括静态数据(例如 JSON 文件),配置文件,图标和图片(JPEG,WebP,GIF,动画 WebP / GIF,PNG,BMP 和 WBMP)。

指定资源

Flutter 使用 pubspec.yaml 文件,位于项目根目录,来识别应用程序所需的资源。

什么是   pubspec.yaml 文件

在Flutter中,pubspec.yaml文件是一个用于管理项目依赖项和资源的配置文件。它位于Flutter项目的根目录下,并且是一个YAML格式的文本文件。

pubspec.yaml文件包含了以下主要内容:

  1. 项目信息:你可以在name字段中指定项目名称,在description字段中提供项目描述,在version字段中指定项目版本号等。
  2. 依赖项管理:你可以使用dependencies字段来列出项目所依赖的Flutter包或其他Dart库。每个依赖项都有一个名称和一个版本约束。当你运行flutter pub get命令时,Flutter会根据pubspec.yaml文件中的依赖项配置自动下载并安装所需的包。
  3. 资源管理:你可以使用assets字段来指定项目中需要作为资源使用的文件路径。这些资源可以是图片、字体、配置文件等。通过在pubspec.yaml文件中配置资源路径,Flutter可以将这些资源文件打包到应用程序中,并且你可以通过相应的API来访问它们。
  4. 其他配置:pubspec.yaml文件还可以包含其他配置项,例如构建设置、环境变量等。

name: my_flutter_app  # 项目名称
description: A sample Flutter application  # 项目描述
version: 1.0.0  # 项目版本号
environment:
  sdk: ">=2.12.0 <3.0.0"  # Flutter SDK版本要求
dependencies:
flutter:
  sdk: flutter  # Flutter框架依赖
  
  cupertino_icons: ^1.0.2  # 依赖于Cupertino图标库,指定版本约束为1.0.2
  
  http: ^0.13.4  # 依赖于HTTP网络请求库,指定版本约束为0.13.4
dev_dependencies:
  flutter_test:
    sdk: flutter  # 开发环境下的测试依赖
flutter:
  assets:
  - assets/images/  # 资源文件夹路径
  - assets/fonts/   # 字体文件夹路径
fonts:
  - family: Roboto  # 字体族名称
    fonts:
  - asset: assets/fonts/Roboto-Regular.ttf  # 字体文件路径
    - asset: assets/fonts/Roboto-Bold.ttf
      weight: 700  # 字体粗细设置

示例配置

当配置完 该文件,一定要  运行flutter pub get命令:在终端中运行flutter pub get命令,以确保Flutter项目依赖项和资源已正确配置。

图片

图片常用的配置属性

属性

说明

image

要显示的图片

width

图片宽度

height

图片高度

fit

图片适应方式

alignment

图片对齐方式

repeat

图片重复方式

color

图片着色颜色

colorBlendMode

图片着色模式

filterQuality

图片滤镜质量

semanticLabel

图片的语义标签

excludeFromSemantics

是否从语义树中排除图片

这些属性可以通过Image小部件的构造函数或者使用Image.asset()Image.network()等静态方法进行设置。

加载本地图片

1. 通过 pubspec.yml 文件进行配置图片目录

在根目录下创建assets 放置资源目录,创建 images 文件夹存放图片资源

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

2. 使用 Image.asset 小部件加载本地图片

Image.asset('images/3.png')

显示效果

加载网络图片

1. 通过 Image.network小部件加载网络图片:使用Image.network小部件来加载网络图片。将图片的URL作为参数传递给Image.network构造函数。

Image.network('https://img0.baidu.com/it/u=2132093665,1645757234&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500')

显示效果

2. 可选:处理加载过程中的占位符和错误情况:

你可以使用placeholder参数指定一个占位符图像,在网络图片加载完成之前显示。另外,你还可以使用errorBuilder参数来自定义加载失败时的错误显示。

Image.network(
  'https://img0.baidu.com/it/u=2132093665,1645757234&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
  placeholder: AssetImage('assets/images/placeholder.png'),
  errorBuilder: (context, error, stackTrace) {
    return Text('加载图片失败');
  },
)
相关文章
|
缓存 Java 开发工具
Flutter的文本、图片和按钮使用
Flutter的文本、图片和按钮使用
150 0
|
存储 前端开发 文件存储
Flutter笔记:关于应用程序中提交图片作为头像
1. 头像选择与提交的一般步骤Flutter笔记关于应用程序中提交图片作为头像作者目 录1. 头像选择与提交的一般步骤2. 选择本地文件到头像的示例代码3. 将图像提交到后端1. 头像选择与提交的一般步骤image将处理后的图像作为用户的头像显示在应用程序中。您可以使用Image或小部件来加载和显示图像。这些步骤涵盖了从选择图像到上传、处理和显示图像的基本流程。请根据您的具体需求和后端实现来自定义这些步骤。此外,确保您的应用程序有适当的权限以访问设备上的相册或相机,这通常需要在和。
351 0
|
3月前
|
开发框架 前端开发 定位技术
Flutter框架中的插件市场及开源资源的利用方法。内容涵盖插件市场的扩展功能、时间节省与质量保证
本文深入探讨了Flutter框架中的插件市场及开源资源的利用方法。内容涵盖插件市场的扩展功能、时间节省与质量保证,常见插件市场的介绍,选择合适插件的策略,以及开源资源的利用价值与注意事项。通过案例分析和对社区影响的讨论,展示了这些资源如何促进开发效率和技术进步,并展望了未来的发展趋势。
68 11
|
4月前
|
开发框架 UED 计算机视觉
flutter:图片&stful 生命周期 (三)
本文档介绍了如何在Flutter中处理图片,包括加载网络图片、本地图片、创建圆形图片和带有圆角的图片,以及如何配置`pubspec.yaml`文件来添加资源文件。还展示了如何使用`AssetImage`对象来显示本地资源图片,并通过代码示例详细说明了这些操作的实现方法。最后,简要介绍了StatefulWidget的生命周期。
|
6月前
|
缓存
Flutter Image从网络加载图片刷新、强制重新渲染
Flutter Image从网络加载图片刷新、强制重新渲染
218 1
|
7月前
|
Shell Android开发 Python
Flutter如何正确使用图片资源
Flutter如何正确使用图片资源
98 0
|
7月前
Flutter-自定义图片3D画廊
Flutter-自定义图片3D画廊
104 0
|
9月前
flutter 引用图片资源遇到的问题
flutter 引用图片资源遇到的问题
120 1
|
9月前
|
开发框架 前端开发 定位技术
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
【4月更文挑战第30天】Flutter插件市场和开源资源加速开发进程。pub.dev是官方插件库,提供大量第三方插件,节约时间和保证质量。选择插件时关注功能需求、评价及维护状况。开源资源作为学习、解决问题和创新的平台,需注意版权、代码质量和兼容性。案例分析展示插件应用,开源社区促进交流与技术进步,未来市场将持续发展。善用资源,提升开发效率与项目竞争力。
203 0
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
|
9月前
|
XML JSON 前端开发
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
【4月更文挑战第30天】Flutter是谷歌的开源前端框架,因其高性能、流畅UI和多端运行能力受开发者喜爱。本文聚焦于Flutter中的资源加载:使用`Image`组件加载静态、网络和本地图片;通过`video_player`库加载和播放视频;利用`http`包进行网络资源请求。掌握这些技巧将有助于提升Flutter应用的开发效率和质量。
72 0
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 5
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 6
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 7
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
  • 8
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 10
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈