firebase_pagination 4.1.0

A flutter package to paginate realtime database and firestore with live updates.

example/example.md

Examples / Usages

Note: This file only contains examples for Firestore Database.
But all of this can be implemented for Firebase Realtime Database using the RealtimeDBPagination widget with only the query and itemBuilder params differing from FirestorePagination.

To try package example follow these steps:

1. Clone the repo using:

   git clone https://github.com/OutdatedGuy/firebase_pagination
   

   copied to clipboard

2. Change directory to example:

   cd firebase_pagination/example
   

   copied to clipboard

3. Run flutterfire cli to setup firebase project:

   flutterfire configure --project=<your-firebase-project-id> --platforms="android,ios,macos,web" -i rocks.outdatedguy.firebasePaginationExample -m rocks.outdatedguy.firebasePaginationExample -a rocks.outdatedguy.firebase_pagination_example -w firebase_pagination_example
   

   copied to clipboard

4. Run the app using:

   Supported platforms are android, ios, macos and web.

    flutter run
   

   copied to clipboard

For a simple list view pagination (with a custom bottom loader)

FirestorePagination(
  limit: 420, // Defaults to 10.
  viewType: ViewType.list,
  bottomLoader: const Center(
    child: CircularProgressIndicator(
      strokeWidth: 3,
      color: Colors.blue,
    ),
  ),
  query: FirebaseFirestore.instance
      .collection('scores')
      .orderBy('score', descending: true),
  itemBuilder: (context, documentSnapshot, index) {
    final data = documentSnapshot.data() as Map<String, dynamic>?;
    if (data == null) return Container();

    return Container(
      child: RecordTile(
        name: data['name'],
        score: data['score'],
      ),
    );
  },
),

copied to clipboard

---

For live chat-like application with pagination (with separator between messages)

FirestorePagination(
  limit: 69, // Defaults to 10.
  isLive: true, // Defaults to false.
  viewType: ViewType.list,
  reverse: true,
  query: FirebaseFirestore.instance
      .collection('chats')
      .orderBy('createdAt', descending: true),
  itemBuilder: (context, documentSnapshot, index) {
    final data = documentSnapshot.data() as Map<String, dynamic>?;
    if (data == null) return Container();

    return MessageTile(
      senderName: data['senderName'],
      senderImageUrl: data['senderImageUrl'],
      message: data['message'],
      createdAt: data['createdAt'],
    );
  },
  separatorBuilder: (context, index) {
    return const Divider(
      height: 5,
      thickness: 1,
    );
  },
),

copied to clipboard

---

For grid view with pagination (with custom no data view)

FirestorePagination(
  limit: 14, // Defaults to 10.
  viewType: ViewType.grid,
  onEmpty: const Center(
    child: Text('Cart is empty'),
  ),
  query: FirebaseFirestore.instance
      .collection('cart')
      .orderBy('price'),
  itemBuilder: (context, documentSnapshot, index) {
    final data = documentSnapshot.data() as Map<String, dynamic>?;
    if (data == null) return Container();

    return GridTile(
      itemName: data['itemName'],
      itemImageUrl: data['itemImageUrl'],
      price: data['price'],
    );
  },
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    mainAxisSpacing: 8.0,
    crossAxisSpacing: 8.0,
  ),
),

copied to clipboard

---

For Scrollable Wrap with pagination (with custom scrollDirection)

FirestorePagination(
  limit: 12, // Defaults to 10.
  viewType: ViewType.wrap,
  scrollDirection: Axis.horizontal, // Defaults to Axis.vertical.
  query: FirebaseFirestore.instance
      .collection('categories')
      .orderBy('popularity', descending: true),
  itemBuilder: (context, documentSnapshot, index) {
    final data = documentSnapshot.data() as Map<String, dynamic>?;
    if (data == null) return Container();

    return Container(
      constraints: const BoxConstraints(maxWidth: 169),
      child: CategoryTile(
        categoryName: data['categoryName'],
        categoryImageUrl: data['categoryImageUrl'],
      ),
    );
  },
  wrapOptions: const WrapOptions(
    alignment: WrapAlignment.start,
    direction: Axis.vertical,
    runSpacing: 10.0,
  ),
),

copied to clipboard