A simple and effective way to Paginate Firebase related data.
Realtime Database |
Firestore |
|
|
|
|
Features
FirestorePagination
to simplify paginating firestore collections.
RealtimeDBPagination
to simplify paginating realtime database nodes.
- Get live updates when new data is added using
isLive
property.
- Get realtime changes on already loaded data.
- Descending pagination for
RealtimeDBPagination
.
Getting started
Add to Dependencies
firebase_pagination: ^4.1.0
Import the package
import 'package:firebase_pagination/firebase_pagination.dart';
Usage
FirestorePagination(
query: FirebaseFirestore.instance.collection('scores').orderBy('score'),
itemBuilder: (context, docs, index) {
final data = docs[index].data() as Map<String, dynamic>;
// Do something cool with the data
},
),
RealtimeDBPagination(
query: FirebaseDatabase.instance.ref().child('scores').orderByChild('score'),
orderBy: 'score',
itemBuilder: (context, dataNodes, index) {
final data = dataNodes[index].value as Map<String, dynamic>;
// Do something cool with the data
},
),
For more examples, see the examples section.
How it Works
- A data listener is added to the query with the given limit.
- Every time the user scrolls to the bottom of the list, the limit is increased.
- If there are any changes for the loaded data, it will be automatically updated.
- If
isLive
is true, a live listener is added to fetch data before the first load. (i.e. Newly added data will be automatically loaded)
- When new data is added, the data listener will be removed and a new data listener will be added with the new limit.
- Also the live listener will be removed and a new live listener will be added.
- Both
FirestorePagination
and RealtimeDBPagination
uses maximum of two stream listeners
to fetch data.
- Hence it is performant and uses minimum amount of resources.
- The listeners are automatically removed when the widget is removed from the widget tree.
- For fetching data, the widgets uses this hack to minimize the number of reads from the database.
Description
Property |
Description |
Type |
Default |
query |
The query to use to fetch data from Firestore / Realtime Database. |
Query |
- |
itemBuilder |
The builder to use to build the items in the list. |
Function |
- |
separatorBuilder |
The builder to use to render the separator. |
Function |
separatorBuilder (package fn) |
limit |
The number of items to fetch from Database at once. |
int |
10 |
viewType |
The type of view to use for the list. |
ViewType |
ViewType.list |
isLive |
Whether to fetch newly added items as they are added to Database. |
bool |
false |
gridDelegate |
The delegate to use for the GridView. |
SliverGridDelegate |
crossAxisCount: 2 |
wrapOptions |
The Wrap widget properties to use. |
WrapOptions |
WrapOptions() |
pageOptions |
The PageView widget properties to use. |
PageOptions |
PageOptions() |
onEmpty |
The widget to use when data is empty. |
Widget |
EmptyScreen() |
bottomLoader |
The widget to use when more data is loading. |
Widget |
BottomLoader() |
initialLoader |
The widget to use when data is loading initially. |
Widget |
InitialLoader() |
scrollDirection |
The scrolling direction of the ScrollView. |
Axis |
false |
reverse |
Whether the ScrollView scrolls in the reading direction. |
bool |
false |
shrinkWrap |
Should the ScrollView be shrink-wrapped. |
bool |
false |
physics |
The scroll behavior to use for the ScrollView. |
ScrollPhysics |
- |
padding |
The padding to use for the ScrollView. |
EdgeInsetsGeometry |
- |
controller |
The controller to use for the ScrollView. |
ScrollController |
ScrollController() |
pageController |
The controller to use for the PageView. |
PageController |
PageController() |
descending |
Whether the data should be fetched in descending order or not. Only works for RealtimeDBPagination |
bool |
false |
If you liked the package, then please give it a Like 👍🏼 and Star ⭐
Libraries
- A package to paginate your firebase related data with realtime updates.