Firestore Scaffold

Just like material Scaffold this Firestore Scaffold designed specifically for firestore which displays realtime paginated list view or gird view based on screensize. You can also add Search feature based on query as well.

Features

📱 Firestore Scaffold
🔎 Search with query
📈 Firestore Realtime pagination
𝍌 List view style
⌗ Grouped List View
🌊 Waterflow Grid view style

Getting started

Add dependency

dependencies:
  ha_firestore_scaffold: # latest version

Usage

Use HAFirestoreScaffold as a normal scaffold to get a realtime paginated result from firestore query.

    HAFirestoreScaffold(
      title: widget.title,
      query: FirebaseFirestore.instance
          .collection("users")
          .orderBy("addedDate", descending: true),
      limit: (deviceType) {
        return 50;
      },
      itembuilder: (context, snapshot) {
        Map<String, dynamic> data = snapshot.data() as Map<String, dynamic>;
        return ListTile(
          title: Text(data['name'] ?? "no name"),
        );
      },
      emptyWidget: const Center(
        child: Text("no data found"),
      ),
    )

Search

You can have a search in the scaffold as well by using HAFirestoreSearch as a searchDelegate where searchField will be a document field with array of strings

  HAFirestoreSearch(
    firestoreQuery: FirebaseFirestore.instance
        .collection("users")
        .orderBy("addedDate", descending: true),
    searchField: 'keywords',
    builder: (context, snapshot) {
      Map<String, dynamic> data = snapshot.data() as Map<String, dynamic>;
      return ListTile(
        title: Text(data['name'] ?? "no name"),
      );
    },
    emptyWidget: const Center(
      child: Text("no search data found"),
    ),
  )

Grouping (Sticky Headers)

You can group your listing by passing groupBy field and your header widget in the HAFirestoreScaffold constructor.

  HAFirestoreScaffold(
    ...
    groupBy: "addedDate",
    header: (groupFieldValue) {
      return Container(
        color: Colors.white,
        child: Text("$groupFieldValue"),
      );
    },
    ...
  )

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Hafeez Ahmed}

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue. If you fixed a bug or implemented a feature, please send a pull request.