Explore Precache Images In Flutter
Commonly it occurs (particularly in Flutter Web) that your pictures from local assets take a great lot of effort to load and deliver on your screen!
This isn’t useful from the user’s point of view particularly if the picture is the background picture of your screen. On the off chance that the picture is any part in your screen, we can in any case show shimmer, loader, or something so the user becomes acquainted with that picture is loading.
In this blog, we will explore the Precache Images In Flutter. We will execute a demo program of the Precache Images and show you how to load your image assets faster in your flutter applications.
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents ::
Introduction:
The below demo video shows how to use Precache Images in a flutter. It shows how Precache Images will work in your flutter applications. It shows when the user uses the precacheImage function, the image load faster from the assets folder. It will be shown on your device.
Demo Module :
Implementation:
Step 1: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/
Step 2: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
precacheImage takes ImageProvider and context as required arguments and returns Future<void>
Future<void> precacheImage(
ImageProvider<Object> provider,
BuildContext context,
{Size? size,
ImageErrorListener? onError}
)
This strategy prefetches the image into the image cache and afterward at whatever point the image is utilized, it will be stacked a lot quicker. Nonetheless, ImageCache doesn’t permit to hold extremely huge pictures.
As the context is required in this, so we can add precacheImage() in any function from where context is accessible. We can place something similar in the didChangeDependencies() technique in our demo model.
First, we will create a two image variable was image1 and image2.
late Image image1;
late Image image2;
We add void initState() method. In this method, we will add variable image1 and image 2 is equal to add images from your assets folders.
@override
void initState() {
super.initState();
image1 = Image.asset("assets/flutter.jpeg");
image2 = Image.asset("assets/glass.png");
}
Since we need to preload our pictures when our widget is initialized, we can put our precacheImage code in the didChangeDependencies technique, which is called after initState, and at whatever point the dependencies change from there on, as follows:
@override
void didChangeDependencies() {
precacheImage(image1.image, context);
precacheImage(image2.image, context);
super.didChangeDependencies();
}
Now that all images have been preloaded, we can use them in our build method.
In the body, we will add a Center widget. In this widget, we will add a Column widget with the mainAxisAligment as the center. Also, add variables you were created for images.
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
image1,
SizedBox(height: 50,),
image2
],
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:precache_image_example/splash.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
late Image image1;
late Image image2;
@override
void initState() {
super.initState();
image1 = Image.asset("assets/flutter.jpeg");
image2 = Image.asset("assets/glass.png");
}
@override
void didChangeDependencies() {
precacheImage(image1.image, context);
precacheImage(image2.image, context);
super.didChangeDependencies();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white24,
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text("Flutter Precache Images Demo"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
image1,
SizedBox(height: 50,),
image2
],
),
),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the Precache Images in a flutter; you can modify this code according to your choice. This was a small introduction to Precache Images On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Precache Images in your flutter projects. We will show you what the Introduction is?. Make a demo program for working Precache Images. It shows when the user uses the precacheImage function, the image load faster from the assets folder in your flutter application. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
