在一些情况下,缓存从网络下载的图片用于离线显示是十分方便的。你需要引入 cached_network_image 包来实现这项功能。

除了缓存,cached_image_network 包也支持占位符和加载后的图片淡入。

  1. CachedNetworkImage(
  2. imageUrl: 'https://picsum.photos/250?image=9',
  3. );

添加占位符

cached_network_image 包允许任何 Widget 充当占位符。在本例中,加载图片时会展示一个旋转加载的效果(spinner)作为占位符。

  1. CachedNetworkImage(
  2. placeholder: CircularProgressIndicator(),
  3. imageUrl: 'https://picsum.photos/250?image=9',
  4. );

完整样例

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