Home > Enterprise >  The data from Firebase appears randomly, and it is not the last item I add that appears at the top
The data from Firebase appears randomly, and it is not the last item I add that appears at the top

Time:08-07

I need to show the data that I add at the top, but it does not happen, I thought that the data is arranged according to the date it was added to the Firebase Firestore,

I think the data is sorted by document ID

After I almost finished the application, I could not solve this problem, I am not very skilled in Firebase and I did not find the solution

class News extends StatefulWidget {
  News({Key? key}) : super(key: key);

  @override
  State<News> createState() => _NewsState();
}

class _NewsState extends State<News> {
  final Stream<QuerySnapshot> data =
      FirebaseFirestore.instance.collection('news').snapshots();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 102, 102, 102),
      appBar: AppBar(
        backgroundColor: Colors.blueAccent,
        title: Center(
          child: Text(
            'أخبار الأنمي',
            style: TextStyle(fontSize: 30),
          ),
        ),
      ),
      body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: StreamBuilder<QuerySnapshot>(
              stream: data,
              builder: (BuildContext context,
                  AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasError) {
                  return Text('حدث خطأ');
                }

                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Column(
                    children: [
                      Center(child: Text('جاري التحميل')),
                      CircularProgressIndicator()
                    ],
                  );
                }
                final anime = snapshot.requireData;
                return ListView.builder(
                    physics: BouncingScrollPhysics(),
                    padding:
                        EdgeInsets.only(top: 3, left: 3, right: 3, bottom: 80),
                    itemCount: anime.size,
                    itemBuilder: (context, index) {
                      return Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Container(
                            decoration: BoxDecoration(
                              color: Colors.white,
                              border: Border.all(color: Colors.blue, width: 3),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.black,
                                  blurRadius: 3.5,
                                  spreadRadius: 1,
                                )
                              ],
                            ),
                            margin: EdgeInsets.all(5),
                            child: Row(
                              children: [
                                Expanded(
                                    flex: 3,
                                    child: Container(
                                      alignment: Alignment.centerRight,
                                      child: Text(
                                        textDirection: TextDirection.rtl,
                                        '${anime.docs[index]['title']}',
                                        style: TextStyle(
                                            fontSize: 20,
                                            fontWeight: FontWeight.w700),
                                      ),
                                    )),
                                Expanded(
                                  flex: 1,
                                  child: Card(
                                    child: Image.network(
                                      '${anime.docs[index]['image']}',
                                      fit: BoxFit.fill,
                                      height: 120,
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ],
                      );
                    });
              })),
    );
  }
}

CodePudding user response:

Yes, firestore will return base on alphabetically sorting based on document ID.

Use the .orderBy("FieldToOrderBy") to return it in your desired order.

Order and limit data - Firestore

  • Related