Give us a message if you’re interested in Blockchain and FinTech software development or just say Hi at Pharos Production Inc.
Or follow us on Youtube to know more about Software Architecture, Distributed Systems, Blockchain, High-load Systems, Microservices, and Enterprise Design Patterns.
Mobile application today is difficult to imagine without access to the Internet. Various posts, articles and other — this is quite lightweight data. But pictures, photos, user avatars are relatively large data that can and should even be cached. This is done in order for the user to notice the braking on the screen of his mobile device.
Being engaged in development for native Android and I was free to use different libraries for caching and loading — such as Glide, Picasso or Fresco.
Let’s figure out how to cache images in Flutter and for this, we will write a small application.
Step1.
Create a new application. Then follow the link below and select the latest version of the library and add the dependency to the pubspec.yaml file. As of this writing, the current version 0.7.0
dependencies:
cached_network_image: ^0.7.0Step 2.
Place the CachedNetworkImage widget on the main screen:
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(20.0),
child: CachedNetworkImage(
imageUrl: url,
placeholder: (context, url) => new CircularProgressIndicator(),
errorWidget: (context, url, error) => new Icon(Icons.error),
),
),
),
);
}
}
That’s all!
Additional settings:
The constructor of this widget also allows you to pass into it such necessary parameters as
- fadeOutDuration
- fadeInDuration
- fadeInCurve
- fadeOutCurve
- alignment
- cacheManager
- useOldImageOnUrlChanged
- color
- colorBlendMode
- httpHeaders
- repeat
And some other default parameters. Thus, you can quite flexibly configure the caching of images.
An example of code you can find on the link below:
