Firebase Pagination
A simple and effective way to Paginate Firebase related data.
Realtime Database
Firestore
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
.
firebase_pagination : ^3.1.0
import 'package:firebase_pagination/firebase_pagination.dart' ;
Simplest Firestore Pagination
FirestorePagination (
query: FirebaseFirestore .instance.collection ('scores' ).orderBy ('score' ),
itemBuilder: (context, documentSnapshot, index) {
final data = documentSnapshot.data () as Map <String , dynamic >;
// Do something cool with the data
},
),
Simplest Firebase Realtime Database Pagination
RealtimeDBPagination (
query: FirebaseDatabase .instance.ref ().child ('scores' ).orderByChild ('score' ),
orderBy: 'score' ,
itemBuilder: (context, dataSnapshot, index) {
final data = dataSnapshot.value as Map <String , dynamic >;
// Do something cool with the data
},
),
For more examples, see the examples section.
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.
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()
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
-
descending
Whether the data should be fetched in descending order or not. Only works for RealtimeDBPagination
bool
false