title: Wrong behavior of Flutter at Firebase update
body: <p>I've the below code, that read <code>baby</code> name and vote from <code>firestore</code> and represent the info in <code>Cards</code> with thump_up and thump_down buttons.</p>
  
  <p>The data is updated upon changes at firebase database, but it is updated wrongly, for example in he screen shoot below, first I entered <code>Karam</code> baby data, and it is updated correctly, then I entered 'Dana' baby data, but it created another card with <code>Karam</code> baby data (i.e. the same one just created before it), but when entering <code>Yara</code> baby data, correct card had been created for here! I think because it is at the end of the list!</p>
  
  <p>Moreover, in the last screen shoot, I deleted the record for <code>Dana</code> baby from the data base, but what had been deleted is the last card that got created, which is for <code>Yara</code> baby!! </p>
  
  <p>Same once we click the <code>thumb_up</code> icon, the vote is updated un in the database, but not reflected in the card :(</p>
  
  <p><code>main.dart</code>:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:cloud_firestore/cloud_firestore.dart';
  import 'BabyModel.dart';
  import 'BabyCard.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatefulWidget {
    MyApp();
  
    @override
    State&lt;StatefulWidget&gt; createState() =&gt; MyAppState();
  }
  
  class MyAppState extends State&lt;MyApp&gt; {
    @override
    Widget build(BuildContext ctxt) {
      return StreamBuilder(
        stream: Firestore.instance.collection('baby').snapshots(),
        builder: (_, AsyncSnapshot&lt;QuerySnapshot&gt; snapshot) {
          var documents = snapshot.data?.documents ?? [];
          var baby =
          documents.map((snapshot) =&gt; BabyData.from(snapshot)).toList();
          return BabyPage(baby);
        },
      );
    }
  }
  
  class BabyPage extends StatefulWidget {
    final List&lt;BabyData&gt; allBaby;
  
    BabyPage(this.allBaby);
  
    @override
    State&lt;StatefulWidget&gt; createState() {
      return BabyPageState();
    }
  }
  
  
  class BabyPageState extends State&lt;BabyPage&gt; {
    @override
    Widget build(BuildContext context) {
  
    //  var filteredBaby = widget.allFish.where((BabyData data) {
    //    data.name = 'Dana';
    //  }).toList();
  
      return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: SafeArea(
          child: Scaffold(
          body: Container(
          child: ListView.builder(
              itemCount: widget.allBaby.length,
              padding: const EdgeInsets.only(top: 10.0),
              itemBuilder: (context, index) {
                return BabyCard(widget.allBaby[index]);
              })
        ),
      )));
    }
  }
  </code></pre>
  
  <p><code>BabyModel.dart</code>:</p>
  
  <pre><code>import 'package:cloud_firestore/cloud_firestore.dart';
  
  class BabyData {
    final DocumentReference reference;
    String name;
    int vote;
  
    BabyData.data(this.reference,
        [this.name,
          this.vote]) {
      // Set these rather than using the default value because Firebase returns
      // null if the value is not specified.
      this.name ??= 'Frank';
      this.vote ??= 7;
    }
  
    factory BabyData.from(DocumentSnapshot document) =&gt; BabyData.data(
        document.reference,
        document.data['name'],
        document.data['vote']);
  
    void save() {
      reference.setData(toMap());
    }
  
    Map&lt;String, dynamic&gt; toMap() {
      return {
        'name': name,
        'vote': vote,
      };
    }
  }
  </code></pre>
  
  <p><code>BabyCard.dart</code>:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'BabyModel.dart';
  
  class BabyCard extends StatefulWidget {
    final BabyData baby;
  
    BabyCard(this.baby);
  
    @override
    State&lt;StatefulWidget&gt; createState() {
      return BabyCardState(baby);
    }
  }
  
  class BabyCardState extends State&lt;BabyCard&gt; {
    BabyData baby;
    String renderUrl;
  
    BabyCardState(this.baby);
  
    Widget get babyCard {
      return
        new Card(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: &lt;Widget&gt;[
              ListTile(
                leading: const Icon(Icons.album),
                title: Text('The ${baby.name} is having:'),
                subtitle: Text('${baby.vote} Votes.'),
              ),
              new ButtonTheme.bar( // make buttons use the appropriate styles for cards
                child: new ButtonBar(
                  children: &lt;Widget&gt;[
                    new FlatButton(
                      child: const Icon(Icons.thumb_up),
                      onPressed: () =&gt; Firestore.instance.runTransaction((transaction) async {
                         DocumentSnapshot freshSnap =
                             await transaction.get(baby.reference);
                         await transaction.update(
                             freshSnap.reference, {'vote': freshSnap['vote'] + 1});
                  }),
                    ),
                    new FlatButton(
                      child: const Icon(Icons.thumbs_up_down),
                      onPressed: () { /* ... */ },
                    ),
                    new FlatButton(
                      child: const Icon(Icons.thumb_down),
                      onPressed: () { /* ... */ },
                    )]))]));
    }
  
    @override
    Widget build(BuildContext context) {
      return new Container(
            child:  babyCard,
          );
    }
  }
  </code></pre>
  
  <p>Below shows wrong data adding into the card, <code>Dana</code> baby not there:</p>
  
  <p><a href="https://i.stack.imgur.com/AXKCK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AXKCK.png" alt="enter image description here"></a></p>
  
  <p>Below shows wrong data removing from the card, <code>Yara</code> baby card had been removed, upon removing <code>Dana</code> baby record!:</p>
  
  <p><a href="https://i.stack.imgur.com/lPwuw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lPwuw.png" alt="enter image description here"></a></p>