---
title: 1:N Relationship
slug: docs/flutter/parse-sdk/data-objects/flutter-one-to-many-relationship
description: In this guide you'll learn how to create and query one-to-many data object associations in Parse on Flutter
image: https://www.back4app.com/images/logo-social.png
docTags: 
createdAt: 2024-03-15T15:14:39.658Z
---

# One to many Relationship on Flutter


Introduction
------------


Using Parse, you can store data objects establishing relations between them. To model this behavior, any <font color="#2166ae">`ParseObject`</font> can be used as a value in other <font color="#2166ae">`ParseObject`</font>. Internally, the Parse framework will store the referred-to object in just one place, to maintain consistency. That can give you extra power when building and running complex queries. There are three main relation types:

-  <font color="#2166ae">`one-to-one`</font>, establishing direct relations between two objects and only them;
-  <font color="#2166ae">`one-to-many`</font>, where one object can be related to many other objects;
-  <font color="#2166ae">`many-to-many`</font>, which can create many complex relations between many objects.


In this guide we will detail how the <font color="#2166ae">`one-to-many`</font> relation works using a pratical app example. There are two ways to create a <font color="#2166ae">`one-to-many`</font> relation in Parse:

-  The first is using the <font color="#2166ae">`Pointers`</font> in <font color="#2166ae">`Child Class`</font>, which is the fastest in creation and query time.
-  The second is using <font color="#2166ae">`Arrays`</font> of <font color="#2166ae">`Pointers`</font> in Parent Class which can lead to slow query times depending on their size. Because of this performance issue, we will use only pointers examples.

You will implement a Flutter book registration App and will create and query related objects using the Parse <font color="#2166ae">`Pointers`</font>.

