firestore_ui
This project started as a Pull Request to the official cloud_firestore plugin, but unfortunately they are still polishing the main features and this had to be postponed; it's based on firebase_database's version.
But fear not, my fellow Cloud Firestore users, this is a package that extracted the main code from that PR and now it's available to use!
Custom parameters
bool linear
- This will make it so it just uses.add
instead of.insert
, this usually leads to less issues in the order if your list updates linearly (like a chat)void onLoaded(QuerySnapshot snapshot)
- You can use this to access the most recentQuerySnapshot
that came from the streambool filter(DocumentSnapshot snapshot)
- This allows you to filter out specific snapshots on the rendering phase, returntrue
if you want that item to be filteredbool debug
- Set this to see all logs related to inserting/removing/updating items on any variant of the list
How to use
All the examples below are from the actual example
folder, please run that to see how it behaves!
List
Just set it up as you would with a ListView.builder
:
FirestoreAnimatedList(
query: query,
itemBuilder: (
BuildContext context,
DocumentSnapshot snapshot,
Animation<double> animation,
int index,
) => FadeTransition(
opacity: animation,
child: MessageListTile(
index: index,
document: snapshot,
onTap: _removeMessage,
),
),
);
Grid
Just set it up as you would with a GridView.count
, alongside the necessary crossAxisCount
, all the other parameters from the SliverGridDelegateWithFixedCrossAxisCount
are also available:
FirestoreAnimatedGrid(
query: query,
crossAxisCount: 2,
mainAxisSpacing: 4.0,
childAspectRatio: 1.0,
crossAxisSpacing: 4.0,
itemBuilder: (
BuildContext context,
DocumentSnapshot snapshot,
Animation<double> animation,
int index,
) => FadeTransition(
opacity: animation,
child: MessageGridTile(
index: index,
document: snapshot,
onTap: _removeMessage,
),
),
);
Staggered
Just set it up as you would with a StaggeredGridView.countBuilder
, alongside the necessary crossAxisCount
and the staggeredTileBuilder
:
FirestoreAnimatedStaggered(
query: query,
staggeredTileBuilder: (int index, DocumentSnapshot snapshot) => StaggeredTile.count(2, index.isEven ? 2 : 1),
crossAxisCount: 4,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
itemBuilder: (
BuildContext context,
DocumentSnapshot snapshot,
Animation<double> animation,
int index,
) => FadeTransition(
opacity: animation,
child: MessageGridTile(
index: index,
document: snapshot,
onTap: _removeMessage,
),
),
);
Special thanks to @letsar for the flutter_staggered_grid_view
package! Without it, this part wouldn't be available; please check out the library for more info on how it works!