How to use precacheImage function in flutter? - caching

Question

Unable to use precacheImage function to load and cache the local images from assets to GridView or ListView in flutter.
ISSUE: When scrolling the list, images always reload.
class AppLandingPage extends StatelessWidget {
final String title;
AppLandingPage({Key key, this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: DrawerPage(),
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return getToolbarWidget("Home title");
},
body: setDataToContainer(),
));
}
}
Container setDataToContainer() {
return Container(
color: Colors.white,
margin: EdgeInsets.only(left: 4.0, right: 4, bottom: 4, top: 4),
child: CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate(
[
HeaderWidget("Header 1"),
],
),
),
SliverGrid(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
delegate: SliverChildListDelegate(
[
BodyWidget("title", "key_x", "pnl.svg"),
BodyWidget("title2", "key_x", "cls.svg"),
BodyWidget(
"title3", "key_x", "irr.svg"),
BodyWidget(
"title4", "key_x", "icp.svg"),
],
),
),
SliverList(
delegate: SliverChildListDelegate(
[
HeaderWidget("Header 2"),
],
),
),
SliverGrid(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
delegate: SliverChildListDelegate(
[
BodyWidget("title5", "key_x", "ict.svg"),
BodyWidget("title6", "key_x", "icc.svg"),
],
),
),
SliverList(
delegate: SliverChildListDelegate(
[
HeaderWidget("Others"),
],
),
),
SliverGrid(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
delegate: SliverChildListDelegate(
[
BodyWidget("title7", "key_x", "icd.svg"),
BodyWidget("title8", "6", "ici.svg"),
],
),
),
],
),
);
}
class HeaderWidget extends StatelessWidget {
final String text;
HeaderWidget(this.text);
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(left: 10.0, right: 10, bottom: 2, top: 20),
child: Text(
text.toUpperCase(),
style: TextStyle(
color: hexToColor(themeColor1),
fontSize: 16,
fontWeight: FontWeight.bold),
),
color: Colors.white,
);
}
}
class BodyWidget extends StatelessWidget {
final String imagePath;
final String title;
final String navigationKey;
BodyWidget(this.title, this.navigationKey, this.imagePath);
#override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
child: Card(
color: hexToColor(themeColor1),
elevation: 5,
child: InkWell(
onTap: () {
navigateToView(context, navigationKey);
},
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Container(
margin: EdgeInsets.only(top: 40),
child: SvgPicture.asset(
"assets/images/$imagePath",
color: Colors.white,
width: 35,
height: 35,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
verticalDirection: VerticalDirection.up,
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
color: Colors.black.withOpacity(.2),
child: Text(
title,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.normal),
),
)
],
),
),
],
),
),
));
}
void navigateToView(BuildContext context, String navigationKey) {
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation1, animation2) {
return NewSections();
},
transitionsBuilder: (context, animation1, animation2, child) {
return FadeTransition(
opacity: animation1,
child: child,
);
},
transitionDuration: Duration(milliseconds: 600),
),
);
}
}

Answer 1

Instead of calling precacheImage() inside initState(), you should do it like this:
Image myImage;
#override
void initState() {
super.initState();
myImage= Image.asset(path);
}
#override
void didChangeDependencies() {
super.didChangeDependencies();
precacheImage(myImage.image, context);
}

Answer 2

I'm not sure how to solve the preloading issue. However you could use a AutomaticKeepAliveClientMixin for your Stateful Widget's state class (the one containing your grid objects. You will have to make your BodyWidget a StatefulWidget) so that you only load each image once and not re-render when the widget goes out of visibility.
class _WidgetState extends State<Widget> with AutomaticKeepAliveClientMixin<Widget>{
….
….
#override
#mustCallSuper
Widget build(BuildContext context)….
….
….
#override
bool get wantKeepAlive => true;
}'
Hope that helps!