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!
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!