Bloc: flutter_infinite_list with GridView.builder or CustomScrollView

[Ponraj-Paulraj]

Hi @felangel, We tried to achieve "flutter_infinite_list" with GridView.builder and CustomScrollView, But not able to place "BottomLoader" at the bottom of the screen. And we are not able to handle state.hasReachedMax outside of ListView.builder. Any idea how to achieve this?

[felangel]

Hi @Ponraj-Paulraj 👋
Thanks for opening an issue!

Can you please provide a link to a sample app which illustrates the problem you're having? I can take a look and try to give feedback/open a pull request. Thanks!

[felangel]

Closing for now but feel free to comment with additional details and I'm happy to continue the conversation 👍

[Ponraj-Paulraj]

Hi @felangel ,

return CustomScrollView(
            controller: _scrollController,
            slivers: <Widget>[
            new SliverGrid(
              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 8.0,
                childAspectRatio: (itemWidth / itemHeight * 4 / 5),
              ),
              delegate: SliverChildBuilderDelegate(
                (c, i) {
                  return i >= state.posts.length ? Container() : PostWidget(post: state.posts[i]);
                },
                childCount: state.hasReachedMax ? state.posts.length : state.posts.length + 1,
              ),
            ),
            new SliverToBoxAdapter(
              child: BottomLoader(),
            ),
          ]);

Here, how to show BottomLoader() only when its actually hitting new paging data?

[felangel]

@adsonpleal you can add a property loadingAdditionalResults to the state and only show the BottomLoader if loadingAdditionalResults is true.

In the bloc you'd just need to yield an extra state with loadingAdditionalResults = true while fetching and loadingAdditionalResults = false when you have results.

Then your UI could look like

    return CustomScrollView(
      controller: _scrollController,
      slivers: <Widget>[
        SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 8.0,
            childAspectRatio: (itemWidth / itemHeight * 4 / 5),
          ),
          delegate: SliverChildBuilderDelegate(
            (c, i) {
              return i >= state.posts.length
                  ? Container()
                  : PostWidget(post: state.posts[i]);
            },
            childCount: state.hasReachedMax
                ? state.posts.length
                : state.posts.length + 1,
          ),
        ),
        if (state.loadingAdditionalResults)
          SliverToBoxAdapter(
            child: BottomLoader(),
          ),
      ],
    );

Hope that helps 👍

[Ponraj-Paulraj]

Thanks a lot @felangel , I will try this :)

[Ponraj-Paulraj]

@felangel , it works great bro. Thanks for your support. :)