DEV Community

mukhtharcm
mukhtharcm

Posted on • Originally published at mukhtharcm.com on

Flutter Listview From Firestore using Dart Objects

Firebase and Flutter are like a match made in heaven. They both work well together very amazingly.

In a previous article, I have shown you how to create a Flutter ListView from Firestore.

That was by extracting the information we need directly from the data property like this.

doc.data()["title"]

Enter fullscreen mode Exit fullscreen mode

In this article, we are gonna learn how to change those data into an actual Dart Object and use that in our listView Instead.

Create Model File

First of all, we have to create a model dart file. In that file, create a class for our Note Object.

class NoteModel{
String title;
String content;
NoteModel({
required this.title,
required this.content,
});
}

Enter fullscreen mode Exit fullscreen mode

Now we are going to create a function that will convert our Firestore Docs into the Dart Object we created above.

Our Notes Collection in Firestore

Our Notes Collection in Firestore

Factory for Converting Firestore Docs to Dart Objects

For this, we need to write a factory function. Don’t fear, this is just a fancy name for a function that will return an instance of a Class.

In the same dart class, create let’s create our Factory.

factory NoteModel.fromDocumentSnapshot({required DocumentSnapshot<Map<String,dynamic>> doc}){
return NoteModel(
title: doc.data()!["title"],
content:doc.data()!["content"],
);
}

Enter fullscreen mode Exit fullscreen mode

The above Function will accept a DocumentSnapshot (A Firestore Document) and turn it into a NoteModel.

Streaming our Notes from Firstore

Next, on the page which we’ll show the data, let’s create a Function to get all those Notes from Firestore.

final _db = FirebaseFirestore.instance;
Stream<List<NoteModel>> noteStream(){
try{
return
_db.collection("notes)
.snapshots
.map((notes){
final List<NoteModel> notesFromFirestore = <NoteModel>[];
for(final DocumentSnapshot<Map<String,dynamic>> doc in notes.docs){
notesFromFirestore.add(NoteModel.fromDocumentSnapshot(doc:doc));
}
return notesFromFirestore;
});
} catch(e){
rethrow;
}
}

Enter fullscreen mode Exit fullscreen mode

The above function will stream Notes from our Firestore Collection.

Showing The Data

For showing the Notes, we will use StreamBuilder as we have previously done.

StreamBuilder<List<NoteModel>>(
stream: noteStream();
builder: (context,snapshot){
if(!snapshot.hasData){
return Center(
child:Text("No Data");
)
} else if(snapshot.hasError){
return Center(
child: Text("An Error Occured);
)
} else if(snapshot.hasData){
return ListView.Builder(
itemCount: snapshot.data!.index,
itemBuilder: (context,index){
NoteModel currentModel = snapshot.data![index];
return Card(
child: ListTile(
title: Text(currentNote .title)
subtitle:Text(currentModel.content)
)
);
}
)
}
else return Center(child: Text("An Error occured));
}
)

Enter fullscreen mode Exit fullscreen mode

The above code will bring a list View from those Firestore Data. Please notice that We are directly accessing the Dart Objects properties instead of accessing .data directly.

Wrap

You can find more articles related to Firebase Here

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions on Twitter DM or drop a mail a mukhtharcm@gmail.com.

If you’re feeling too generous, you can support me through Buy Me a Coffee.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.

Discussion (0)