Flutter ve Firebase ile koleksiyondan veri listeleme

Onur Ali Korkmaz

Hectopat
Katılım
13 Nisan 2020
Mesajlar
15
Arkadaşlar merhaba, Flutter'a yeni başladım ve berber randevu sistemi yapmaya çalışıyorum. Berber panelinde takıldım.
Şimdi amacım aşağıdaki gibi verileri çizdiğim karelerin içine yazmak ve bir gridview kullanarak her randevu geldiğinde real time olarak veritabanını dinleyeceği için randevuyu verisini güncelleyecek bir sistem yapmak. Özet, veri tabanına yeni veri girişi olursa yeni bir kare en altta çıkacak ve verileri gösterecek.

Screenshot_1671887984.png

Ancak kodunu yazarken, sürekli şu hatayı alıyorum.

_CastError.png


casterror.png


ilgili kod satırları:

JavaScript:
final Stream<QuerySnapshot> dateRef =
 FirebaseFirestore.instance.collection('date').snapshots();

StreamBuilder<QuerySnapshot>(
 stream: dateRef,
 builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
 if (snapshot.hasError) {
 return Text('Bir şeyler ters gitti');
 }
 return ListView(
 children:
 snapshot.data!.docs.map((DocumentSnapshot document) {
 Map<String, dynamic> data =
 document.data()! as Map<String, dynamic>;
 return ListTile(
 title: Text(data['Ad']),
 subtitle: Text(data['Soyad']),
 );
 }).toList(),
 );
 },
 ),

denediğim yöntemler:
  • Kod Planet kanalındaki videoyu izleyerek önce verileri çağırmaya çalıştım yukarıdaki hataları aldım.
  • dbestech kanalındaki videoyu izleyerek kodda değişiklik yaptım yine olmadı aynı hataları aynı yerde almaya devam ediyorum.
  • Cloud Firestore | FlutterFire dokümanından realtime changes başlığındaki kodları denedim gene olmadı.
Ne yapabilirim? Date koleksiyonundaki verileri dinleyip, çekmek istiyorum ve bir türlü çekemiyorum.

Sorunumu çözdüm.

  • StreamBuilder pencere öğesi ağacına yerleştirildiğinde, dateRef akışı ilk kez çağrılır ve ilk yanıtı almadığı için hata olmaz, ancak buna kadar bir şeyin gösterilmesi gerekir, bu nedenle ListView çağrılır. Bu noktada anlık görüntü yok, bu nedenle snapshot.data boş.

    ilk yanıt alınana kadar gösterilecek bir şey ayarlamanız yeterlidir, bunun için yaygın kullanım bir CircularProgressIndicator widget'ıdır.
  • Daha sonra ListView'ı Flexible widgetı ile sarmaladım. Ve verileri çekmeyi başardım.
    Aşağıdaki kod güncellenmiş halidir.


    JavaScript:
    StreamBuilder<QuerySnapshot>(
                  stream: dateRef,
                  builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                    if (snapshot.hasError) {
                      return Text('Bir şeyler ters gitti');
                    }
                    if (snapshot.connectionState == ConnectionState.waiting) { <-- yeni eklendi
                      return const Center(child: CircularProgressIndicator());
                    }
                    return Flexible( <-- ListView Flexible widgeti ile sarmalandı
                      child: ListView(
                        children:
                            snapshot.data!.docs.map((DocumentSnapshot document) {
                          Map<String, dynamic> data =
                              document.data()! as Map<String, dynamic>;
                          return ListTile(
                            title: Text(data['Ad']),
                            subtitle: Text(data['Soyad']),
                          );
                        }).toList(),
                      ),
                    );
                  },
                ),

 
Son düzenleme:

Technopat Haberler

Yeni konular

Geri
Yukarı