Как заказать предметы из Streambuilder

Question

Я создаю простое приложение с помощью Cloud Firestore, где я набираю текст, и оно добавляется в список.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _txtCtrl = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: SafeArea(
          child: Column(
            children: <Widget>[
              Container(
                  child: Row(children: <Widget>[
                Expanded(child: TextField(controller: _txtCtrl)),
                SizedBox(
                    width: 80,
                    child: OutlineButton(
                        child: Text("Add"),
                        onPressed: () {
                          Firestore.instance
                              .collection('messages')
                              .document()
                              .setData({'message': _txtCtrl.text});
                        })),
              ])),
              Container(
                height: 400,
                child: StreamBuilder<QuerySnapshot>(
                  stream: Firestore.instance.collection('messages').snapshots(),
                  builder: (BuildContext context,
                      AsyncSnapshot<QuerySnapshot> snapshot) {
                    if (snapshot.hasError)
                      return new Text('Error: ${snapshot.error}');
                    switch (snapshot.connectionState) {
                      case ConnectionState.waiting:
                        return new Text('Loading...');
                      default:
                        return new ListView(
                          children: snapshot.data.documents
                              .map((DocumentSnapshot document) {
                            return new ListTile(
                              title: new Text(document['message']),
                            );
                          }).toList(),
                        );
                    }
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Все работает отлично, но список элементов в Streambuilder распределяется случайным образом .

Я знаю, что это потому, что данные в списке отображаются с помощью функции .map (поскольку у карты нет порядка).

Как отобразить элементы в порядке с помощью которого они добавляются в мою базу данных в StreamBuilder без вызова функции .map?

Answer 1

Добавить метку времени, когда вы устанавливаете данные в документе;

Firestore.instance.collection('messages').add({
  'message': _txtCtrl.text,
  'timestamp': FieldValue.serverTimestamp(),
});

И использовать orderBy при получении данных; Firestore.instance.collection('messages').orderBy('timestamp').snapshots();