feat(ui_firestore): implemented separators and fetching indicator (#99)

ShahoodulHassan · lesnitsky · web-flow · commit d8d8bf594273 · 2024-01-04T15:07:16.000+01:00
* Added the following features to FirestoreListView:
- show separators between list items
- show loading indicator when the list reaches the end
- show both loading indicator and separators

* Separate constructors withLoadingIndicator and separatedWithLoadingIndicator have been removed.
This functionality is now achieved via constructor properties.

* Added firebase_ui_shared

* 1) pageSize default is set to 10 and it is not dependent on showLoadingIndicator anymore.
2) showLoadingIndicator is renamed to showFetchingIndicator. FirestoreLoadingIndicatorBuilder is also renamed to FirestoreFetchingIndicatorBuilder accordingly.
3) LoadingIndicator has been used from firebase_ui_shared package
4) Unnecessary comments deleted.
5) BuildAwareWidget is now called OnMountListener and its onBuild method is called onMount.
6) onMount can be called with a delay, that can be configured as per requirement. A default delay of 500ms has been used here to make the fetching indicator show for a bit of a time.

* Deleted the conflicting lines

* Updated firebase_ui_localizations to resolve conflict

* fix ui_shared dependency version

* fix: analyzer

---------

Co-authored-by: Andrei Lesnitsky &lt;a@lesnitsky.dev&gt;
diff --git a/packages/firebase_ui_firestore/lib/src/query_builder.dart b/packages/firebase_ui_firestore/lib/src/query_builder.dart
@@ -4,6 +4,7 @@
 
 import 'dart:async';
 
+import 'package:firebase_ui_shared/firebase_ui_shared.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:cloud_firestore/cloud_firestore.dart';
@@ -358,6 +359,11 @@ typedef FirestoreItemBuilder<Document> = Widget Function(
 /// A type representing the function passed to [FirestoreListView] for its `loadingBuilder`.
 typedef FirestoreLoadingBuilder = Widget Function(BuildContext context);
 
+/// A type representing the function passed to [FirestoreListView] for its `loadingIndicatorBuilder`.
+typedef FirestoreFetchingIndicatorBuilder = Widget Function(
+  BuildContext context,
+);
+
 /// A type representing the function passed to [FirestoreListView] for its `errorBuilder`.
 typedef FirestoreErrorBuilder = Widget Function(
   BuildContext context,
@@ -427,9 +433,11 @@ class FirestoreListView<Document> extends FirestoreQueryBuilder<Document> {
     required FirestoreItemBuilder<Document> itemBuilder,
     super.pageSize,
     FirestoreLoadingBuilder? loadingBuilder,
+    FirestoreFetchingIndicatorBuilder? fetchingIndicatorBuilder,
     FirestoreErrorBuilder? errorBuilder,
     FirestoreEmptyBuilder? emptyBuilder,
     Axis scrollDirection = Axis.vertical,
+    bool showFetchingIndicator = false,
     bool reverse = false,
     ScrollController? controller,
     bool? primary,
@@ -467,14 +475,45 @@ class FirestoreListView<Document> extends FirestoreQueryBuilder<Document> {
               return emptyBuilder(context);
             }
 
+            final itemCount = snapshot.docs.length;
+
             return ListView.builder(
-              itemCount: snapshot.docs.length,
+              itemCount: itemCount,
               itemBuilder: (context, index) {
-                final isLastItem = index + 1 == snapshot.docs.length;
-                if (isLastItem && snapshot.hasMore) snapshot.fetchMore();
+                final isLastItem = index + 1 == itemCount;
+                if (!showFetchingIndicator && isLastItem && snapshot.hasMore) {
+                  snapshot.fetchMore();
+                }
 
                 final doc = snapshot.docs[index];
-                return itemBuilder(context, doc);
+                return showFetchingIndicator
+                    ? OnMountListener(
+                        onMount: () {
+                          if (isLastItem && snapshot.hasMore) {
+                            snapshot.fetchMore();
+                          }
+                        },
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            itemBuilder(context, doc),
+                            if (isLastItem && snapshot.hasMore)
+                              fetchingIndicatorBuilder?.call(context) ??
+                                  const Padding(
+                                    padding: EdgeInsets.symmetric(
+                                      vertical: 16.0,
+                                    ),
+                                    child: Center(
+                                      child: LoadingIndicator(
+                                        size: 30.0,
+                                        borderWidth: 2.0,
+                                      ),
+                                    ),
+                                  ),
+                          ],
+                        ),
+                      )
+                    : itemBuilder(context, doc);
               },
               scrollDirection: scrollDirection,
               reverse: reverse,
@@ -497,6 +536,115 @@ class FirestoreListView<Document> extends FirestoreQueryBuilder<Document> {
             );
           },
         );
