How to know if the writes in Firebase are on the server or only cached?

Question

I built an Agro App, where the majority of users are Offline when they register the data and when they return to the central site they obtain an Internet connection and the data goes up.

However, it is not clear to the user whether or not his record was uploaded to the cloud, so I would like to implement a tick system similar to that used by WhatsApp:

• Gray tick when the data is written and is only in cache

• Blue tick when the data uploads to the cloud and therefore is available to other users

What I imagine is something like this:

The procedure with which I display the list is as follows:

Widget _crearListado(BuildContext context, AlimentarBloc alimentarBloc) {

    return Column(
      children: <Widget>[

        Container(
          child: Padding(
            child: StreamBuilder(
                stream: alimentarBloc.alimentarStream,
                builder: (BuildContext context, AsyncSnapshot<List<AlimentarModel>> snapshot){
                  if (snapshot.hasData) {
                    final alimentarList = snapshot.data;
                    if (alimentarList.length == 0) return _imagenInicial(context);
                    return Container(
                      child: Stack(
                        children: <Widget>[
                          ListView.builder(
                            itemCount: alimentarList.length,
                            itemBuilder: (context, i) =>_crearItem(context, alimentarBloc, alimentarList[i]),
                        ],
                      ),
                    );
                  } else if (snapshot.hasError) {
                    return Text(snapshot.error.toString());
                  } 
                    return Center (child: Image(image: AssetImage('assets/Preloader.gif'), height: 200.0,));
                },
            ),
          ),
        ),
      ],
    );
  }

  Widget _crearItem(BuildContext context, AlimentarBloc alimentarBloc, AlimentarModel alimentar) { 

      return Stack( 
          alignment: Alignment.centerLeft,
          children: <Widget>[
            Container(
              child: Card(
                  child: ListTile(
                    leading: Container(, 
                      child: Text(" ${alimentar.nombreRefEstanque}"),
                    ),
                    title: Text('${alimentar.nombreAlimentoFull}'),
                    subtitle: Container(
                      child: Container(
                            child: Text ('$_fechaAlimentar)
                      ),
                    ),
                    onTap: () => null,
                    trailing: Container(
                      child: Text("${alimentar.consumo),
                  ),
              )
            ),
          ],
        );
  }

What options do you see to mark the data when they have already uploaded to the Internet? Can I do that?

Answer 1

Unfortunately the Firebase Realtime Database does not have a built-in marker on a data snapshot to indicate whether it's been synchronized to the server.

The simplest approach to implement something like this is to add a completion listener to the write operation, and mark the write as completed when this listener is invoked. This only works while the app remains active however. If the app is restarted, your data will be synchronized later, but no completion handler will be invoked.

If you also want to handle that case, you could write a marker value into the database when the app starts, and add a completion listener for that too. Once the completion listener for the marker value is written, you know that all writes that were queued up before that were also processed by the server.

You could combine the two approaches and:

1. Keep a set of outstanding write operations in local storage.
2. Add the key of each item that you write.
3. Remove the key for an item when its completion handler is called.
4. Clear the entire list when he app is restarted and your marker value is confirmed.

By the way: this is one area where Cloud Firestore (the other database that is part of Firebase) has a much better API, as it has a hasPendingWrites property that indicates if there are pending writes on the snapshot.