Flutter: How can I sort my list of cards by time and date

0

I'm having trouble sorting my list of cards. Everytime I save a data, it outputs in my app as a card. It contains name, time, date, pictures and etc. The problem is it doesn't sort via time and date. It just adds and adds. It doesn't even stack, it just adds anywhere in the list. Btw I get this data via StreamBuilder. Can anyone help me fix this? thank you.

My StreamBuilder code:

StreamBuilder<QuerySnapshot>(
        stream: db.collection('HELP REQUEST').where('Type_OfDisaster', isEqualTo: '[Drought]').snapshots(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Column(
                children: snapshot.data.documents
                    .map((doc) => buildItem(doc))
                    .toList());
          }
          else {
            return Container(
                child: Center(
                    child: CircularProgressIndicator()
                )
            );
          }
        });

Where I output the data in a card:

Container buildItem(DocumentSnapshot doc) {
  return Container(
   child: Padding(
    padding: const EdgeInsets.only(left: 20.0, right: 20.0, bottom: 15.0),
    child: Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      color: Color(0xFFFFFFFF),
      elevation: 5,
      child: Padding(
        padding: const EdgeInsets.only(top: 20, left: 20, right: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget> [
                    picture(),
                    SizedBox(
                      width: 10,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Text(
                              '${doc.data['Name_ofUser']}',
                              style: TextStyle(
                                  fontSize: 11.5,
                                  fontWeight: FontWeight.w800),
                            ),
                          ],
                        ),
                           Row(
                          children: <Widget>[
                            Text(doc.data['Help_DatePosted'],
                              style: TextStyle(
                                  fontSize: 9,
                                  fontWeight: FontWeight.w800
                              ),
                            ),
                          ],
                        )
                      ],
                    ),
                    Visibility(
                      visible: orgstat,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 8.0, bottom: 5.0),
                        child: Icon(
                          FontAwesomeIcons.checkCircle,
                          color: Colors.green,
                          size: 12,
                        ),
                      ),
                    )
                  ],
                ),
                   Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    CircleAvatar(
                        radius: 20,
                        backgroundImage: AssetImage('assets/Drought.jpg')
                    ),
                  ],
                ),
              ],
            ),
            Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SizedBox(
                    height: 20,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0),
                    child: Text('Description:', style: TextStyle(
                        fontSize: 11.5,
                        color:  Color(0xFF000000)
                    ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: GestureDetector(
                      onTap: (){
                        setState(() {

                        });
                      },
                      child: Text(
                        '${doc.data['Help_Description']}',
                        maxLines: 3,
                        overflow: TextOverflow.ellipsis,
                        textAlign: TextAlign.justify,
                        style: TextStyle(
                            fontSize: 13.5, fontWeight: FontWeight.w800,
                            color:  Color(0xFF000000)),
                      ),
                    ),
                  ),
                  Row(
                    children: <Widget>[
                      Text('Families affected:', style: TextStyle(
                          fontSize: 11.5,
                          color: Color(0xFF000000)
                      ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          '${doc.data['Help_FamiliesAffected']}',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              fontSize: 13.5, fontWeight: FontWeight.w800,
                              color:  Color(0xFF000000)),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Text('Area/Barangay:', style: TextStyle(
                          fontSize: 11.5,
                          color:  Color(0xFF000000)
                      ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          '${doc.data['Help_AreaAffected']}',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              fontSize: 13.5,
                              fontWeight: FontWeight.w800,
                              color:  Color(0xFF000000)
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Text('Things we need:',
                        style: TextStyle(
                            fontSize: 11.5,
                            color:  Color(0xFF000000)
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          '${doc.data['Help_ThingsNeeded']}'.replaceAll(new RegExp(r'[^\w\s\,]+'),''),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              fontSize: 13.5,
                              fontWeight: FontWeight.w800,
                              color:  Color(0xFF000000)),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Text('Drop off location:',
                        style: TextStyle(
                            fontSize: 11.5,
                            color:  Color(0xFF000000)
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          '${doc.data['Help_DropoffLocation']}',
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              fontSize: 13.5, fontWeight: FontWeight.w800),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Text('For inquiries call:',
                        style: TextStyle(
                            fontSize: 11.5,
                            color:  Color(0xFF000000)
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          '${doc.data['Help_Inquiry']}',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              fontSize: 13.5,
                              fontWeight: FontWeight.w800,
                              color:  Color(0xFF000000)
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(bottom: 10, top: 15),
                    child: Container(
                      height: _height * 0.05,
                      width: _width * 0.30,
                      child: Text(
                        '${doc.data['Respondents_Count'].toString()} respondents.',
                        style: TextStyle(
                          color:  Color(0xFF000000),
                          fontSize: 12,
                          fontWeight: FontWeight.w800,
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 10),
                    child: Container(
                      height: _height * 0.05,
                      width: _width * 0.30,
                      child: RaisedButton(
                        highlightColor: Color(0xFF02663B1),
                        shape: RoundedRectangleBorder(
                            borderRadius:
                            BorderRadius.all(Radius.circular(20.0))),
                        color: Color(0xFF3F6492),
                        onPressed: () async {
                          final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
                          final FirebaseUser user = await _firebaseAuth.currentUser();
                          if (user.isEmailVerified){
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (BuildContext context) => DroughtFeedBenefactorAnswerHelp(
                                        doc.data['Help_Description'],
                                        doc.data['Name_ofUser'],
                                        doc.data['User_ID'],
                                        doc.data['Help_DropoffLocation'],
                                        doc.data['Help_ThingsNeeded'],
                                        doc.data['Type_OfDisaster'],
                                        doc.data['Help_AreaAffected'],
                                        doc.data['Unique_ID'],
                                        widget.totalInterestedCount,
                                        widget.totalConfirmedhelpCount,
                                        doc.data['Respondents_Count']
                                    )
                                )
                            );
                          }else{
                            _showVerifyEmail(doc.data);
                          }
                        },
                        child: Text(
                          'I want to help',
                          style: TextStyle(
                              color: Color(0xFFFFFFFF),
                              fontSize: 12,
                              fontWeight: FontWeight.w800),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);
}

UI of my card:

enter image description here

flutter
dart
asked on Stack Overflow Jan 15, 2020 by Lix

1 Answer

1

You can use the ordeBy method provided by the firestore

https://firebase.google.com/docs/firestore/query-data/order-limit-data

db.collection('HELP REQUEST')
   .where('Type_OfDisaster', isEqualTo: '[Drought]')
   .orderBy('time', descending: true)
   .snapshots()

Hope it can help you ;)

answered on Stack Overflow Jan 15, 2020 by Gonçalo Lima

User contributions licensed under CC BY-SA 3.0