Flutter Infinite Scroll with BLOC State Management


From the article we can discuss how to make Infinity scroll View using BLOC, before to start we understand :

Why use Bloc?

Bloc is designed with 3 core values:

  • Simple easy to understand and can be used by developers with multiple levels.
  • Powerful can help in making complex applications, because BLOC itself is composed of small components.
  • Testable easy to test, starting from Widget Test and even Integration Test.


Problem case

Ok, let's start from the crux of the problem, in a table there is pagination where when we press Next Page/Number Next Page it refers to the next Data page, but that Pagination is intended for Table View.

  • What if the data is displayed in the form of List view scroll ?
  • How to Next Page and Previous Page data ?

Solution

Let's start using Infinite Scroll, So Infinite Scroll is a technique or design that will load more content when the user is scrolling.* This design view allows users to scroll without any page limit.

For Next Page we will use a technique where when scrolling has reached the end, the Next Page will be run, what happens when this Next Page is we will add data as the next data sequence.

Application

Before to Implementation we go there we must have created an init project, you can use Verygood Cli to create an Init Project.

Project Structure


If you created of init project please install the package below :

  • bloc
  • equatable
  • flutter_bloc
  • dio
  • pretty_dio_logger

Rest Api

We use the jsonplaceholder for data source.

Jsonplaceholder is an online REST API which serves fake data; it’s very useful for building prototypes.

Please use the https://jsonplaceholder.typicode.com/users?_start=0&_limit=2 and Please run it on your Web Browser, we can see how data is shown.

Data Model

Create new file user.dart then enter into folder src/user/model

We are use the model data [id, name, username] .The data type we can customize on response restApi above.

Cubit

We use the cubit because the cubit is simple and practical.

User State

Create new file user_state.dart into path src/user/cubit


UserStatus consists of several conditions:

  • initial the condition where the initial data is processed or the initial processing stage.
  • success conditions in which the data has been processed and the data obtained.
  • failure condition where error when data is processed.

User Cubit

Please create new file user_cubit.dart into file src/user/cubit