How to align loading icon at center horizontally in PagedGridView?

Question

I am trying to display the news items in PagedGridView using infinite scrolling for loading finite amount of data at a time. Everything is working fine, but I got stuck in managing alignment of loading indicator while fetching additional data. The loading icon is aligned to right while I want it to be at center of screen horizontally.

PagedGridView(
                    pagingController: _pagingController,
                    scrollController: _scrollController,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        childAspectRatio: 5.2 / 8.0,
                        crossAxisCount: 2,
                        crossAxisSpacing: 1.5,
                        mainAxisSpacing: 3.0,
                        mainAxisExtent: 225),
                    builderDelegate: PagedChildBuilderDelegate<Post>(
                        itemBuilder: (context, item, index) {
                            return AllNewsCard(
                                allNews:
                                newsHeadlineController.getAllNewsList[index]);
                         
                    }),
                  )

Answer 1

Don't add the loading indicator as a grid item. That's why it's positioned on the right. I would use CustomScrollView with SliverGrid instead of PagedGridView and SliverFillRemaining for displaying an activity indicator.

  CustomScrollView(
    slivers: [
      SliverGrid(
        delegate: SliverChildBuilderDelegate(
            itemBuilder: (context, index) {
          return AllNewsCard(
              allNews: newsHeadlineController.getAllNewsList[index]);
        }),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          childAspectRatio: 5.2 / 8.0,
          crossAxisCount: 2,
          crossAxisSpacing: 1.5,
          mainAxisSpacing: 3.0,
          mainAxisExtent: 225,
        ),
      ),
      if (isLoading)
        SliverFillRemaining(
          hasScrollBody: false,
          child: CircularProgressIndicator(),
        ),
    ],
  );