Infinite scrolling list with Flutter - Flutter Pagination Example

Last updated Aug 18, 2021

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

 

Let's get started

Step 1: Create Flutter application

Step 2: Add dependencies

pagination: ^0.1.0
faker:

 

 

Step 3: Update dart file with below code

In this example we are using the Faker() library to generate fake user data.

 

import 'package:flutter/material.dart';

import 'package:faker/faker.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:pagination/pagination.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'PaginationView Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'PaginationView Example',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      body: 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'),
        ),
      ),
    );
  }

  Future<List<User>> pageFetch(int offset) async {
    final Faker faker = Faker();
    final List<User> upcomingList = List.generate(
      15,
          (int index) => User(
        faker.person.prefix(),
        faker.person.firstName(),
        faker.person.lastName(),
        faker.company.position(),
      ),
    );
    await Future<List<User>>.delayed(
      Duration(milliseconds: 1500),
    );
    return upcomingList;
  }


}

class User {
  User(this.prefix, this.firstName, this.lastName, this.designation);

  final String prefix;
  final String firstName;
  final String lastName;
  final String designation;
}

 

 

Flutter Infinite Scroll Pagination

 

 

Speeach to Text Flutter Voice Search Example

How to create pagination text in Android using Kotlin?

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

4836 Views