firebase_pagination 3.1.0 copy "firebase_pagination: ^3.1.0" to clipboard
firebase_pagination: ^3.1.0 copied to clipboard

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
    
  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,
  ),
),
51
likes
140
pub points
96%
popularity

Publisher

verified publisheroutdatedguy.rocks

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

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

cloud_firestore, firebase_database, flutter

More

Packages that depend on firebase_pagination