firestore_ui 1.9.1 copy "firestore_ui: ^1.9.1" to clipboard
firestore_ui: ^1.9.1 copied to clipboard

outdated

A port of firebase_database's FirebaseAnimatedList

firestore_ui #

pub package

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!