firestore_ui 1.7.0

A port of firebase_database's FirebaseAnimatedList

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.

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!

Check out the example for more info, it should be pretty straight forward since it's just a port of firebase_database's version.

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: (index) => 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,
        ),
    ),
);