firestore_ui

Description:

firestore ui

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 recent QuerySnapshot that came from the stream
bool filter(DocumentSnapshot snapshot) - This allows you to filter out specific snapshots on the rendering phase, return true if you want that item to be filtered
bool 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,
),
),
);
copied to clipboard
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,
),
),
);
copied to clipboard
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,
),
),
);
copied to clipboard
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!