Show widget at the center bottom on a gridview

Question

I have a gridview with 2/3 columns and I would like to show a loading indicator at the bottom-center of the grid when the user scrolls to the end. Adding the loading indicator as the last element of the grid doesn't look good because it isn't centered. Is this possible?

Code snippet:

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2, childAspectRatio: 480 / 315),
  controller: controller,
  itemCount: videos.length + 1,
  itemBuilder: (context, index) {
    if (index == videos.length) {
      //show loading indicator at last index
      return SpinKitThreeBounce(
               color: Colors.white,
               size: 35.0,
            );
    }
    return VideoItem(video: videos[index]);
  },
);

What I have:

What I want:

Answer 1

This should also be possible using CustomScrollView.

https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html

Inside this you can use both SliverGrid and SliverList to create your Layout. This way you can put the spinner in the SliverList and hide it when the SliverGrid is updated.

The yellow oval is the spinner.

this is the code i used:

return CustomScrollView(
    slivers: <Widget>[
      SliverGrid(
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 200.0,
            mainAxisSpacing: 5.0,
            crossAxisSpacing: 10.0,
            childAspectRatio: 1.0,
        ),
        delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Product(
                  product_name: listItem[index]['name'],
                  product_pic: listItem[index]['pic'],
                  product_price: listItem[index]['price'],
                  product_old: listItem[index]['old_price'],
                  );
                },
          childCount: listItem.length
        )
      ),
      SliverList(

        delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return SpinKitRotatingCircle(
                    color: Colors.amber,
                    size: 60.0,
                    
                  );
                },
                childCount: 1,

        ),
      )
    ],
);

You can after implement different solutions for the spinner behaviour.