GridView infinite scrolling CircularProgressIndicator position - flutter

Question

In my gridView there is a condition when to show CircularProgressIndicator(), but it is displayed incorrectly, in the gridView element, I need it to be displayed below the gridView. How can I show CircularProgressIndicator() correctly?
Widget buildCatalog(List<Product> product) => GridView.builder(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
// mainAxisExtent: ,
maxCrossAxisExtent: 300,
childAspectRatio: MediaQuery.of(context).size.width*1.22 /
(MediaQuery.of(context).size.height),
crossAxisSpacing: 10,
mainAxisSpacing: 10),
controller: sController,
itemCount: product.length + 1,
itemBuilder: (context, index) {
if (index < product.length) {
final media = product[index].media?.map((e) => e.toJson()).toList();
final photo = media?[0]['links']['local']['thumbnails']['350'];
final productItem = product[index];
return GestureDetector(
onTap: () {
},
child: Container(
child: Column(
children: <Widget>[
InkWell(
child: Container(
margin: EdgeInsets.only(top: 5),
child: Image.network(...)
),
),
),
SizedBox(
height: 10,
),
Text(
'${productItem.name}\n',
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 14),
),
// Spacer(),
SizedBox(height: 8),
Text('${productItem.price} ₸',
textAlign: TextAlign.start,
style: TextStyle(fontSize: 20, color: Colors.red)),
SizedBox(height: 5),
buildButton(index, productItem.id),
],
),
),
);
}
return const Center(child: CircularProgressIndicator(),);
},
);

Answer 1

wrap Gridview() and CircularProgressIndicator() into a column,
and change shrinkWarp and physics like below
Column(
children: [
Gridview.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: product.length + 1,
itemBuilder: (context, index) {
//return something you want
},
),
const CircularProgressIndicator()
],
)