How Sliding Images on next page Like Mob gallery - flutter

Question

enter image description hereplz helpp me here i'm new to flutter....! i have seen many tutorials on this but nothig is happen to me...! what i want is i have listing array for gridview images and then ontap button the images shows to next screen ! in that i want sliding images like page is navigating and my images is sliding with same array which shows me above code on my 1st screen ! plz give me some tip on sliding images with same array of this page....! thank you for ua time..
plz give me some coding tips on next screen which i can slide images with same array
return Scaffold(
appBar: getAppBar(),
body: FutureBuilder(
future: _doctorsFuture,
builder: (context, projectSnap) {
Map data = projectSnap.data;
print(projectSnap);
if (projectSnap.connectionState == ConnectionState.none &&
projectSnap.hasData == null) {
return Center(
child: Text(
"Failed to loaed",
style: TextStyle(fontSize: 16.0, color: Colors.red),
));
} else if (projectSnap.hasData) {
return StaggeredGridView.countBuilder(
crossAxisCount: 2,
primary: false,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
itemCount: (data["hits"] as List).length,
itemBuilder: (context, index) {
if (_selectionMode) {
return GridTile(
header: GridTileBar(
trailing: Icon(
_selectedIndexList.contains(index) ? Icons
.check_circle_outline : Icons
.radio_button_unchecked,
color: _selectedIndexList.contains(index) ? Colors
.green : Colors.black,
),
),
child: GestureDetector(
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
),
child:Image.network(
data['hits'][index]['largeImageURL'],
height: 50,
width: 100,
fit: BoxFit.cover,
)
),
onLongPress: () {
_changeSelection(enable: false, index: -1);
},
onTap: () {
setState(() {
if (_selectedIndexList.contains(index)) {
_selectedIndexList.remove(index);
} else {
_selectedIndexList.add(index);
}
});
},
),
);
}
else {
return GridTile(
child: InkResponse(
child: Image.network(
data['hits'][index]['largeImageURL'],
height: 50,
width: 100,
fit: BoxFit.cover,
),
onLongPress: () {
setState(() {
_changeSelection(enable: true, index: index);
});
},
onTap:(){
Navigator.of(context).push(MaterialPageRoute(builder: (context) => ImageView( imgPath: data['hits'][index]['largeImageURL'],)));
},
),
);
}
},
staggeredTileBuilder: (int index) => StaggeredTile.count(1, index.isEven ? 1.2 : 1.8),
padding: const EdgeInsets.all(4.0),
);
} else {
return Center(child: CircularProgressIndicator());
}
}
),
);
}