Flutter I am calling Rest Api and showing the data in the card with list items.How to implement Read More feature for every 10 list items loaded

Question

My code is as follows

ListView.separated(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index) => WalletHistoryItem(
                      walletHistory: state.walletHistory!.result![index]!),
                  separatorBuilder: (context, index) =>
                      const SizedBox(height: 16),
                  itemCount: state.walletHistory?.result?.length ?? 0)

Here I have used bloc pattern with models, repositories,widgets or screens under ui etc. I am fetching the api using Apiconstants.fetch etc

Answer 1

You can show one LoadMoreButton at the end of your result. And handle fetching more data and adding it to your existing list by clicking the button.

 ListView.separated(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
     
        separatorBuilder: (context, index) => const SizedBox(height: 16),
        itemBuilder: (context, index) {
          
          if(index == (state.walletHistory?.result?.length ?? 0) )
            return LoadMoreButton();
          
          return WalletHistoryItem(
              walletHistory: state.walletHistory!.result![index]!);
        },
        itemCount: (state.walletHistory?.result?.length ?? 0) + 1,
    )

Or you can use some pre-existing packages like https://pub.dev/packages/infinite_scroll_pagination