flutterdartflutter-layout

Show widget at the center bottom on a gridview

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:

enter image description here

What I want:

enter image description here

Solution

  • 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.

    enter image description here

    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.