Downloading images from the network costs the user significantly in terms of bandwith expenses. It also contributes to slowness in an app since images consume more memory and require more resources to render.
Thus it is a smart idea to load images with packages that are capable of caching the images. Caching simply implies that you load the image only when a local copy isn't available. Otherwise you simply render the local one.
If you load an image from the network then you save it in the cache so that the next time the app needs that we image we simply load it from the cache. The result is a more responsive app and also even more importantly minimal bandwith usage.
In this tutorial we will explore examples, mostly using third party solutions, that allow us cache network images in the file system. We will look at these in a step by step manner.
Use flutter_cached_network_image
This is a flutter library to show images from the internet and keep them in the cache directory.
Use this to load and cache network images. It can also be used with placeholder and error widgets.
Step 1: Install it
First you need to install this library. Do that by depending on this library in your pubspec.yaml as follows:
dependencies:
cached_network_image: ^3.1.0Sync.
Alternatively, you can install it via the terminal, by running the following command:
flutter pub add cached_network_imageStep 2: Write Code
Start by specifying the import:
import 'package:cached_network_image/cached_network_image.dart';Here is how to load an image with a placeholder, a progress indicator and an error widget:
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),Here is how to load an image with a progress indicator and an error widget but no placeholder;
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
progressIndicatorBuilder: (context, url, downloadProgress) =>
CircularProgressIndicator(value: downloadProgress.progress),
errorWidget: (context, url, error) => Icon(Icons.error),
),Image(image: CachedNetworkImageProvider(url))When you want to have both the placeholder functionality and want to get the imageprovider to use in another widget you can provide an imageBuilder:
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/200x150",
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
colorFilter:
ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
),
),
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),Full Example
Here is a full example. Simply install the library as we had discussed then replace your main.dart with the following code:
main.dart
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:baseflow_plugin_template/baseflow_plugin_template.dart';
import 'package:flutter_blurhash/flutter_blurhash.dart';
void main() {
runApp(BaseflowPluginExample(
pluginName: 'CachedNetworkImage',
githubURL: 'https://github.com/Baseflow/flutter_cache_manager',
pubDevURL: 'https://pub.dev/packages/flutter_cache_manager',
pages: [
BasicContent.createPage(),
ListContent.createPage(),
GridContent.createPage(),
],
));
}
/// Demonstrates a [StatelessWidget] containing [CachedNetworkImage]
class BasicContent extends StatelessWidget {
const BasicContent({Key? key}) : super(key: key);
static ExamplePage createPage() {
return ExamplePage(Icons.image, (context) => const BasicContent());
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_blurHashImage(),
_sizedContainer(
const Image(
image: CachedNetworkImageProvider(
'https://via.placeholder.com/350x150',
),
),
),
_sizedContainer(
CachedNetworkImage(
progressIndicatorBuilder: (context, url, progress) => Center(
child: CircularProgressIndicator(
value: progress.progress,
),
),
imageUrl:
'https://images.unsplash.com/photo-1532264523420-881a47db012d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9',
),
),
_sizedContainer(
CachedNetworkImage(
placeholder: (context, url) =>
const CircularProgressIndicator(),
imageUrl: 'https://via.placeholder.com/200x150',
),
),
_sizedContainer(
CachedNetworkImage(
imageUrl: 'https://via.placeholder.com/300x150',
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.colorBurn,
),
),
),
),
placeholder: (context, url) =>
const CircularProgressIndicator(),
errorWidget: (context, url, error) => const Icon(Icons.error),
),
),
CachedNetworkImage(
imageUrl: 'https://via.placeholder.com/300x300',
placeholder: (context, url) => const CircleAvatar(
backgroundColor: Colors.amber,
radius: 150,
),
imageBuilder: (context, image) => CircleAvatar(
backgroundImage: image,
radius: 150,
),
),
_sizedContainer(
CachedNetworkImage(
imageUrl: 'https://notAvalid.uri',
placeholder: (context, url) =>
const CircularProgressIndicator(),
errorWidget: (context, url, error) => const Icon(Icons.error),
),
),
_sizedContainer(
CachedNetworkImage(
imageUrl: 'not a uri at all',
placeholder: (context, url) =>
const CircularProgressIndicator(),
errorWidget: (context, url, error) => const Icon(Icons.error),
),
),
_sizedContainer(
CachedNetworkImage(
maxHeightDiskCache: 10,
imageUrl: 'https://via.placeholder.com/350x200',
placeholder: (context, url) =>
const CircularProgressIndicator(),
errorWidget: (context, url, error) => const Icon(Icons.error),
fadeOutDuration: const Duration(seconds: 1),
fadeInDuration: const Duration(seconds: 3),
),
),
],
),
),
);
}
Widget _blurHashImage() {
return SizedBox(
width: double.infinity,
child: CachedNetworkImage(
placeholder: (context, url) => const AspectRatio(
aspectRatio: 1.6,
child: BlurHash(hash: 'LEHV6nWB2yk8pyo0adR*.7kCMdnj'),
),
imageUrl: 'https://blurha.sh/assets/images/img1.jpg',
fit: BoxFit.cover,
),
);
}
Widget _sizedContainer(Widget child) {
return SizedBox(
width: 300.0,
height: 150.0,
child: Center(child: child),
);
}
}
/// Demonstrates a [ListView] containing [CachedNetworkImage]
class ListContent extends StatelessWidget {
const ListContent({Key? key}) : super(key: key);
static ExamplePage createPage() {
return ExamplePage(Icons.list, (context) => const ListContent());
}
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: (BuildContext context, int index) => Card(
child: Column(
children: <Widget>[
CachedNetworkImage(
imageUrl: 'https://loremflickr.com/320/240/music?lock=$index',
placeholder: (BuildContext context, String url) => Container(
width: 320,
height: 240,
color: Colors.purple,
),
),
],
),
),
itemCount: 250,
);
}
}
/// Demonstrates a [GridView] containing [CachedNetworkImage]
class GridContent extends StatelessWidget {
const GridContent({Key? key}) : super(key: key);
static ExamplePage createPage() {
return ExamplePage(Icons.grid_on, (context) => const GridContent());
}
@override
Widget build(BuildContext context) {
return GridView.builder(
itemCount: 250,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) => CachedNetworkImage(
imageUrl: 'https://loremflickr.com/100/100/music?lock=$index',
placeholder: _loader,
errorWidget: _error,
),
);
}
Widget _loader(BuildContext context, String url) {
return const Center(
child: CircularProgressIndicator(),
);
}
Widget _error(BuildContext context, String url, dynamic error) {
return const Center(child: Icon(Icons.error));
}
}
References
Below are the reference links:
| Number | Link |
|---|---|
| 1. | Download code |
| 2. | Read more |