:::hint{type="info"}
Relation as <font color="#2166ae">`one-to-one`</font> is not common and we are not going to cover on our guides. As an example a relationship between the User class and another class that will contain sensitive user data for [security reasons](https://blog.back4app.com/parse-server-best-practices/) (*1.4. Don’t let users have access to sensitive data from others*).
:::

::embed[]{url="https://www.youtube.com/embed/b6fdFD0hlJo"}

## Prerequisites

:::hint{type="info"}
- [Flutter version 2.2.x or later](https://flutter.dev/docs/get-started/install)
- [Android Studio ](https://developer.android.com/studio)or [VS Code installed](https://code.visualstudio.com/) (with [Plugins](https://docs.flutter.dev/get-started/editor) Dart and Flutter)
- An app [created](https://www.back4app.com/docs/get-started/new-parse-app) on Back4App:
  - **Note:&#x20;**&#x46;ollow the [New Parse App Tutorial](https://www.back4app.com/docs/get-started/new-parse-app) to learn how to create a Parse App on Back4App.
- An Flutter app connected to Back4app.
  - **Note:&#x20;**&#x46;ollow the [Install Parse SDK on Flutter project](https://www.back4app.com/docs/flutter/parse-sdk/parse-flutter-sdk) to create an Flutter Project connected to Back4App.
- A device (or virtual device) running Android or iOS.
:::

## Understanding the Book App


The main object class you’ll be using is the <font color="#2166ae">`Book`</font> class, storing each book entry in the registration. Also, these are the other three object classes:


- <font color="#2166ae">`Publisher`</font>: book publisher name, one-to-many relation with <font color="#2166ae">`Book`</font>;
- <font color="#2166ae">`Genre`</font>: book genre, one-to-many relation with <font color="#2166ae">`Book`</font>. Note that for this example we will consider that a book can only have one genre;
- <font color="#2166ae">`Author`</font>: book author, many-to-many relation with <font color="#2166ae">`Book`</font>, since a book can have more than one author and an author can have more than one book as well;

A visual representation of these data model:

![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/A3OFhXHEJEAvPvi6DVVuq_image.png)

We will assume that each object class (<font color="#2166ae">`Publisher`</font>, <font color="#2166ae">`Genre`</font>) has only a string type <font color="#2166ae">`name`</font> attribute and <font color="#2166ae">`Book`</font> has <font color="#2166ae">`title`</font> and <font color="#2166ae">`year`</font>, apart from any additional relational attribute. In the previous guides we have already seen how to save and read <font color="#2166ae">`ParseObject`</font> so in this guide, we will not cover how to save and read <font color="#2166ae">`Genre`</font> and <font color="#2166ae">`Publisher`</font> objects.

You will find the following screens on the Book App:

- **Registration and Listing of Genre**
- **Registration and List of Publishers**
- **Book Registration**
- **List of Publishers and Books**
- **Book details**

We won’t explain the Flutter application code once this guide’s primary focus is using the Flutter with Parse using relations.

## 1 - Create Book App Template

Let’s first run the Book App project template. Open your Flutter project from the previous guide **Flutter plugin for Parse Server**. The [Book Flutter App](https://github.com/templates-back4app/flutter_associations) repository is also available to you clone and run the project. Copy the [main.dart](https://github.com/templates-back4app/flutter_associations/blob/master/lib/main.dart) file and replace your current code from previous guides.

**Note:**
When <font color="#2166ae">`debug`</font> parameter in function <font color="#2166ae">`Parse().initialize`</font> is <font color="#2166ae">`true`</font>, allows displaying Parse API calls on the console. This configuration can assist in debugging the code. It is advisable to disable debug in the release version.

### Step 2 - Connect Template to Back4app Project

Find your Application Id and Client Key credentials navigating to your app Dashboard at [Back4App Dashboard->App Settings->Security & Keys](https://www.back4app.com/docs/parse-dashboard/app-settings). Update your code in <font color="#2166ae">`main.dart`</font> with the values of your project’s ApplicationId and ClientKey in Back4app.

- **keyApplicationId = App Id**
- **keyClientKey = Client Key**

Run the project, and the app will load as shown in the image.

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/yMFpRGpZJLsxJjtLPBDdk_image.png" size="30" width="323" height="627" position="center" showCaption="false"}

Click on <font color="#2166ae">`Add Genre`</font> to register and view the list of <font color="#2166ae">`Genres`</font> that will be used in the registration of books.

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/AXMne48nSmI_omEvIIFLT_image.png" size="30" width="323" height="627" position="center" showCaption="false"}

Click on <font color="#2166ae">`Add Publisher`</font> to register and view the list of <font color="#2166ae">`Publishers`</font> that will be used in the registration of books.

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/s566XXvwuWEOBBdq6LHC5_image.png" size="30" width="323" height="627" position="center" showCaption="false"}

Click on <font color="#2166ae">`Add Book`</font> to register new <font color="#2166ae">`Book`</font> using relations with <font color="#2166ae">`Genre`</font> and <font color="#2166ae">`Publisher`</font>.

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/jVUGzMZD8IIhrw57GNnRc_image.png" size="30" width="328" height="637" position="center" showCaption="false"}

Click on <font color="#2166ae">`List Publisher/Book`</font> to view the list of <font color="#2166ae">`Publishers`</font> and <font color="#2166ae">`Books`</font>.

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/EGNDJ3ZrgC9_P-vPrSZ_a_image.png" size="30" width="323" height="627" position="center" showCaption="false"}

## 3 - Save a Book object and its relations

This function will create a new Book in Back4app database with relations. Search for the function <font color="#2166ae">`doSaveBook`</font> in file <font color="#2166ae">`main.dart`</font>, and insert the code below inside the <font color="#2166ae">`Future<void> doSaveBook()`</font> function:

```dart
1       final book = ParseObject('Book')
2         ..set('title', controllerTitle.text.trim())
3         ..set('year', int.parse(controllerYear.text.trim()))
4         //the objectId will be converted to a Pointer on the save() method
5         ..set('genre', ParseObject('Genre')..objectId = genre.objectId)
6         //you can also convert to a Pointer object before the saving using the .toPointer() method
7         ..set(
8             'publisher',
9             (ParseObject('Publisher')..objectId = publisher.objectId)
10                .toPointer());
11
12      await book.save();
```

To build this function, follow these steps:

- 1\. Create a new instance of the Parse <font color="#2166ae">`Book`</font> class with the command <font color="#2166ae">`ParseObject('Book')`</font>.
- 2\. Use the <font color="#2166ae">`set`</font> function to set the fields for this object.
  - 2.1.<font color="#2166ae">`title`</font> is a text attributes that receive value from the text controller.
  - 2.2.<font color="#2166ae">`genre`</font> receives the value by defining a <font color="#2166ae">`ParseObject`</font> with the <font color="#2166ae">`objectId`</font> of the selected <font color="#2166ae">`Genre`</font>. (*Parse will convert to pointer on save*)
  - 2.3.<font color="#2166ae">`publisher`</font> receives the value by defining a <font color="#2166ae">`ParseObject`</font> with the <font color="#2166ae">`objectId`</font> of the selected <font color="#2166ae">`Publisher`</font>. (*Note that we can specify for Parse that we want to save as a&#x20;*<font color="#2166ae">`pointer`</font>*&#x20;using the&#x20;*<font color="#2166ae">`toPointer()`</font>*method*)
- 3\. Call the <font color="#2166ae">`save`</font> function in <font color="#2166ae">`ParseObject`</font>, which will effectively register the object to your database in the Back4app Dashboard.

Run the app and test the new function.

- Click on the <font color="#2166ae">`Add Book`</font> button.
- Fill book information.

The app requires the selection of the Authors (s), but the code for them will be covered only in the next guide.

- Click on <font color="#2166ae">`Save Book`</font> button



::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/cssL-jdLG4ecfman8hIGp_image.png" size="30" width="323" height="627" position="center" showCaption="false"}

To confirm that the new object is save in the database with relations, you can access the <font color="#2166ae">`Back4app Dashboard`</font> and access <font color="#2166ae">`Book`</font> class.

![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/SEpUCYQHevWFwhR33NxCp_image.png)

If you access your Book class using the Dashboard you can click on the object pointer value and you will be redirected to the referenced object. It may seem like a harmless feature, but this makes debugging and error tracing much quicker than searching for it manually.

## 4 - Query the Book List and its related objects

This function will query Books in Back4app database with using relations with Publisher. Through the Publisher, we will get the list of books.

Search for the function <font color="#2166ae">`getBookList`</font> in the file <font color="#2166ae">`main.dart`</font>, then replace the code below inside <font color="#2166ae">`Future<List<ParseObject>> getBookList(String publisherId)`</font> function:

```dart
1       QueryBuilder<ParseObject> queryBook =
2           QueryBuilder<ParseObject>(ParseObject('Book'))
3             ..whereEqualTo('publisher',
4                 (ParseObject('Publisher')..objectId = publisherId).toPointer())
5             ..orderByAscending('title');
6       final ParseResponse apiResponse = await queryBook.query();
7   
8       if (apiResponse.success && apiResponse.results != null) {
9         return apiResponse.results;
10      } else {
11        return [];
12      }
```

To build this function, follow these steps:

1. Create an instance of <font color="#2166ae">`ParseQuery`</font> object for <font color="#2166ae">`Book`</font> class. Insert a condition in the query, to search <font color="#2166ae">`Books`</font> where <font color="#2166ae">`publisher`</font> field is equal <font color="#2166ae">`pointer`</font> of <font color="#2166ae">`Publisher ParseObject`</font>.
2. We sort the result in ascending <font color="#2166ae">`name`</font> order
3. Do a Query’s search method using <font color="#2166ae">`query()`</font> method.
4. If the operations succeed, objects in <font color="#2166ae">`Book`</font> will be returned.

Run the app and test the new Query. First, click on the <font color="#2166ae">`List Publisher/Book`</font> button.

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/hUJS9Me_FZYq1DeuzH22Z_image.png" size="30" width="327" height="634" position="center" showCaption="false"}

## It’s done!

At this point, you learned how to create and query one-to-many relations in Parse on <font color="#2166ae">`Flutter`</font>. In the next guide, we’ll show you how to make many-to-many relationships and how to perform queries returning data from related objects.
