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

2. Change directory to example:

   cd firebase_pagination/example

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

4. Run the app using:

   Supported platforms are android, ios, macos and web.

    flutter run

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'],
      ),
    );
  },
),

---

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,
    );
  },
),

---

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,
  ),
),

---

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,
  ),
),