Flutter – Firestore CRUD (Reading and writing data)

Hi Friends,

Hope you are all well. In this post let’s get into how to read and write data from a firestore collection.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affiliate Link)

I presume most of you would already be familiar with firestore now. Firestore is nothing but a simple cloud storage system that stores (almost) all types of data in the forms of documents in simple scalable collections which can then be accessed, updated, deleted or modified in many ways.

Anyway, let’s continue with our app.

I presume by now you would already know how to configure firebase in your applications. If not then kindly watch this video once..

Let’s begin.

Code for this post is available – here. (Kindly leave a star to the repo)

I would highly recommend you to read the Flutter authentication article once which is available here.

Now create a couple of pages in your app as shown below.


Now open the main.dart and add the below code.

We are simply pushing the user to a dashboard page when he logs in. That’s it.

Open up loginpage.dart and add the below code in it.

We have already talked a lot about authentication in our previous posts. In this page we simply have code for authenticating a user.

But wait, Dude, is this all essential ? In your firebase console under database there’ll be a tab called Rules. Check it out.


As you could see here, we are allowing only authenticated users to read/write into our collections.

So we are putting an authentication system in place in our app. (If not, you could simply go ahead and remove this rule, which I wouldn’t recommend).

Alright, dude.. come on., get into the CRUD thing that you were talking about.

Writing data:

Open up dashboard.dart and add the below code.

Nothing fancy guys.. We are just using a couple of dialogs. In one of them we have 2 text fields which will be used to receive the user input and then we are going to be saving this data in our firestore collection.

Open up crud.dart and add the below code.

We are simply checking whether the user is logged in and then we are simply adding the data into the testcrud collection.

Now if you run the app you’ll see the below screens.


Add a car using the button on the top right


Cool right? So this is how you add data into your Firestore collection from your flutter apps.

Check your firestore collections as well.


Reading data:

Now that we have added some cars into our collection, let’s just see how to retrieve this data and throw it up on the screen as well.

Open crud.dart and modify it as shown below.

This getData function will now return a querysnapshot which is nothing but a set of documents.

We’ll now use this in our dashboard.dart

Open it up and modify it as shown below.

Whoa, that’s a lot of code. Nope., it isn’t; I have simply overriden the initState() function to make a call to the getData() function and then I am using the data obtained here in a List builder to show the data in a list.

Run the app and  you’ll see the below screen.


Nice right?

There we have seen how to read/write data into firestore from your flutter app.

We’ll see how to update this data, delete data and how to use a stream to reflect changes happening in the database in realtime in our next post.

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donate to keep this site alive – here.

(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).

Join our flutter community – here.

Thanks for reading. Peace..

Liked it? Take a second to support admin on Patreon!
  • Netshikulwe Eden Hazard Donald

    hey man am having problem where by it’s not showing up the cars and colors, it’s treating it like the cars are null but when i check my database it’s populating it, what might be the problem…. check the code……

    Widget build(BuildContext context) {
    return new Scaffold(
    appBar: AppBar(
    title: Text(‘Admin’),
    actions: [
    icon: Icon(Icons.add),
    onPressed: () {
    icon: Icon(Icons.refresh),
    onPressed: () {
    ProjectObj.getData().then((results) {
    setState(() {
    Projects = results;
    //drawer: addDrawer(context),
    body: _ProjectList());

    Widget _ProjectList() {
    if (Projects != null) {
    return ListView.builder(
    itemCount: Projects.documents.length,
    padding: EdgeInsets.all(5.0),
    itemBuilder: (context, i) {
    return new ListTile(
    title: Text(Projects.documents[i].data[‘projectname’]),
    subtitle: Text(Projects.documents[i].data[‘projectdesc’]),
    onTap: () {
    // Navigator.of(context).pop();
    Navigator.push(context, new MaterialPageRoute(builder: (context) => ProjectDetails(Projects.documents[i].data[i])));
    else {
    return Text(‘Loading, Please wait..’);