Make the list items appear with respect to date in Flutter

Question

I have a streambuilder which returns List View Builder. I want my list items to appear in an order in which newly added items appear at top. currently it is appearing at random positions.

I have generated the items dynamically from the firestore database.

Also can you please tell me how to convert a string value to color so that I can store and retrieve color from firestore?

here is the code for the stream:

import 'package:bvb_firebase/shareable/constants.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class HistoryCardStreamer extends StatefulWidget {
  final int rikeshS;
  final int bibinS;

  HistoryCardStreamer({this.rikeshS, this.bibinS});

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

class _HistoryCardStreamerState extends State<HistoryCardStreamer> {
  final _firestore = Firestore.instance;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: StreamBuilder<QuerySnapshot>(
        stream: _firestore.collection('matches').snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData)
            return Center(
              child: CircularProgressIndicator(),
            );

          return Container(
            height: 300,
            child: ListView.builder(
              reverse: true,
              itemCount: snapshot.data.documents.reversed.length,
              itemBuilder: (context, index) {
                DocumentSnapshot matchDetail = snapshot.data.documents[index];

                return Card(
                  elevation: 0,
                  color: Color(0xffA92323),
                  child: Container(
                    margin: EdgeInsets.only(top: 5),
                    child: ListTile(
                      title: Text(
                        matchDetail['WinnerText'],
                        style: kcardtitleTextStyle,
                      ),
                      leading: Container(
                        width: 45,
                        margin: EdgeInsets.only(top: 12, right: 5),
                        child: FittedBox(
                          child: Text(matchDetail['Score'],
                              style: kcardtitleTextStyle),
                        ),
                      ),
                      subtitle: Text(
                          '${DateFormat.yMMMd().format(DateTime.now())}',
                          style: kcardDateStyle),
                      trailing: GestureDetector(
                        onDoubleTap: () async {
                          await _firestore
                              .collection('matches')
                              .document(matchDetail.documentID)
                              .delete();
                        },
                        child: IconButton(
                          icon: Icon(Icons.delete),
                          onPressed: () {},
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
          );
        },
      ),
    );
  }
} 

app

Answer 1

while adding data to firestore you can add a timestamp or server timestamp and the while querying your collection you order data based on the timestamp value

adding data

"timeStamp":FieldValue.serverTimestamp(); /"timeStamp":Timestamp.now(),

query your data

 .collection('matches').orderby("timestamp", descending:true).snapshots()

Also can you please tell me how to convert a string value to color so that i can store and retrieve color from firestore?

You can't do that as Color doesn't have a constructor that accepts a String as a representation of a color.For that, you could use the Color property value. You can save it and then use to create your new Color object.

The code could look like this

Color pickerColor = new Color(0xff443a49);
String testingColorString = pickerColor.toString();

Color newColor = new Color(pickerColor.value);