Flutter and Cubit's modern pageable list view, seamless user interaction is our goal (tutorial with source code)

In this article, I'll focus on optimizing data loading for list views without the page stopping to load and displaying a "loading" widget. Also, we don't handle distance counts, end points reached, etc.

inspiration

This article was inspired by watching Remi Rousellet's Flutter Observable and the simple list view implementation he showed in Riverpod. Since we use Bloc ( <embed/it> ) in our company, I'm trying to reimplement this method of loading data in Cubit.

Problem Description

If we read data page by page, we have to initialize this action according to some action. There are two basic approaches in most tutorials.

Initially load the next page by showing the last item in the list view Initially
load the next page after calculating the distance in the viewport
This approach means that the user needs to wait for a while while scrolling. The user will just see the "Loading widget" when the data starts to load, or just wait for the data to load and show up in the list view. In both cases, this means that the user uses the scroll gesture again to reveal newly loaded data.

Please add a picture description

prerequisites

In this article, I describe a technique for using standard pagination with your API.

# Offset pagination
GET /items?limit=20&offset=100

# Keyset pagination
GET /items?limit=20&created:lte:2019-01-20T00:00:00

# Seek pagination
GET /items?limit=20&after_id=20

Formalization of API responses

Guess you like

Origin blog.csdn.net/iCloudEnd/article/details/132471710