How to build only specific objects in the screen - flutter

Question

I have built an app that shows images like Pinterest
like that;
And, When I scroll down, after passing 25 images, my build widget refreshs the page and adds new 25 images to the screen and my screen has 50 images and so on. However, this takes me again the top of the screen because of adding new 25 images. because of that, I see again the images that I already see.
And, I want to don't refresh the page again while adding new 25 images but my builder widget works only in this way.
My class file that has builder widget;
class HomeView extends StatefulWidget {
#override
_HomeViewState createState() => _HomeViewState();
}
class _HomeViewState extends State<HomeView> {
HomeViewModel viewModel;
#override
Widget build(BuildContext context) {
return BaseView<HomeViewModel>(
onModelReady: (model) {
model.init();
model.setContext(context);
viewModel = model;
},
builder: (context, value) => buildScaffold,
model: HomeViewModel(),
);
}
Scaffold get buildScaffold {
return Scaffold(
body: CustomScrollView(
/* physics: BouncingScrollPhysics(), */
slivers: <Widget>[
buildSliverAppBar,
buildSliverStaggeredGrid,
],
),
);
}
SliverAppBar get buildSliverAppBar {
return SliverAppBar(
floating: true,
pinned: true,
snap: false,
backgroundColor: Colors.white,
title: buildSearchField,
actions: <Widget>[buildIconButtonClose, buildanotherbutton],
);
}
TextField get buildSearchField {
return TextField(
controller: viewModel.searchController,
decoration: InputDecoration(hintText: "Search...", border: InputBorder.none),
onSubmitted: (String keyword) => viewModel.loadImages(keyword),
);
}
IconButton get buildIconButtonClose {
return IconButton(
onPressed: () => viewModel.resetImages(),
icon: Icon(Icons.close, color: Colors.black),
);
}
IconButton get buildanotherbutton {
return IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Passaword()),
);
},
icon: Icon(Icons.ac_unit, color: Colors.black),
);
}
Widget get buildSliverStaggeredGrid {
return SliverPadding(
padding: EdgeInsets.all(0),
sliver: Observer(builder: (_) {
return viewModel.loadingImages
? SliverToBoxAdapter(
child: Center(child: CircularProgressIndicator()))
: SliverStaggeredGrid.countBuilder(
crossAxisCount: 2,
itemCount: viewModel.images.length,
itemBuilder: (BuildContext context, int index) =>
buildImageTile(index),
crossAxisSpacing: 5,
mainAxisSpacing: 10,
staggeredTileBuilder: (int index) {
return buildStaggeredTile(viewModel.images[index]);
},
);
}),
);
}
StaggeredTile buildStaggeredTile(UnsplashImage image) {
double aspectRatio = image.height / image.width;
double columnWidth = MediaQuery.of(context).size.width / 2;
return StaggeredTile.extent(1, aspectRatio * columnWidth);
}
Widget buildImageTile(int index) {
return FutureBuilder(
future: viewModel.loadImage(index),
builder: (context, snapshot) => ImageTileWidget(image: snapshot.data),
);
}
}
If you want my whole code, I can share with you. I thought my file that has builder widget code is enough to solve the problem.
my builder widget here;
Widget get buildSliverStaggeredGrid {
return SliverPadding(
padding: EdgeInsets.all(0),
sliver: Observer(builder: (_) {
return viewModel.loadingImages
? SliverToBoxAdapter(
child: Center(child: CircularProgressIndicator()))
: SliverStaggeredGrid.countBuilder(
crossAxisCount: 2,
itemCount: viewModel.images.length,
itemBuilder: (BuildContext context, int index) =>
buildImageTile(index),
crossAxisSpacing: 5,
mainAxisSpacing: 10,
staggeredTileBuilder: (int index) {
return buildStaggeredTile(viewModel.images[index]);
},
);
}),
);
}