+
+  /// Shows a separator between list items just as in [ListView.separated]
+  FirestoreListView.separated({
+    super.key,
+    required super.query,
+    required FirestoreItemBuilder<Document> itemBuilder,
+    super.pageSize,
+    FirestoreLoadingBuilder? loadingBuilder,
+    FirestoreFetchingIndicatorBuilder? fetchingIndicatorBuilder,
+    FirestoreErrorBuilder? errorBuilder,
+    FirestoreEmptyBuilder? emptyBuilder,
+    required IndexedWidgetBuilder separatorBuilder,
+    Axis scrollDirection = Axis.vertical,
+    bool showFetchingIndicator = false,
+    bool reverse = false,
+    ScrollController? controller,
+    bool? primary,
+    ScrollPhysics? physics,
+    bool shrinkWrap = false,
+    EdgeInsetsGeometry? padding,
+    ChildIndexGetter? findChildIndexCallback,
+    bool addAutomaticKeepAlives = true,
+    bool addRepaintBoundaries = true,
+    bool addSemanticIndexes = true,
+    double? cacheExtent,
+    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
+    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior =
+        ScrollViewKeyboardDismissBehavior.manual,
+    String? restorationId,
+    Clip clipBehavior = Clip.hardEdge,
+  }) : super(
+          builder: (context, snapshot, _) {
+            if (snapshot.isFetching) {
+              return loadingBuilder?.call(context) ??
+                  const Center(child: CircularProgressIndicator());
+            }
+
+            if (snapshot.hasError && errorBuilder != null) {
+              return errorBuilder(
+                context,
+                snapshot.error!,
+                snapshot.stackTrace!,
+              );
+            }
+
+            if (snapshot.docs.isEmpty && emptyBuilder != null) {
+              return emptyBuilder(context);
+            }
+
+            final itemCount = snapshot.docs.length;
+
+            return ListView.separated(
+              itemCount: itemCount,
+              itemBuilder: (context, index) {
+                final isLastItem = index + 1 == itemCount;
+                if (!showFetchingIndicator && isLastItem && snapshot.hasMore) {
+                  snapshot.fetchMore();
+                }
+
+                final doc = snapshot.docs[index];
+                return showFetchingIndicator
+                    ? OnMountListener(
+                        onMount: () {
+                          if (isLastItem && snapshot.hasMore) {
+                            snapshot.fetchMore();
+                          }
+                        },
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            itemBuilder(context, doc),
+                            if (isLastItem && snapshot.hasMore)
+                              fetchingIndicatorBuilder?.call(context) ??
+                                  const Padding(
+                                    padding: EdgeInsets.symmetric(
+                                      vertical: 16.0,
+                                    ),
+                                    child: Center(
+                                      child: LoadingIndicator(
+                                        size: 30.0,
+                                        borderWidth: 2.0,
+                                      ),
+                                    ),
+                                  ),
+                          ],
+                        ),
+                      )
+                    : itemBuilder(context, doc);
+              },
+              separatorBuilder: separatorBuilder,
+              scrollDirection: scrollDirection,
+              reverse: reverse,
+              controller: controller,
+              primary: primary,
+              physics: physics,
+              shrinkWrap: shrinkWrap,
+              padding: padding,
+              findChildIndexCallback: findChildIndexCallback,
+              addAutomaticKeepAlives: addAutomaticKeepAlives,
+              addRepaintBoundaries: addRepaintBoundaries,
+              addSemanticIndexes: addSemanticIndexes,
+              cacheExtent: cacheExtent,
+              dragStartBehavior: dragStartBehavior,
+              keyboardDismissBehavior: keyboardDismissBehavior,
+              restorationId: restorationId,
+              clipBehavior: clipBehavior,
+            );
+          },
+        );
 }
 
 /// Listens to an aggregate query and passes the [AsyncSnapshot] to the builder.
@@ -541,3 +689,43 @@ class _AggregateQueryBuilderState extends State<AggregateQueryBuilder> {
     }
   }
 }
+
+/// This widget calls back, via the supplied onMount method, when it gets
+/// mounted.
+/// It also offers the functionality to safely delay the onMount callback by
+/// onMountDelay.
+///
+/// Borrowed the idea from the link below and built on it further:
+/// https://www.filledstacks.com/post/how-to-perform-real-time-pagination-with-firestore/?utm_source=pocket_reader
+class OnMountListener extends StatefulWidget {
+  final Function onMount;
+  final int onMountDelay; // in milliseconds
+  final Widget child;
+
+  const OnMountListener({
+    super.key,
+    required this.onMount,
+    this.onMountDelay = 500,
+    required this.child,
+  });
+
+  @override
+  State<OnMountListener> createState() => _OnMountListenerState();
+}
+
+class _OnMountListenerState extends State<OnMountListener> {
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+      Future.delayed(Duration(milliseconds: widget.onMountDelay), () {
+        if (mounted) widget.onMount();
+      });
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return widget.child;
+  }
+}
diff --git a/packages/firebase_ui_firestore/pubspec.yaml b/packages/firebase_ui_firestore/pubspec.yaml
@@ -10,6 +10,7 @@ environment:
 dependencies:
   cloud_firestore: ^4.13.3
   firebase_ui_localizations: ^1.9.0
+  firebase_ui_shared: ^1.4.1
   flutter:
     sdk: flutter
 
