带你快速掌握Flutter图片开发核心技能
带你快速掌握Flutter图片开发核心技能
在这篇文章中，将带着大家一起学习在Flutter中图片开发以及应用场景中的必备技能以及一些经验技巧。
目录
- 什么是Image widget？
- 如何加载网络图片？
- 如何加载静态图片？
- 如何加载本地图片？
- 如何设置Placeholder?
- 如何配置图片缓存？
- 如何加载Icon？
什么是Image widget？
Flutter中一个用来展示图片的widget。
Image支持如下几种类型的构造函数：
- new Image - 用于从ImageProvider获取图像；
- new Image.asset - 使用key 从AssetBundle获得的图像；
- new Image.network - 从网络URL中获取图片；
- new Image.file - 从本地文件中获取图片；
- new Image.memory - 用于从Uint8List获取图像；
在加载项目中的图片资源时，为了让Image能够根据像素密度自动适配不同分辨率的图片，请使用
AssetImage指定图像，并确保在widget树中的“Image” widget上方存在MaterialApp，WidgetsApp或MediaQuery窗口widget。
Image支持的图片格式
Image 支持以下类型的图片：JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, 和 WBMP。
如何加载网络图片？
要加载网络图片，我们需要使用Image.network构造方法：
Image.network(
'https://www.devio.org/img/avatar.png',
)demo:
...
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter bottomNavigationBar',
theme: new ThemeData.fallback(),
home: Image.network(
'https://www.devio.org/img/avatar.png',
),
);
}
}如何加载静态图片，以及处理不同分辨率的图片？
要加载项目中的静态图片，需要一些两步：
- 在 pubspec.yaml 文件中声明图片资源的路径；
- 使用
AssetImage访问图片；
我们在《快速上手Flutter开发》的《项目结构、资源、依赖和本地化》一节中详细讲解过如何归档图片资源以及处理不同分辨率的图片，在这里就不重复了。
pubspec.yaml声明图片路径：
assets:
- images/my_icon.png使用AssetImage访问图片图片：
Image(
height: 26,
width: 26,
image: AssetImage(my_icon.png),
),除了我们使用Image的构造方法手动指定AssetImage之外，还可通过Image.asset来加载静态图片：
Image.asset(my_icon.png,
width: 26,
height: 26,
)两者是等效的。
/sdcard/Download/Stack.png
如何加载本地图片？
加载完整路径的本地图片
import 'dart:io';
Image.file(File('/sdcard/Download/Stack.png')),加载相对路径的本地图片
第一步：
在pubspec.yaml中添加path_provider插件；
第二步：导入头文件
import 'dart:io';
import 'package:path_provider/path_provider.dart';
//Image.file(File('/sdcard/Download/Stack.png')),
FutureBuilder(future: _getLocalFile("Download/Stack.png"),
builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
return snapshot.data != null ? Image.file(snapshot.data) : Container();
})
)
//获取SDCard的路径：
Future<File> _getLocalFile(String filename) async {
String dir = (await getExternalStorageDirectory()).path;
File f = new File('$dir/$filename');
return f;
}如何设置Placeholder?
为了设置Placeholder我们需要借助FadeInImage，它能够从内存，本地资源中加载placeholder。
从内存中加载Placeholder
第一步：
安装transparent_image插件。
第二步：
...
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Fade in images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Stack(
children: <Widget>[
Center(child: CircularProgressIndicator()),
Center(
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://www.devio.org/img/avatar.png',
),
),
],
),
),
);
}
}从本地资源中加载Placeholder
第一步
配置本地资源图片：
flutter:
assets:
+ - assets/loading.gif第二步
加载本地资源图片作为Placeholder：
FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'https://www.devio.org/img/avatar.png',
);如何配置图片缓存？
在Flutter中我们可以借助cached_network_image插件，来从网络上加载图片，并且将其缓存到本地，以供下次使用。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Cached Images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: CachedNetworkImage(
placeholder: (context, url) => new CircularProgressIndicator(),
imageUrl:
'https://picsum.photos/250?image=9',
),
),
),
);
}
}关于创建
图片控件开发详解的更多实战技巧与最佳实践可学习《基于Flutter1.x开发携程网App》。
如何加载Icon？
在Flutter中我们可以借助Icon来加载icon：
const Icon(this.icon//IconDate, {
Key key,
this.size,//大小
this.color,//颜色
this.semanticLabel,//标志位
this.textDirection,//绘制方向，一般使用不到
})从Icon的构造方法可以很清楚的看出Icon构造方法需要一个默认的类型为IconData类型的参数，我们可以构造一个自己的IconData，也可以使用Flutter提供的material_fonts。
使用Icons
通过如下代码我们可以使用Flutter内置的material_fonts：
...
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text("Icons"),
),
body: new Center(
child: new Icon(Icons.android,size: 100.0),
),
);
}
}使用自定义的Icon
使用自定义的我们需要构造一个：
const IconData(
this.codePoint,//必填参数，fonticon对应的16进制Unicode {
this.fontFamily,//字体库系列
this.fontPackage,//字体在那个包中，不填仅在自己程序包中查找
this.matchTextDirection: false,图标是否按照图标绘制方向显示
});首先我我们需要向使用字体一样，在pubspec.yaml中配置我们的icon：
fonts:
- family: devio
fonts:
- asset: fonts/devio.ttf接下来就可以使用了：
child: new Icon(new IconData(0xf5566,fontFamily: "devio"),size: 100.0,color: Colors.blueAccent,)