一、配置本地 gif 图片资源

配置 assets 图片资源 :

将 gif 图片拷贝到 Flutter 根目录下的 images 目录下 ;

在 pubspec.yaml 目录中配置 images/waiting.gif 图片资源 ;

flutter:assets:- images/waiting.gif

完整的 pubspec.yaml 配置文件 :

name: flutter_image_widget
description: A new Flutter application.version: 1.0.0+1environment:sdk: ">=2.1.0 <3.0.0"dependencies:flutter:sdk: fluttercupertino_icons: ^0.1.2path_provider: ^2.0.1transparent_image: ^2.0.0cached_network_image: ^2.5.1dev_dependencies:flutter_test:sdk: flutterflutter:uses-material-design: trueassets:- images/sidalin.png- images/sidalin2.png- images/waiting.gif

二、本地资源加载 Placeholder

Placeholder 是一个占位控件 , 在图片还没有就绪时 , 如从网络获取图片 , 先使用 Placeholder 占据图片组件的位置 ;

FadeInImage.assetNetwork 创建一个渐变图像组件 , 图片从网络获取 , Placeholder 从图片资源中获取 ;

代码示例 :

Stack(children: [Center(// 网络加载时显示本地的资源图片child: FadeInImage.assetNetwork(// Placeholderplaceholder: "images/waiting.gif",image: "https://img-blog.csdnimg.cn/20210324110914742.png",),)],
),

运行效果 : 第一张图片加载时显示 GIF 图像 ;

显示的网络图片 :

等待 gif 图片 :

三、完整代码示例

完整代码示例 :

import 'package:flutter/material.dart';
import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:transparent_image/transparent_image.dart';
import 'package:cached_network_image/cached_network_image.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);}
}class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}/// SD 卡路径String sdPath;@overridevoid initState() {// 获取 SD 卡路径getSdPath();}void getSdPath() async {String path = (await getExternalStorageDirectory()).path;setState(() {sdPath = path;});}@overrideWidget build(BuildContext context) {print("sdPath : $sdPath");return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: ListView(children: [Stack(children: [Center(// 网络加载时显示本地的资源图片child: FadeInImage.assetNetwork(// Placeholderplaceholder: "images/waiting.gif",image: "https://img-blog.csdnimg.cn/20210324110914742.png",),)],),Stack(children: [// 进度条Center(child: CircularProgressIndicator(),),Center(// 网络加载时渐变出现child: FadeInImage.memoryNetwork(// Placeholderplaceholder: kTransparentImage,image: "https://img-blog.csdnimg.cn/2021032321394771.png",),)],),Center(// 图片加载完成之前显示的是 placeholder , 加载完成后显示网络图片child: CachedNetworkImage(// 加载网络图片过程中显示的内容 , 这里显示进度条placeholder: (context, url)=>CircularProgressIndicator(),// 网络图片地址imageUrl: "https://img-blog.csdnimg.cn/20210324100419204.png",),),// 图片组件 , 从网络中加载一张图片Image.network(// 图片地址"https://img-blog.csdnimg.cn/2021032313493741.png",),Image(image: AssetImage("images/sidalin.png"),),//Image.asset('images/sidalin2.png', ),/// 从 SD 卡加载图片if(sdPath != null)Image.file(File('$sdPath/sidalin3.png'),width: 200,),],)),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}
}

pubspec.yaml 配置文件 :

name: flutter_image_widget
description: A new Flutter application.version: 1.0.0+1environment:sdk: ">=2.1.0 <3.0.0"dependencies:flutter:sdk: fluttercupertino_icons: ^0.1.2path_provider: ^2.0.1transparent_image: ^2.0.0cached_network_image: ^2.5.1dev_dependencies:flutter_test:sdk: flutterflutter:uses-material-design: trueassets:- images/sidalin.png- images/sidalin2.png- images/waiting.gif

运行效果 :

四、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/
Flutter 插件下载地址 : https://pub.dev/packages
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_image_widget ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/16073006 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )相关推荐

【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )
文章目录一.transparent_image 透明图像插件二.内存加载 Placeholder 三.完整代码示例四.相关资源一.transparent_image 透明图像插件安装 tra ...
ios加载本地游戏html,iOS WebView加载本地HTML代码
项目需求: 去服务器获取代码包到本地保存,然后去加载本地的代码包.这样的话,如果有新的版本更新,就直接更新html的代码包,就不用更新ipa包了. 需要注意几点: 1.代码存在服务器,zip格式 2. ...
OpenGL.Shader：2-Android Cpp下加载assets图片资源 / 各种格式加载纹理 / 在线找AndroidNative源码
OpenGL.Shader:2-Android Cpp下读取assets图片资源 / 读取图片加载纹理 / 在线找AndroidNative源码 (AS3.x rebuild出现More than o ...
Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
SpringMVC配置静态资源加载, 中文乱码处理,注解驱动
常规配置(Controller加载控制) SpringMVC的处理器对应的bean必须按照规范格式开发,未避免加入无效的bean可通过bean加载过滤器进行包含设定或排除设定,表现层bean标注通常设 ...
Flutter中举步维艰的WebView，终于实现了加载本地html
1.需求背景实现一个不全屏的,支持加载本地html资源的webview 2.结论先行选用了官方的webview_flutter.总结了下实践的过程,分析几个插件有如下特点: flutter_ina ...
小程序一次性上传多个本地图片，上拉加载照片以及图片加载延迟解决之道
一:小程序之一次性上传多个本地相片最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片. 问题描述最近做项目的时候要实现一个上 ...
cesium 3dtiles 加载本地数据_Meteva笔记：加载本地观测数据
Meteva 是由 nmc 开源的全流程检验程序库,提供了常用的各种气象预报检验评估的算法函数,气象检验分析的图片和表格型产品的制作函数,以及检验评估系统示例. 本文介绍如何将 NWPC 生成的站点观 ...
apollo配置中心之--spring boot如何加载apollo
文章目录一.启动类上加入@EnableApollo注解 1.1.PropertySourcesProcessor#initializePropertySources()从apollo服务端拉取配置封 ...

【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )

文章目录

一、配置本地 gif 图片资源

二、本地资源加载 Placeholder

三、完整代码示例

四、相关资源

【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )相关推荐

最新文章

热门文章