title: Flutter: Items in StreamBuilder(Using firebase realtime database) are sorted randomly
body: <p>I'm creating a simple application with Firebase Realtime database where a user inputs a text and it gets added to a list of chats.</p>
  
  <pre><code>void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.indigo,
        ),
        home: MyHomePage(),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    var _firebaseRef = FirebaseDatabase().reference().child('chats');
    TextEditingController _txtCtrl = TextEditingController();
  
    @override
    Widget build(BuildContext context) {
      var comments = _firebaseRef.orderByChild('time').limitToLast(10);
      return Scaffold(
        body: Container(
          child: SafeArea(
            child: Column(
              children: &lt;Widget&gt;[
                Container(
                    child: Row(children: &lt;Widget&gt;[
                  Expanded(child: TextField(controller: _txtCtrl)),
                  SizedBox(
                      width: 80,
                      child: OutlineButton(
                          child: Text("Add"),
                          onPressed: () {
                            sendMessage();
                          }))
                ])),
                StreamBuilder(
                  stream: comments.onValue,
                  builder: (context, snap) {
                    if (snap.hasData &amp;&amp;
                        !snap.hasError &amp;&amp;
                        snap.data.snapshot.value != null) {
                      Map data = snap.data.snapshot.value;
                      List item = [];
  
                      data.forEach(
                          (index, data) =&gt; item.add({"key": index, ...data}));
  
                      return Expanded(
                        child: ListView.builder(
                          itemCount: item.length,
                          itemBuilder: (context, index) {
                            return ListTile(
                              title: Text(item[index]['message']),
                            );
                          },
                        ),
                      );
                    } else
                      return Center(child: Text("No data"));
                  },
                ),
              ],
            ),
          ),
        ),
      );
    }
  
    sendMessage() {
      _firebaseRef.push().set({
        "message": _txtCtrl.text,
        'time': DateTime.now().millisecondsSinceEpoch
      });
    }
  
  
  }
  </code></pre>
  
  <p>It stores and retrieves data perfectly. But when I try adding data, the new items are placed at random points in the list.</p>
  
  <p>For example, in the image below, the last item I placed into the list was 'Nine'. But it was put in the center of the list:</p>
  
  <p><a href="https://i.stack.imgur.com/HI7QO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HI7QO.png" alt="enter image description here"></a></p>
  
  <p>I've tried sorting the list by timestamps, but it did nothing.</p>
  
  <p>What could be causing this issue? And how can I fix it?</p>