CODEWITHSUNDEEP
firebaseflutterdartgoogle-cloud-firestorenull-safety
demonjoseph
demonjoseph

Reputation: 253

Firebase doesn't work cause of null-safety (DART/FLUTTER)

I'm using/learning Firebase for my database works. My snapshot's coming like _jsonQuerySnapshot or _jsonDocumentSnapshot. But it had to be QuerySnapshot or DocumentSnapshot. Because of this I have to encode and decode my snapshot for use my datas. If I'm not using encode decode json I'm getting null or object errors all the time. Here is my class extends from state


class _MyHomePageState extends State<MyHomePage> {
  final _firestore = FirebaseFirestore.instance;


  @override
  Widget build(BuildContext context) {
    CollectionReference moviesRef=_firestore.collection('movies');
    DocumentReference babaRef = _firestore.collection('movies').doc('Baba');



    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text('FireStore Crud'),
      ),
      body: Center(
        child: Container(
          child: Column(
            children: [
              StreamBuilder<QuerySnapshot>(
                stream: moviesRef.snapshots(),
                builder: (BuildContext context,AsyncSnapshot asyncSnapshot){
                  List<DocumentSnapshot>listOfDocumentSnapshot=asyncSnapshot.data.docs;
                  return Flexible(
                    child: ListView.builder(
                      itemCount: listOfDocumentSnapshot.length,
                      itemBuilder: (context,index){
                        Text('${listOfDocumentSnapshot[index].data()['name']}' ,style: TextStyle(fontSize: 24),);
                      },
                    ),
                  );



                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

and this is my error .

enter image description here

Upvotes: 0

Views: 488

Answers (1)

Eray
Eray

Reputation: 766

First of all, check your data is null or not and then use [] on it. Probably, listOfDocumentSnapshot[index].data() is null. If it is null, render another UI such as loading screen. Namely, your loading screen must be showed until reach the data.

for example:

builder: (BuildContext context,AsyncSnapshot asyncSnapshot){
   List<DocumentSnapshot>? listOfDocumentSnapshot = asyncSnapshot.data.docs;

   if(!listOfDocumentSnapshot.hasData || listOfDocumentSnapshot == null){
      return LoadingScreen(); //etc.
   }

   return Flexible(
      child: ListView.builder(
         itemCount: listOfDocumentSnapshot.length,
         itemBuilder: (context,index){
            Text('${listOfDocumentSnapshot[index].data()['name']}' ,style: TextStyle(fontSize: 24),);
         },
      ),
   );
},

Futures (asynchronous programmes) need some time to get data and you have to make your UI wait until you get your data. e.g. database connections, read/write somethings to/from somewhere etc.

For more detail you can read this article.

Upvotes: 2

Related Questions