显示图像是大多数移动应用程序的基础。 Flutter提供Image小部件以显示不同类型的图像。
为了处理来自URL的图像,请使用Image.network构造函数。
new Image.network(
'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg',
)
关于Image部件的一个惊人的事情:它也支持动画GIF开箱!
new Image.network(
'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',
);
默认的Image.network构造函数不能处理更多的高级功能,例如在下载后将图像加载或缓存到设备后淡入图像。 要完成这些任务,请参阅以下配方:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var title = 'Web Images';
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Image.network(
'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
),
),
);
}
}
使用默认images小部件显示图像时,您可能会注意到它们在加载时会弹出到屏幕上。 这可能会让用户产生视觉震撼。
相反,如果你最初可以显示一个占位符,那么它会不会很好,并且图像在加载时会淡入? 我们可以使用与Flutter一起打包的FadeInImage部件来达到这个目的!
FadeInImage可以处理任何类型的图像:内存,本地资源或互联网上的图像。
在这个例子中,我们将使用transparent_image包作为一个简单的透明占位符。 您也可以考虑按照Assets和Images指南使用本地资源来占位符。
new FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Fade in images';
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Stack(
children: <Widget>[
new Center(child: new CircularProgressIndicator()),
new Center(
child: new FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image:
'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
),
),
],
),
),
);
}
}
在某些情况下,在从网络上下载图像时缓存图像可能会很方便,以便它们可以脱机使用。 为此,我们将使用cached_network_image包。
除了缓存之外,cached_image_network软件包在加载时还支持占位符和淡入淡出的图像!
new CachedNetworkImage(
imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);
cached_network_image包允许我们使用任何部件作为占位符! 在这个例子中,我们将在图片加载时显示一个蜘蛛。
new CachedNetworkImage(
placeholder: new CircularProgressIndicator(),
imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Cached Images';
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Center(
child: new CachedNetworkImage(
placeholder: new CircularProgressIndicator(),
imageUrl:
'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
),
),
),
);
}
}