DEV Community

loading...
Cover image for Infinite scrolling list with Flutter - Flutter Pagination Example

Infinite scrolling list with Flutter - Flutter Pagination Example

rrtutors profile image rrtutors Updated on ・1 min read

There are lots of apps that contains feature lists. Sometimes app needs to build lists of settings, lists of todo items, lists of Images, lists of posts etc. While fetchin these data somw time the data could scroll endlessly. Examples like a Twitter timeline, a Facebook feed or a list of posts on Reddit etc...

How to build this infinite scrolling list in flutter. In this post we will create infinite scroll pagination data with flutter.

To implement this pagination we will use pagination plugin

Load Infinite List data with PaginationList widget


PaginationList<User>(
        shrinkWrap: true,
        padding: EdgeInsets.only(
          left: 5,
          right: 5,
        ),
        separatorWidget: Container(
          height: 0.5,
          color: Colors.black,
        ),
        itemBuilder: (BuildContext context, User user) {
          return ListTile(
            title:
            Text(user.prefix + " " + user.firstName + " " + user.lastName),
            subtitle: Text(user.designation),
            leading: IconButton(
              icon: Icon(Icons.person_outline),
              onPressed: () => null,
            ),
            onTap: () => print(user.designation),
            trailing: Icon(
              Icons.call,
              color: Colors.green,
            ),
          );
        },
        pageFetch: pageFetch,
        onError: (dynamic error) => Center(
          child: Text('Something Went Wrong'),
        ),
        initialData: <User>[
          User(
            faker.person.prefix(),
            faker.person.firstName(),
            faker.person.lastName(),
            faker.company.position(),
          ),
          User(
            faker.person.prefix(),
            faker.person.firstName(),
            faker.person.lastName(),
            faker.company.position(),
          ),
        ],
        onEmpty: Center(
          child: Text('Empty List'),
        ),
      ),
    );
Enter fullscreen mode Exit fullscreen mode

Conclusion
I think now you know how to build this infinite scrolling list in flutter. In this post we will create infinite scroll pagination data with flutter.

My Other Posts
Flutter Form Validation

Discussion (0)

pic
Editor guide