FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Search
⌃K
Links

Adding Data

This page describes how to add data to your Firestore collection.

Prerequisites

Before getting started with this section:

How to add data

There are two ways you can add data to your collection.
Let's take a look at how to add data using both ways.

1. 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 to 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.
Adding data using Firestore Data Manager

2. From your app

To add data from your app, you must design a page and then add an action to add data to your Firestore collection.
Adding data from your app 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 a record (somewhere on the page)

2.1 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.
  • Select the Column and set its Padding to 10 on all sides.
  • Inside the Column, add a TextField to accept the Todo title and give it a name.
  • Add another TextField inside a Column to accept the Todo Description and give it a name.
  • 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.
Designing a page

2.2 Adding an action to create a record

The Date/Time Picked is only available if you added an action to open DatePicker.

Adding Custom Data Type (aka Firestore Map)

Sometimes you might want to store data that won't fit in the existing data types, or you want to store something that requires a combination of existing data types for example storing the user's address. The typical address includes apartment, street, city, country, zip code, etc. Using custom data type you can store all this information together as subfields into a single field.
Address field as custom data type (address)
  • Storing into a custom data type helps you in validating the values for its subfields (which you can't do if you store all the information as combined data in plain text).
  • It helps you declutter the document fields by nesting subfields into one parent field. For example, Instead of creating fields for apartment, street, city, and other information directly inside the user document, you can add these fields into one parent field like address, which gives you better visual clarity.
Let's build a simple page that allows users to enter their address details:
Saving to custom datatype field
Adding custom data type comprises the following steps:

1. Creating data types

To create a custom data type:
  • Click on the Firestore in the left side menu.
  • Select the Types (
    )tab.
  • Click on the + button.
  • A popup will open, enter the DataTypeName (This will be the name of the data type e.g. Address), and click Create.
  • Click on the + Add Field.
  • Inside the field_name box, enter the name of the field. For example street, city, country, etc.
  • Click on the Data Type dropdown menu and select the suitable one.
  • Click Create.
  • Similarly, add other fields.
Creating a data type

2. Adding collection field with custom data type

Once the new data type is created, it is available as Data Type while adding the new field inside the collection.
To add a field with a custom data type:
  • Click on the Firestore in the left side menu.
  • Select your newly created collection from the list on the left side.
  • Click on the + Add Field.
  • Inside the field_name box, enter the name of the field.
  • Click on the Data Type dropdown menu and select the Data Type.
  • From the Data dropdown, select the custom data type created in the previous step.
Adding collection field with custom data type

3. Adding data to document

In order to add data to a custom data type field from your app, you need to follow the steps below:
  1. 1.
    ​Building a page (you can skip this if you already have a page designed)
  2. 2.
    ​Adding an action to create or update a record (somewhere on the page)
To add data to a custom data type field using Firestore Data Manager, please follow the instructions here.

3.1 Building a page

To build a page with address fields:
  • Create/select a page.
  • Select the Column and add a TextField to accept the address details and give it a name.
  • Similarly, add more TextField widgets as per subfields inside the custom data type field.
  • Finally, add a Button to create or update the record.
Building a page

3.2 Adding an action to create or update a record

You can pass the TextField values inside the document field by adding an action that creates or updates the document, such as Create Document or Update Document.
Here are the steps in detail:
  • Select the Widget (e.g., Button) on which you want to add the action.
  • Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
    • Click on the + Add Action.
    • On the right side, search and select Create Document or Update Document.
    • If you select Update Document, set the document reference to update.
      • If you have access to the document, set the Source to the actual document and Available Options to reference.
    • Under the Set Fields section, click on the + Add Field button. Click until you see the field that stores the custom data type.
    • Select the Set/Update [DataTypeName] (e.g Set Address, Update Address, etc.). This opens a popup on the left side.
    • If you want to remove the existing subfields from a document and add only fields specified here. Enable the Clear Unspecified Values. or keep it disabled to preserve the existing subfields and update the values for the fields specified here.
    • For the Update Type, you can select the following options:
      • Select Set Individual Fields to update each field separately.
      • Select Set From Variable to set it from the Firestore document field (with the same DataType).
      • Select Delete to remove this field from the document.
    • If you set the Update Type to Set Individual Fields, you need to specify the fields. To do so, click on the + Add Fields and specify the fields as you would normally do. (e.g. setting the Value Source to From Variable and then UNSET -> Widget State -> TextFieldName).
    • Click Done and then Close.
Adding update action
To retrieve the custom data type fields, see how to do it here.

Verifying Data

You can view the data inside the Firebase Console of your project.
  • Use Run Mode to run your app and add data to Firebase.
  • Open the Firebase console.
  • Click on Firestore Database.
  • Select your Collection.
  • Click on the Document to see the newly added data.
Verify data
Previous
Adding Indexes
Next
Updating Data
Last modified 7mo ago