Как изменить состояние и сохранить текущее состояние с флаттером?

Question

У меня есть любимая иконка и количество лайков рядом с ней, когда я нажимаю кнопку, она меняет иконку, но не увеличивает число, а только увеличивает, когда я перезагружаю страницу, как я могу ее изменить?

class LanchonetesContact extends StatefulWidget {
final DocumentSnapshot lanchonetes;

LanchonetesContact(this.lanchonetes);

@override
_LanchonetesContactState createState() => _LanchonetesContactState();
}

class _LanchonetesContactState extends State<LanchonetesContact> {
bool liked = false;

void _pressed() {
setState(() {
  liked = !liked;

});
}

void _changeLikes() {
setState(() {
  if (liked) {
    Firestore.instance
        .collection('lanchonetes')
        .document(widget.lanchonetes.documentID)
        .updateData({'likes': FieldValue.increment(1)});
  } else {
    Firestore.instance
        .collection('lanchonetes')
        .document(widget.lanchonetes.documentID)
        .updateData({'likes': FieldValue.increment(-1)});
  }
  });
 }



@override
Widget Padding(
        padding: EdgeInsets.only(top: 0.0),
        child: Card(
            elevation: 1.0,
            child: GestureDetector(
              child: Container(
                height: 70.0,
                width: 390.0,
                color: Colors.white,
                child: Padding(
                  padding: EdgeInsets.symmetric(
                      vertical: 15.0, horizontal: 15.0),
                  child: Row(
                    children: <Widget>[
                      Padding(
                        padding:
                            const EdgeInsets.only(left: 100.0, bottom: 30),
                        child: Icon(
                          liked ? Icons.favorite : Icons.favorite_border,
                          color: Colors.black,
                          size: 50.0,
                        ),
                      ),
                      Text(
                        widget.lanchonetes.data["likes"].toString(),
                        style: TextStyle(fontSize: 40.0),
                      ),
                    ],
                  ),
                ),
              ),
              onTap: () {
                _pressed();
                _changeLikes();

              },
            )),
      ),

Я также заметил, что он не поддерживает состояние, если я перехожу на другую страницу и после возврата значок больше не будет понравиться. Любая идея о том, как справиться с этими ситуациями?

Answer 1

Функция updateData является асинхронной c, поэтому setState обновляется до изменения данных DocumentSnapshot. Чтобы решить эту проблему, вы можете сделать:

void _changeLikes() {
 Firestore.instance
        .collection('lanchonetes')
        .document(widget.lanchonetes.documentID)
        .updateData({'likes': FieldValue.increment(liked ? 1 : -1)
        .then((_) => setState(() => {}))
}

Хотя этот метод должен работать, есть лучшие способы работы с firestore:

FIREBASE WITH STREAMBUILDER

Обернуть содержимое с помощью построителя потоков с моментальным снимком документа:

StreamBuilder(
    stream: Firestore.instance
        .collection('lanchonetes')
        .document(widget.lanchonetes.documentID).snapshots(),
    builder: (context, snapshot) => Text(
         snapshot.data.data["likes"].toString(),
         style: TextStyle(fontSize: 40.0),
    ) //DocumentSnapshot is in snapshot.data,
 );

и

void _changeLikes() {
 Firestore.instance
        .collection('lanchonetes')
        .document(widget.lanchonetes.documentID)
        .updateData({'likes': FieldValue.increment(liked ? 1 : -1);    
}