在某些情况下,在从网上下载图片后缓存图片可能会很方便,以便它们可以脱机使用。为此,我们可以使用cached_network_image包来达到目的。

除了缓存之外,cached_image_network包在加载时还支持占位符和淡入淡出图片!

  1. new CachedNetworkImage(
  2. imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
  3. );

添加一个占位符

cached_network_image包允许我们使用任何Widget作为占位符!在这个例子中,我们将在图片加载时显示一个进度圈。

  1. new CachedNetworkImage(
  2. placeholder: new CircularProgressIndicator(),
  3. imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
  4. );

完整的例子

  1. import 'package:flutter/material.dart';
  2. import 'package:cached_network_image/cached_network_image.dart';
  3. void main() {
  4. runApp(new MyApp());
  5. }
  6. class MyApp extends StatelessWidget {
  7. @override
  8. Widget build(BuildContext context) {
  9. final title = 'Cached Images';
  10. return new MaterialApp(
  11. title: title,
  12. home: new Scaffold(
  13. appBar: new AppBar(
  14. title: new Text(title),
  15. ),
  16. body: new Center(
  17. child: new CachedNetworkImage(
  18. placeholder: new CircularProgressIndicator(),
  19. imageUrl:
  20. 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
  21. ),
  22. ),
  23. ),
  24. );
  25. }
  26. }