Flutter Listview From Firestore using Dart Objects
Published: 2021-08-20 17:45:09

---
title: Flutter Listview From Firestore using Dart Objects
published: true
date: 2021-08-17 22:30:00 UTC
tags: 
canonical_url: https://mukhtharcm.com/listview-from-firestore-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](https://dev.to/mukhtharcm/flutter-listview-from-firebase-firestore-20e8).

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

```
doc.data()["title"]

```

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,
});
}

```

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](https://mukhtharcm.com/listview-from-firestore-dart-objects/notes-collection_hudcb10c54548f8016bd5619e36367502e_37431_800x0_resize_box_2.png) <figcaption>
<p>Our Notes Collection in Firestore</p>
</figcaption>

## 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"],
);
}

```

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;
}
}

```

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));
}
)

```

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](https://mukhtharcm.com/tags/firebase/)

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions on [Twitter](https://twitter.com/mukhtharcm) DM or drop a mail a [mukhtharcm@gmail.com](mailto:mukhtharcm@gmail.com).

If you’re feeling too generous, you can support me through [Buy Me a Coffee](https://buymeacoffee.com/mukhtharcm).

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](https://twitter.com/mukhtharcm) for getting more posts like these 😉.