New
Small details that build taste in Flutter.
curated by 
Cache network images locally
Network images in Flutter are only cached in memory. Restart the app and every image downloads again.
To cache them on disk, load them with extended_image and pass cache: true.
ExtendedImage.network(
url,
cache: true,
)
// or as an ImageProvider
ExtendedNetworkImageProvider(
url,
cache: true,
)While it loads, show a subtle box instead of a spinner, fade the image in when it arrives, and show a broken image icon when it fails. All three are covered in Load images smoothly.
Here's a copy-pasteable widget with all of it:
import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:image_fade/image_fade.dart';
class SmartNetworkImage extends StatelessWidget {
const SmartNetworkImage(
this.url, {
super.key,
this.width,
this.height,
this.fit = BoxFit.cover,
});
final String url;
final double? width;
final double? height;
final BoxFit fit;
@override
Widget build(BuildContext context) {
return ImageFade(
image: ExtendedNetworkImageProvider(
url,
cache: true,
),
width: width,
height: height,
fit: fit,
placeholder: Container(
color: Colors.grey.shade100,
),
errorBuilder: (context, exception) {
return Container(
color: Colors.grey.shade100,
child: Icon(
Icons.broken_image_outlined,
size: 20,
color: Colors.grey.shade400,
),
);
},
);
}
}