Work with cached images
In some cases, it’s handy to cache images as they’re downloaded from the
web, so they can be used offline. For this purpose,
use the cached_network_image
package.
In addition to caching, the cached_network_image
package also supports placeholders and fading images
in as they’re loaded.
CachedNetworkImage( imageUrl: 'https://picsum.photos/250?image=9', );
Adding a placeholder
The cached_network_image
package allows you to use any widget as a
placeholder. In this example, display a spinner while the image loads.
CachedNetworkImage( placeholder: (context, url) => const CircularProgressIndicator(), imageUrl: 'https://picsum.photos/250?image=9', ),
Complete example
import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { const title = 'Cached Images'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: const Text(title), ), body: Center( child: CachedNetworkImage( placeholder: (context, url) => const CircularProgressIndicator(), imageUrl: 'https://picsum.photos/250?image=9', ), ), ), ); } }