How to Navigate to next page without clearing current page data - flutter

Question

I am facing a problem with displaying image in the grid view in Flutter.
1) I am fetching 25 images from Firestore but these images are not loaded from top to bottom. these images are loaded asynchronously. I want to load all the images one by one from top to bottom so, the other images which are not on the screen should be loaded when they are scrolled.
2) When I tap any of the Image it is taken to FullScreen Page. I have used navigator. push to navigate from one page to another. But, when I again tap back button in FullScreen Page, all the Images get loaded from the beginning. I want all the images not to be loaded again.
This is the code Where Images are loaded.
class CategoryGrid extends StatefulWidget {
#override
_CategoryGridState createState() =>
_CategoryGridState();
}
class _CategoryGridState extends State<CategoryGrid> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: StreamBuilder(
stream: Firestore.instance.collection(label).snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Container(
child: Center(
child: CircularProgressIndicator(
valueColor: new AlwaysStoppedAnimation<Color>(Colors.black54),
),
),
);
} else {
return SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Container(
height: 50.0,
margin: EdgeInsets.only(top: 45.0),
child: Text(
displayText,
style: GoogleFonts.poppins(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 25.0,
),
),
),
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 0.6,
crossAxisSpacing: 5.0,
mainAxisSpacing: 5.0,
),
padding: EdgeInsets.all(10.0),
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot imgUrl =
snapshot.data.documents[index];
if (imgUrl == null) {
return CircularProgressIndicator();
} else {
return GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return FullScreenPage(
image: "${imgUrl['image']}");
}));
},
child: Container(
child: ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(5.0)),
child: FadeInImage(
image: NetworkImage(
"${imgUrl['image']}",
),
fit: BoxFit.fill,
placeholder: AssetImage(
'images/Loadinghorizontal.jpg'),
),
),
),
);
}
},
),
],
),
),
);
}
},
),
);
}
}
This is the code which is pushed to another screen while tapped
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black54,
body: SafeArea(
child: Stack(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Image.network(
image,
fit: BoxFit.cover,
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(),
);
},
),
),
Positioned(
top: 12.0,
left: 12.0,
child: GestureDetector(
onTap: () {
Navigator.pop(context);
},
),
),
),
],
),
),
);

Answer 1

Use the cached_network_image package, it is perfect because it allows you to put the images you have downloaded in the cache memory of the phone, so here is how you are going to do it :
- You will update your pubspec.yaml file
By adding this in the dependencies cached_network_image: ^2.2.0+1
You do flutter pub get and voila
- Small Example
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),
),