FlutterFlow Docs
Adding Data
This page describes how to add data to your Firestore collection.


Before getting started with this section, ensure you have:

How to Add Data

There are two ways you can add data to your collection.
  1. 1.
    Using the Firestore Data Manager
  2. 2.
    From Your App
Let's take a look at how to add data using both ways.

Using the Firestore Data Manager

If you want to add data directly into the collection without having a form/page in the app, FlutterFlow allows you to do this with the Firestore Data Manager. This tool helps you visually add documents into your Firestore collection.
If you get a "Could not sign in as [email protected] to your Firebase project" error when trying to use Firestore Data Manager, you likely haven't completed the necessary setup steps. Here are some troubleshooting tips to address this issue.
To add data using the Firestore Data Manager:
  • Click on the Firestore tab in the left side menu.
  • Click on Manage Content. This will open up a new browser window.
  • Select your collection and click on + Add Document.
  • Enter the values for the defined fields.
  • Click Add Document.

From Your App

To add data from your app, you must design a page then add an action to add data into your Firestore collection.
Adding data consists of the following steps:
  1. 1.
    Designing a page (you can skip this if you already have a page designed)
  2. 2.
    Adding an Action to Create Record somewhere in the page

Designing A Page

Let's continue with the Todo example and design a page that allows users to enter the Todo details.
To design a page that accepts Todo details:
  • Create/Select a page.
  • Drag the Column widget from the Layout Elements tab.
  • Add a TextField (under Form Elements) inside the Column to accept the Todo title.
  • Add another TextField inside a Column to accept the Todo Description.
  • Add a Container Widget with an action to open the DatePicker.
  • Add a Text Widget inside Container to show the selected Date.
  • Add a Button.

Adding an Action to Create Record

Here is an example of how to add an action that adds data in the Firestore collection:
  • Select Button from the widget tree or from the canvas area.
  • Click on the Actions tab (on the right side of your screen).
  • Click on + Add Action and select the On Tap option.
  • Find the Action Type dropdown and change it to Backend Call.
  • Find another Backend Action Type dropdown below, and select Create Record.
  • Set the Collection to todos.
  • Under the Set Fields section, click on the + Field button.
  • Click on the Field name.
  • Scroll down to find the Value Source dropdown and change it to From Variable.
  • Find the Source dropdown and change it to Widget State.
  • Find the Available Options dropdown and set it to the Name of the TextField.
  • Similarly, add the field for the other UI elements such as description and date.
Now, when a user taps the Add button when running the app, it will create a document.
The Date/Time Picked is only available if you added an action to open DatePicker.

Verifying Data

You can view the data inside the Firebase Console of your project.
To verify that your app properly adds data in the Firebase Console:
  • Use Run Mode to run your app and add data to Firebase.
  • Click on Firestore Database.
  • Select your Collection.
  • Click on the Document to see the newly added data.
Last modified 1mo ago