# Goril.app Studio Documentation Welcome to Goril.app Studio Documentation ! Welcome to the official documentation for Goril.app Studio – the macOS application designed to help Flutter developers create apps faster and more efficiently. This guide will provide you with the necessary information to understand and utilize the features and capabilities of Goril.app Studio. ## What is Goril.app Studio ?

Goril.app Studio is a powerful visual interface that empowers developers to rapidly build user interfaces for Flutter applications using a drag-and-drop approach. With Goril.app Studio, you can easily design, prototype, and refine the UI of your apps without the need to write extensive code manually. By streamlining the UI development process, Goril.app Studio allows you to focus more on the core functionality of your applications. In this documentation, you will find detailed explanations, tutorials, and examples to help you get started with Goril.app Studio and make the most of its features. Whether you are a beginner or an experienced Flutter developer, this documentation will guide you through the key concepts and functionalities of Goril.app Studio. ## System Requirements Make sure your system is compliant to these system requirements : * MacOS is the only platform supported for now (**10.15 minimum**). * Using a screen that is at least 14" for the best experience ## Need Help ? If you have any questions or recommandations you can contact us directly on our Discord Server. {% embed url="" %} Join our Discord :) {% endembed %} Thank you for being an important part of Goril.app Studio ! Let's get started! # Setup Before starting to create wonderful applications with Goril.app Studio, you will have to setup your environment, create an account and create your first project. Base Setup Before to be able to use all the potential of Goril.app Studio you have to make sure you have Flutter installed. {% embed url="" %} Flutter installation documentation {% endembed %} {% hint style="info" %} Make sure **Ruby** is installed with **Homebrew** and CocoaPods is installed with the **Sudo-less installation.** {% endhint %} {% embed url="" %} Ruby installation documentation {% endembed %} {% embed url="" %} CocoaPods installation documentation {% endembed %} Next, you have to install the Firebase CLI {% embed url="" %} Firebase CLI documentation {% endembed %} ## Environment Setup The first configuration steps in Goril.app Studio are to fill the mandatory environments settings. First you have to provide your Flutter SDK Path. It is essential for Flutter application development.\ You can open a terminal and run the following command to see the location of your Flutter SDK. {% code lineNumbers="true" %} ```bash flutter doctor -v ``` {% endcode %} The first lines should be, for example : ``` Flutter (Channel stable, 3.7.11, on macOS 13.0 2218380 darwin-arm64, locale fr-FR) - Flutter version 3.7.11 on channel stable at /Users/your-user-name/flutter ``` **Select the flutter directory previously mentioned.**

Next, you have to provide your FlutterFire CLI Path. It is essential for smooth app development and maximizing the potential of the framework. You can open a terminal a run the following command to see the location of your FlutterFire CLI. {% code lineNumbers="true" %} ``` whereis flutterfire ``` {% endcode %} The result should be : ``` flutterfire: /Users/your-user-name/.pub-cache/bin/flutterfire ``` **Select the .pub-cache folder.**

Lastly, you have to provide the folder where you want your code's project to be generated.

# Quick Start Now that you are all setup you can start building projects.. But before that you need to create an account and a project ! ## Creating an account Creating an account is free and mandatory to create projects and participate to projects. You can sign up with a classic combinaison of Email/Password or via Google.

The first thing you will see when you log in is the list of your Projects ## Creating a project To create a project you can click on the button **Add a Project** on the screen and fill the **Project Name.**

# Architect The Architect page is your creative workspace for designing app interfaces. With an intuitive drag-and-drop interface and a rich library of components, you can effortlessly create and customize screens, interactions, and user experiences.

## 1. Architect Toolbox {% content-ref url="/pages/GpKM2cn6LNbG0lD3bPlc" %} [Toolbox](/main-pages/architect/toolbox) {% endcontent-ref %} ## 2. Explorer {% content-ref url="/pages/ZEEwakdnqd9AbPMqE2EZ" %} [Explorer](/main-pages/architect/explorer) {% endcontent-ref %} ## 3. Application Preview {% content-ref url="/pages/2861c1AxhBcRqZQlEVYQ" %} [Application Preview](/main-pages/architect/application-preview) {% endcontent-ref %} ## 4. Settings Panel {% content-ref url="/pages/WxUsSMALu5KnM2PMT12u" %} [Settings Panel](/main-pages/architect/settings-panel) {% endcontent-ref %} # Toolbox The Architect Toolbox provided a collection of essential tools to streamline your app design process. Efficiently design and organize your app using the tools available.

Here, you'll find four key tools at your disposal : 1. Widgets Showroom: Explore and select widgets for the Widgets Explorer. 2. Pages List: Manage and navigate through app pages. 3. Components List: Reuse and manage components across the app. 4. Custom Widgets List: Manage custom widgets. ## Widgets Showroom In the Widgets Showroom you can navigate and search through all the widgets and drag and drop them into the[Explorer](/main-pages/architect/explorer)to create the desired layout and arrangement. {% hint style="warning" %} Actually, it is only possible to drop widgets on the Explorer. Dropping on the [Application Preview](/main-pages/architect/application-preview) is not enable for now. {% endhint %} ## Pages List

In the Pages List you can navigate, create, delete and search through all the pages in your project. To **Create** a new page click on the **Add New Page** button and fill the name of the page. To **Delete** a page, click on the contextual menu at the right of the card of the page. {% hint style="info" %} To open a page in the [Explorer](/main-pages/architect/explorer) click on it on the Pages List. The **Explorer,** **Application Preview** and **Settings Panel** will update with the clicked page's information. {% endhint %} ## Components List

In the Components List you can navigate, create, delete and search through all the custom components in the project. To **Create** a new component click on the **Add New Component** button and fill the informations. To **Delete** a component, click on the contextual menu at the right of the card of the component. {% hint style="info" %} To open a component in the [Explorer](/main-pages/architect/explorer) click on it on the Components List. The **Explorer,** **Application Preview** and **Settings Panel** will update with the clicked components information. {% endhint %} ### ✨ Tips Create a custom components to your needs and use it anywhere you want in your project ! The custom component like a classic component, drag and drop it in the [Explorer](/main-pages/architect/explorer) ! ## Custom Widgets List

In the Custom Widgets List you can navigate and search through all the custom widgets in the project. To **Create** a custom widget, check [Custom Widgets](/main-pages/custom-code/custom-widgets) {% hint style="info" %} The difference between Custom Component and Custom Widget is the way they are created. Custom Component are created the graphic way and and Custom Widget the code way. {% endhint %} ### ✨ Tips The custom component like a classic component, drag and drop it in the [Explorer](/main-pages/architect/explorer) ! # Explorer The Explorer section, offers a visual representation of the widget hierarchy for the current page. It serves as a convenient navigational and organizational tool, enabling you to structure and manage your app's interface components effectively.

### Drag and Drop In the Explorer, you can drag and drop widgets from the [Toolbox](/main-pages/architect/toolbox) to create the desired layout and arrangement. It displays a hierarchical view of all the widgets present on the current page, allowing you to easily navigate through them. {% hint style="warning" %} Actually, it is only possible to drop widgets on the Explorer. Dropping on the [Application Preview](/main-pages/architect/application-preview) is not enable for now. {% endhint %}

### Organize, rearrange To interact with the Explorer, simply click on the widgets to select them and access their settings in the [Settings Panel](/main-pages/architect/settings-panel) section. You can also rearrange the widgets by dragging and dropping them within the Explorer. {% hint style="info" %} You can **Delete** or **Copy** a widget by right clicking on it. {% endhint %} ### Widget children

In Flutter, a widget can receive zero, one, or multiple widgets as parameters. The tree view in the Explorer section helps you understand the structure of your app by organizing widgets based on their respective parameters. For example, if a widget accepts a "body" parameter, you will find a tree labeled "body" in the Explorer section. ### ✨ Tips * The logo

means that there is an [Action Flow Editor](/main-pages/action-flow-editor) setup in this widget * You can hide a widget in the [Application Preview](/main-pages/architect/application-preview) **only** by clinking the

icon. # Application Preview The Application Preview section provides a live preview of your app's appearance as you design it. See your changes in real time and ensure your app looks exactly how you want it to.

In the Application Preview you will find different tools at your disposal to have the best preview of your project ! * Choose the **Zoom** view percentage of your project. * Select the **Device** to use for the preview, you have the choice between different platforms and size. * Choose if you want to **Show** the frame of the device or not. * Change the **Orientation**. * Select the **Language** shown in the preview. (Manage the language in [General](/main-pages/settings/general)). * Change between **Light** and **Dark** mode. # Settings Panel Manage and customize all aspects of selected widgets or components from a centralized location. Adjust parameters such as layout, styling, interactions, and more to achieve your desired app aesthetics and functionality effortlessly.

The Settings Panel put to your disposal four key tools : * Basic parameters * Generate children from variable * Add Action * Add Animation ## Basic Parameters

It allows you to modify the parameters of you page or widget and see the result directly on the Application Preview. ## Generate Children From Variable

It allows you to generate children of a widget by taking in parameter a data source. This data source can be anything such a a List of String, an observable .. ### ✨ Tips There is two checkbox **List** and **Nullable** to fully customize the data source you want to use ! ## Add Action

It allows you to add action to the concerned widget. To fully understand the Action Flow Editor see [Action Flow Editor](/main-pages/action-flow-editor) page. ## Add Animation

It allows you to add animation to the concerned widget. There is a large choice of animation you can choose when clicking on **Add Animation**.

You can now click on the animation to deploy an inside settings panel to customize it.

# Storyboard The Storyboard tab allows you to see the global design of your app.

The **Storyboard** allows you to see the different screens and navigation link between them. It shows the complete navigation through the app. You can also click on the **Light/Dark Mode** to change the theme and see on all your screens the UI. {% hint style="info" %} You can open the UI Builder of a page directly by clicking of it from the Storyboard {% endhint %} # Assets The Assets tab allows you to upload any assets you want to build your app.

Just click on **Add Asset** and select one to upload, you can add images, videos, pdf and more ! {% hint style="info" %} Any **Asset** can easily be removed just by clicking the **Trash** icon next to it ! {% endhint %} # State The State tab allows you tu create accessible and modifiable variable throughout every page and components.

## Creating a Local State Variable In order to create a **Local State** variable follow the next steps : * Click on the **Add Local State** button * Fill the **Field Name** with the name of your variable * Choose if your variable should be Persisted or not The Application store the value of Persisted variables on the device's storage. If the application is killed and restarted the value is kept.\ *Example : keeping the user preferences of email address remembered or not, to accelerate the sign-in process.* * Choose the **Field Type** of your variable\ *Optional : You can select **List** and/or **Nullable** to extends your variable's type.* * You can add a **Default Value** to your variable, and can choose between a **Static value** or a **Localized** one

## Using a value in your application In order to use a Local State value in your application follow the next steps : * Select a **Widget** * In the Properties Section, select the *functions* button * Select the source to **Local State** * Click on the now red card **From LocalState** to set the **Local State Variable** * Click on **Save**

{% hint style="info" %} You have set a **Local State Variable** but the preview doesn't change ? Check the following video to set a **Preview Value** {% endhint %}

# Custom Code The Custom Code tab allows you to add custom code to create Custom Actions, Functions, Widgets and Dependencies.

The **Custom Code** tab allows you to create some custom functionalities with you own code. Different options are available : {% content-ref url="/pages/IBluQNZ5ymJijNNIaaMr" %} [Custom Functions](/main-pages/custom-code/custom-functions) {% endcontent-ref %} {% content-ref url="/pages/h2my9VXlL0NLx1TvLVxJ" %} [Custom Actions](/main-pages/custom-code/custom-actions) {% endcontent-ref %} {% content-ref url="/pages/nFVJKOUDHUaB0kPlSzTM" %} [Custom Widgets](/main-pages/custom-code/custom-widgets) {% endcontent-ref %} {% content-ref url="/pages/UN5o5J606epd08x0yDJd" %} [Custom Dependencies](/main-pages/custom-code/custom-dependencies) {% endcontent-ref %} # Custom Functions Create a custom function reusable throughout the application. ## Creating a Custom Function In order to create a **Custom Function** follow the next steps : * Click on the **Add** button and select **Functions** in the opened list * Set the **Name** of your function on the right properties panel * Add a **Tag** to group your custom functions * Choose if your function should be **Async** or not * Add any **Parameters** you need * Choose the **Return Type** * Write your code in the central editor * Save by clicking on the top right button **Save**

Example of a custom function that add two numbers and return the result as a string

## Use a Custom Function

Example of use of a custom function that increment by 1 an observable on button click

# Custom Actions Create a custom action reusable throughout the application. ## Creating a Custom Action In order to create a **Custom Action** follow the next steps : * Click on the **Add** button and select **Actions** in the opened list * Set the **Name** of your action on the right properties panel * Add a **Tag** to group your custom actions * Choose if your action should be **Async** or not * Choose if you passe the **Build Context** in the action * Add any **Parameters** you need * Choose the **Return Type** * Write your code in the central editor * Save by clicking on the top right button **Save**

Example of a custom action that use a custom dependency and show a Toast on button click

## Use a Custom Action

Example of use of a custom action that show a Toast on button click

Example of a custom action in a running application

# Custom Dependencies Create a custom dependencies reusable throughout the application. ## Creating a Custom Dependencies In order to create a **Custom Dependencies** follow the next steps : * Click on the **Add** button and select **Dependencies** in the opened list * Choose the **Type** of dependency * Set the **Package Name** of the dependency * Set **Package Version** of the dependency * Save by clicking on the top right button **Save**

{% hint style="info" %} You can see the use of this custom dependency on the page [Custom Actions](/main-pages/custom-code/custom-actions) {% endhint %} # Custom Widgets Create a custom widget reusable throughout the application. ## Creating a Custom Widget In order to create a **Custom Widget** follow the next steps : * Click on the **Add** button and select **Widgets** in the opened list * Set the **Name** of your widget on the right properties panel * Add a **Tag** to group your custom widgets * Add any **Parameters** you need * Write your code in the central editor * Save by clicking on the top right button **Save**

## Use a Custom Widget In order to use a **Custom Widget** : * Select the last tab in the **Toolbox** section * Drag and drop your **Widget** where you want in the **Explorer**

{% hint style="info" %} Custom Widget cannot be previewed but an insert with a different background color shows you the size and location of your widget {% endhint %}

Example of Application Preview in Goril.App

{% hint style="info" %} When you'll run your app in a real device or a simulator, you'll be able to see your widget in action ! {% endhint %}

# Settings The Settings tab allows you to configure your projects

The Settings tab allows you to modify and configure the projects to your wants.\ It is segmented in three main parts. ## General This parts allows you to manage the general settings of your app. The name of the projects, the collaborators, languages, platforms and flavors. {% content-ref url="/pages/uVz2GKUOYi6Ifvzlah3o" %} [General](/main-pages/settings/general) {% endcontent-ref %} ## Theme This parts allows you to manage the theme of your app. The colors, the fonts and app's color theme for default and global update to all widgets. {% content-ref url="/pages/T2MkUFJ41oehGYIu39lL" %} [Theme](/main-pages/settings/theme) {% endcontent-ref %} ## Firebase This parts allows you to manage the Firebase configuration of your project. You can enable/disable some functionalities to your needs. {% content-ref url="/pages/DJScdvJX5ooiXerG9TxR" %} [Firebase](/main-pages/settings/firebase) {% endcontent-ref %} # General Manage and configure the general settings of your project

## General Settings In the general settings tab you can rename or delete the project. {% hint style="danger" %} Deleting the project is irremediable, be certain of your choice. {% endhint %} ## Collaborators In the collaborators tab you can manage the collaborators in the project.\ You can add/remove a collaborator and/or modify his role. There are three role : **Owner**, **Editor**, **Viewer** * **Owner:** Can manage collaborators, modify/delete the project. * **Editor:** Can modify the project. * **Viewer:** Can navigate through the project ## Languages In the languages tab you can manage the languages of the application and create **Localized** elements ## Platforms In the platforms you can manage global application configuration such as the available platforms for you app (iOS, Android, macos ...) and the flavors. # Theme Manage and configure the theme of your project

## Project Theming In the project theming tab you can set and create the color theme of your project. Replace a single color or create a complete panel of colors from the color picker. Change to Light/Dark mode to ensure your theme fulfill your needs in both case. ## Widgets Styling In the widget styling tab you can modify the style of default components such as Button, Icon, Card ... The newly stylized widget act as default widget when you drag and drop into your project. {% hint style="info" %} All the existing widgets in your app will update to match the new style you create here. {% endhint %} ## Typography In the typography tab you can manage the fonts and styles in your project. You can upload fonts for different file types **.ttf, .otf, .woff**. You can define global style to text style, such as font, size and color. # Firebase Manage firebase configuration for your project

## Core In the core tab you can set the **CLI Token** mandatory to use Firebase in your project. ## Authentication In the authentication tab you can enable/disable Firebase authentication in your project. ## Firestore In the Firestore tab you can enable/disable Firestore in your project. You can create/modify Firestore collections, models and rules. ## Storage In the storage tab you can enable/disable Firebase storage in your project. # Action Flow Editor # My first application Create a simple To-Do app that allows you to create, edit tasks and store them in the local state !

#### What you'll learn * Creating a model to use in an application * Designing layouts and custom components * Managing datas in local state * Creating Actions * Manipulating Observables Click to the following link to start. {% content-ref url="/pages/H5svsQdDGv3X3lGTh73F" %} [Create the project](/cookbook/my-first-application/create-the-project) {% endcontent-ref %} # Create the project In this task, you will create the project to your ToDo application and clean the default Counter app to be ready to start your project. {% hint style="info" %} In this CookBook we assume that you've already downloaded Goril.app Studio, created an account, setup the environment and logged yourself. If not, refer to the page [Setup](/setup) {% endhint %} 1. After you logged yourself, a **Project List** window will appear. 2. Click on **Add Project ,** fill the **Project Name** then click on **Save**. 3. The **Architect** page appears with a default Counter app.

{% hint style="info" %} In the **Setup** you've set a workspace folder. You can navigate through it and see that Goril.app Studio have generated the source code of the project. It is a classic Flutter project : you can open and run it in Android Studio to check. {% endhint %} Before starting to develop the ToDo application, we need to clean the default Counter app and configure the project. 1. In the **Explorer** section click on the **HomePage** top widget and in the **Settings Panel** delete the **counter** observable. 2. Right click on the **Center** widget and **Delete** it. 3. Click on the **Text** widget in **Scaffold>AppBar>Title** and in the **Settings panel** change the Text to "My tasks". 4. Click on the Floating Action Button **Fab** widget and in the **Settings panel** add "addTaskButton" in the **Name** field. Open the [Action Flow Editor](/main-pages/action-flow-editor) of the widget and delete the **Increment** action. 5. Click on the [Custom Code](/main-pages/custom-code) tab and delete the **addition** custom function, we will not use it in this application. If you come back to the **Build** tab, you should have the same thing as shown below.

{% hint style="info" %} You can at anytime run the application on a simulator or a real device by clicking on the run button on the right of the top bar. {% endhint %} You are now ready to start the ToDo project, we will see next how to create a model that you can use everywhere in the application and associate it to the **Local State.** {% content-ref url="/pages/2G8dc6Wtih4wpsP7kEXt" %} [Create the Task model](/cookbook/my-first-application/create-the-task-model) {% endcontent-ref %} # Create the Task model In this task, you will create the Task model which we will use across the application and associate it with the Local State to store them in the device. 1. Navigate to the **API** tab. 2. Click on the **Model** tab in the left panel. 3. Click on the **Add API Model** button. 4. Fill the **Model Name** with "Task". 5. To add some Properties by clicking on the **Add Field** button below **Properties** : To change a **Type** click on the showing one and select it in the dropdown. You can choose as well if the property is Nullable and/or is a List. 1. Add a "title" of type **String.** 2. Add a "date" of type **DateTime.** 3. Add a "description" of type **String?.** 4. Add a "isDone" of type **bool.** 5. Add a "priority" of type **int?.** 6. Add a "comments" of type **List\.** 6. Click on **Save.** If you click on the **Task** model you should have the same as shown below.

The Task model created now we have to create a **Local State** variable to store the tasks in the device storage. 1. Navigate to the [State](/main-pages/state) tab. 2. Click on the **Add Local State** button. 3. Fill the **Field Name** with "taskList". 4. Enable the **Persisted** switch to allow the application to store the Tasks in the device. 5. Select **Task** as **Field Type** in the bottom of the dropdown, in the Custom type section. 6. Click on **List.** 7. Click on **Save.**

In the next step we will see how to initialize a page with an observable, set the values, create and update the layout in consequence. {% content-ref url="/pages/suCPXg4tNEhMJe1Mxz2J" %} [Create the base HomePage Layout](/cookbook/my-first-application/create-the-base-homepage-layout) {% endcontent-ref %} # Create the base HomePage Layout In this task, you will initialize the HomePage with an observable, set the values, create and update the layout in consequence. {% hint style="info" %} To see the **Function**, **Preview** and **Delete** buttons, hover the desired field. {% endhint %} 1. In the **Explorer** section, select the **HomePage** top widget and in the **Settings Panel**, click on the **Add** button below **Observables.** 2. Fill the field **Name** with taskList. 3. Select **Task** as **Field Type** in the bottom of the dropdown, in the Custom type section. 4. Click on **List.** The Observable is created as shown below.

Because we can store our Tasks in Local State, we have to initialize the observable **taskList** with the current values in the local state variable **taskList**. 1. Open the **Action Flow Editor** of **HomePage.** 2. Click on **Add Action**. 3. An **Action 0** appears, click on it. 4. On the **Define Action** right panel, fill the **Action Name** with "setTaskList". 5. Select **Set Observable** as **Type.** 6. In **Set Observable Source** select the observable we have created on the HomePage **taskList - (List\).** 7. Let the **Update Type** as **Set Value** because we are setting the observable with a value. 8. When you **Hover** on the **Update Source** section, you can click on a

button that appeared.\ It allows us to select a **Source Value** from dynamic fields. 9. Select **Local State** instead of **From Value** in the dropdown. 10. The field below allows us to select which **Local State** we want to use, select **taskList -> List\.** 11. Click on **Save.**

Now that the observable is created, and the HomePage initializes it with the stored values of the Local State. We have to create our layout. 1. In the [Toolbox](/main-pages/architect/toolbox) section, search and drag and drop a **ListView** in the Body of the Scaffold. 2. Add a **Card** in the Children of **ListView.** 3. Add a **CheckboxListTile** in the Child of **Card.** 4. Add a **Text** in the Title of **CheckboxListTile.** 5. Add a **Column** in the Subtitle of **CheckboxListTile.** 6. Add a **Text**, then a **Row** below it in the Children of **Column.** 7. Add a **Flexible** in the Children of **Row.** 8. Add a **Text** in the Child of **Flexible.** 9. Add an **Icon** and a **Text** below **Flexible** in **Row.** 10. Add an **IconButton** in the Secondary of **CheckboxListTile.** Without any theming, naming and settings it should looks like shown below.

We have created a **ListView** with a defined layout for any item in it, now we have to set the **Data Source** of it with our **taskList** observable. 1. Click on **ListView** and in the **Settings Panel**, select the second tab, i.e the **Generate Children From Variable** tab. 2. Set the **Type** of the **Data Source** as **List\.** 3. Change the **From Value** to **Observable.** 4. Select the **taskList -> (List\)** in the list of observable. 5. Let the following field to empty, because we want a list of Task, and not a list of a property of Task like a list of the Title of all the Task. 6. Click on **Save.** Now the **ListView** will be populated with the data from our observable. To have a visual preview, the list view shows in the **Application Preview** multiple items to perfect our layout.

Generate ListView item with our taskList observable

{% content-ref url="/pages/jD7DyWvRbOVbJ5bdFE6D" %} [Complete the HomePage Layout](/cookbook/my-first-application/complete-the-homepage-layout) {% endcontent-ref %} # Complete the HomePage Layout In this task, you will complete the layout of the HomePage. To complete the HomePage layout, we have to define the general settings of the **CheckboxListTile** and the widgets inside it. 1. Select the **CheckboxListTile** and in the **Settings Panel**, click on the **Function** button of the **Value** field. 2. Change the **From Value** to **Generated Variable.**\ The **Generated Variable** comes from the **Data Source** we have set in **ListView.**\ So, for each value in **taskList,** it can check its properties. 3. The **Generated Variable** insert is now red because we didn't set a a value. 4. Click on it and fill the field with **itemTaskList -> Task** and **isDone -> bool.**\ Here we set the value of the **CheckboxListTile** to **True** if the field **isDone** in a task is **True**, and **False** otherwise. 5. Search the field **Tile Color** and set your desired color (#FFFFFFFF in the example). 6. Search the field **Control Affinity** and set it to **Leading.** 7. Search the field **Checkbox Shape**, enable it and set the shape to **Circle.** We are going to set the color of the leading circle icon depending on the **Priority** property in our **Task.** ( 1 being high, 2 being medium, 3 being low and 0 being default/none). 8. Search for the field **Side** (Beware to not choose the **Side** field inside **Checkbox Shape**) and enable it. Inside it, click on the **Function** button of the field **Color.** 9. Change the **From Value** to **Conditional Value.** 10. Click on **Add Conditional Value.** 11. Open the **Condition 0** created and fill, below the **IF** block, the field that define if it's a **Single** or **Multiple** condition to **Single**. 12. In the **First Value** insert, change the **From Value** to **Generated Variable** and select the **itemTaskList -> Task** and **priority -> int?** inside. 13. Let the **Equal To** condition type. 14. In the **Second Value** insert, set the **From Value** to **1.** 15. In the **Then** insert, set the **From Value** to the color desired (name Error in the example). 16. Click on **Save.** 17. Repeat the step **10-16** with the **From Value** from **Second Value** to 2 and the **From Value** from **Then** to the color desired (#FFFF6E40 in the example). 18. Repeat the step **10-16** with the **From Value** from **Second Value** to 3 and the **From Value** from **Then** to the color desired (#FF33AA23 in the example). 19. Set the **Default Value** to **On Surface.** 20. Click on **Save.** {% hint style="info" %} In the **Local State** you can add some **Default Value** to the **taskList** and fill the field with different value to watch on a simulator or a device the different **Conditional Value** you have set. {% endhint %}

You can see the different color on the check icon you have set in the conditional value of the **CheckboxListTile Value.** The next step is to set the value of the other fields of our Tasks, i.e the Title, Subtitle, Date, Comments icon and number, and Edit Button. {% hint style="info" %} If you want to see some value in the **Application Preview** instead of a simulator/device, you can add a **Preview Value** by clicking on the **Preview** button when hovering a field. {% endhint %}

#### Title 1. Select the **Text** inside **CheckboxListTile>Title.** 2. Click on the **Function** button of the field **Text.** 3. Change the **From Value** to **Generated Variable.** 4. Set the fields with **itemTaskList -> Task** and **title -> String.** 5. Click on **Save.** 6. Set a **Padding** of **10** on the **Top.** 7. Set **Ellipsis** in **Overflow.** If you run again the project on your simulator/device you will see an update of the title of the default value. You should now have the same result as shown below.

#### Subtitle 1. Select the **Column** inside **CheckboxListTile>Subtitle** and set the **Cross Axis Alignment** to **Start.** 2. Select the **Text** inside **CheckboxListTile>Subtitle>Column.** 3. Click on the **Function** button of the field **Text.** 4. Change the **From Value** to **Generated Variable.** 5. Set the fields with **itemTaskList -> Task** and **title -> String.** 6. In **Default Value** select **Static.** 7. Click on **Save.** You should now have the same result as shown below.

#### Date Because we want to show the **Date** with a precise format, we have to create a **Custom Function.** 1. Click on the [Custom Functions](/main-pages/custom-code/custom-functions) tab. 2. Click on **Add** and choose **Functions.** 3. Fill the **Name** of the function with "dateTimeToString". 4. Set a parameter "dateTime" with a **Field Type** of **DateTime.** 5. Let the return type as **String.** 6. Between the two commented line add the following import : ```dart import 'package:intl/intl.dart'; ``` 7. Set the following code to complete the function : ```dart final now = DateTime.now(); final calculateDifference = DateTime(dateTime.year, dateTime.month, dateTime.day).difference(DateTime(now.year, now.month, now.day)).inDays; switch (calculateDifference) { case -1: return 'Yesterday'; case 0: return 'Today'; case 1: return 'Tomorrow'; default: return DateFormat('dd/MM - hh:mm').format(dateTime); } ``` We can now use this function everywhere in the application. 8. Select the **Row** inside **CheckboxListTile>Subtitle>Column** and add a **Padding** of **10** on **Top.** 9. Select the **Text** inside **CheckboxListTile>Subtitle>Column>Row>Flexible.** 10. Click on the **Function** button of the field **Text.** 11. Change the **From Value** to **Custom Function.** 12. Select **dateTimeToString.** 13. Click on the **Function** button of the Parameters insert. 14. Change **From Value** to **Generated Variable.** 15. Click on the **Function** button of the **dateTime** parameter. 16. Select **itemTaskList -> Task** and **date -> DateTime.** 17. Click on **Save.** The date is now well formatted and displayed but it lacks some colors to quickly see the priority. 16. Enable **Text Style.** 17. Click on the **Function** button of **Text Color.** 18. Set the same **Conditional Value** as the one you did in the steps **9-20** in the **CheckboxListTile** widget in the beginning of this task. You should now have the same result as shown below.

#### Comment Icon and Text 1. Select the **Icon** inside **CheckboxListTile>Subtitle>Column>Row.** 2. Set a **Padding** of **5** on the **Left** and **Right.** 3. Enable **Conditional Visibility** and set a **Single** condition which if the field **comments -> List\** in **Generated Variable IS NOT EMPTY.** 4. Click on the **Icon** and search for **Comment.** 5. Set a **size** of **18.** 6. Set **Outline** as **Color.** We have to create a custom function to retrieve the length of the comments list to show it next to the previous **Icon.** 1. Click on the [Custom Functions](/main-pages/custom-code/custom-functions) tab. 2. Click on **Add** and choose **Functions.** 3. Fill the **Name** of the function with "getListLength". 4. Set a parameter "list" with a **Field Type** of **List\.** 5. Set the return type as **int.** 6. Set the following code to complete the function : ```dart return list.length; ``` We can now use this function everywhere in the application. 7. Select the **Text** inside **CheckboxListTile>Subtitle>Column>Row.** 8. Click on the **function** button of the field **Text.** 9. Set a **Conditional Value** that evaluates a **single** condition : **IF** the field **comments -> List\** in **Generated Variable IS NOT EMPTY** **THEN** the return value is the **Custom Function** with said **comments -> List\** in parameter. 10. In **Default Value** select **Static.**

10. Click on **Save.** 11. Enable **TextStyle,** inside set a **FontSize** of **14** and a **TextColor** of **Outline.** You should now have the same result as shown below.

#### Edit button 1. Select the **IconButton** inside **CheckboxListTile>Secondary.** 2. Set the **Name** as "editButton". 3. Set the **Icon** as **Edit** and the **Color** as **Primary.** You should now have the same result as shown below.

Now that the HomePage layout is completed, the next step is to add some actions in it ! {% content-ref url="/pages/13OGbA0l2oK6S05ByH9G" %} [Add Update Task Action in HomePage](/cookbook/my-first-application/add-update-task-action-in-homepage) {% endcontent-ref %} # Add Update Task Action in HomePage In this task, you will add the update task action in the HomePage. Now that the layout is completed, you need to add your first action : update the isDone task property on click ! #### Click on the CheckboxListTile The click on the **CheckboxListTile** will set the done status of the task. To update a **Task** we need a **Custom Function**. 1. Create a **Custom Function** named "updateTask". 2. Set the **Parameter task** a **Task**. 3. Set the **Return Type** as **Task.** 4. Between the two commented line add the following import : ```dart import 'package:todo_doc/models/models.dart'; ``` 7. Set the following code to complete the function : ```dart final updatedTask = task.copyWith(isDone: !task.isDone); return updatedTask; ``` We can now use this function everywhere in the application. 8. Click on the **CheckboxListTile** and open the **Action Flow Editor.** 9. Add an **Action** with the name "update". 10. Set the **Type** to **Update Local State.** 11. Set the **Update Local State Source** to your **taskList** local state. 12. In the **Update Type** set **Set Value.** 13. Click on the **Function** button of the **Update Source.** 14. The **Update Source** is which data (i.e a list of task in this example) are we using to **Set the** **Value** in the local state.\ Select **Custom Function** and choose **updateTask -> List\.** 15. The task parameters are **LocalState taskList -> List\** and **Generated Variable itemTaskList -> List\.** 16. Click on **Save.**

17. Below the **Update** action, click on the **+** and choose **Add Condition.** 18. The condition is **Single** and evaluates **IF** the **Action Parameter selected -> bool?** is **Equal To From Value True.** {% hint style="info" %} The **Action Parameter** is a parameter induced by the component you are adding an action. In this case because it is a **CheckboxListTile** (so a Checkbox) the induced parameter is **selected -> bool?** In a condition, the **From Value** is represented by a switch and true/false is the switch selected/unselected. {% endhint %}

If the result of the condition is **True**, the task is done, we can show the user a congratulations message. 19. Below **True**, add an **Action** named "showSnackbar". 20. The **Type** of action is **Show Snackbar.** 21. Click on the **Function** button of the **Message** field. 22. Select **Combined Text** and click on **Add** below Sources. 23. Set the text to "Well Done !". 24. Add a second source with the **Generated Variable itemTaskList title.** 25. Add a third source with the text "is completed !". 26. Enable **TextStyle.** 27. Set the **TextColor** to your desired one (#FFFFFFFF in the example). 28. Set the **Background color** to your desired one (#FF33AA23 in the example). 29. Click on **Save.**

When clicked, your task is updated and your local state as well. But if you do not update the **taskList** observable you are not going to see any visual change beside the Snackbar. 30. Beneath the condition block, add an **Action** named "updateObservable". 31. Set the **Type** as **Set Observable** and choose your **taskList** observable. 32. In **Item Index** select **Generated Index indexItemTaskList.** 33. In **Update Source** select **Local State** and your **taskList -> List\.** 34. Click on **Save.**

The action to set a task to Done/Undone is now complete. You should have the same result as shown below.

Now that you can update a task and set it as done/undone, the next step is to be able to create a task. {% content-ref url="/pages/KFbB54Lra7P64MdcZNjH" %} [Create the CreateTask component](/cookbook/my-first-application/create-the-createtask-component) {% endcontent-ref %} # Create the CreateTask component In this task, you will create the component in charge of creating a task Now that you can update a task, you need to be able to create one and use real data rather than default value in local state. To do so, you are going to create a component. 1. In the **Toolbox** select the **Component List** and click on **Add New Component.** 2. Fill the fields with "CreateTask". 3. Add a **Container** in the top of the **Explorer.** 4. Add a **SafeArea** in the Child of the **Container**. 5. Add a **SingleChildScrollView** in the Child of the **SafeArea**. 6. Add a **Form** in the Child of the **SingleChildScrollView**. 7. Add a **Card** in the Child of the **Form**. 8. Add a **Column** in the Child of the **Card**. 9. In the **Column** add two **TextField**, a **DateTimePicker** and a **Row**. 10. In the **Row** add an **IconButton**, a **Flexible** and a **Button**. 11. Add a **ChoiceChip** in the Child of the **Flexible**. 12. Add an **Icon** in the Child of the **Button**. You should have the same result as shown below.

With a complete layout, you can now add the theme and settings. 1. Set the **Color** of the **Card** with desired one (#FFFFFFFF in the example). 2. In the **Column** set a **Padding** of **10** on the **Left** and **Right, 20** on the **Bottom.** Set the **MainAxisSize** to **Min** and the **CrossAxisAlignment** to **Start.** 3. Select the first **TextField** and add the **Name** "title". Enable **Decoration** and set an **Hint Text** like "Ex : Make Waffles". Enable **Hint Style** and set the **Text Color** as **Outline.** Set **Is Dense** to **True.** Enable **Border** and set it to **Outline.** Enable **Border Side** and set a **Width** of **0** and a **Style** of **None.** Enable **Validation Builder** and set **Required** to **True.** 4. Select the second **TextField** and repeat the same action on the 3. except for the **Validation Builder.** Make sure to correctly name the **TextField** description, and fill a correspondant hint. 5. Select the **DateTimePicker** and name it "date". Enable **Decoration** and set an **Hint Text** like "Select due date". Enable **Hint Style** and set the **Theme Text Style** as **Title small**, set the **Text Color** as you wish (#FF33AA23 in the example). Enable **Prefix Icon** and search the icon "month", set the same **Color** as above. Set the same **Border** and **Validation Builder** you did on 3. 6. Select the **Row,** set a **Padding** of **5** on **Top** and **10** on **Bottom,** set **MainAxisAlignment** to **Space Between** and set **MainAxisSize** to **Max.** 7. Select the first **IconButton** in **Row,** name it "priorityButton". Add a **Padding** of **10** on the **right**. Enable **Icon** and search for the icon "flag", set its **Color** to a **Conditional Value** that have **3** conditions that evaluates if the **WidgetState ChoiceChip value** is **Equal To 1, 2,** or **3** and set a **Default Value** to **Outline.** (see capture below).

8. Select the **ChoiceChip** and enable **Decoration** and set **Is Dense** and **Is Collapsed** to **True.** Set the same **Border** as you did on 3. Set **Initial Value** to **0** and below in **Options** add 3 values : **1**, **2** and **3**. 9. Select the second **IconButton** in **Row,** name it "createTaskButton". Add **Style Type** to **Elevated Button**. Enable **Style** and set **Background Color** to **Primary.** Set a **Padding** of **10** on **all.** Enable **Shape** and set it to **Circle.** 10. Select the **Icon** and enable **Icon,** search for "check" and set the **Color** to #FFFFFFFF. You should have the same result as shown below.

The next step is to add the actions to this layout. {% content-ref url="/pages/DmEpXXQYYiKcOJ02nRZ2" %} [Add Actions in CreateTast component](/cookbook/my-first-application/add-actions-in-createtast-component) {% endcontent-ref %} # Add Actions in CreateTast component In this task, you will add all the actions mandatory to correctly create a task. In order to create a task, we first have to ensure our widgets interacts well together. 1. Select the Top widget **Create Task** and in the right **Settings panel** add an **Observable** named "isPriorityVisible" with **Field Type bool.**

2. Select **ChoiceChip** and in **Conditional Visibility** add a **Single** condition that evaluates **IF** the **Observable isPriorityVisible -> bool** is **Equal To True.** This set the **Visibility** of the **ChoiceChip** to **True** when the value of the observable **isPriorityVisible** is **True.** You now have to change the value of this observable when the flag priorityButton is being clicked. 3. Select the **priorityButton** and open the **Action Flow Editor.** Add an action with **Type Set Observable.** Choose **isPriorityBool - (bool)** in the **Source** and let the **Update Type** as **Set Value.** In the **Update Source** add a **Conditional Value** that have **2** conditions : **IF** the **observable** **isPriorityVisible** value is **Equal To True** **THEN** the value is **False.** The second is the opposite : **IF** the **observable** **isPriorityVisible** value is **Equal To False** **THEN** the value is **True.**

Set UpdateObservable isPriorityVisible action

Now the UI is correctly configured, we have to handle the creation of the task. 4. Select **createTaskButton,** open the **Action Flow Editor** and add a **Conditional Action.** This is a **Single** condition that evaluates **IF** the **Widget State Form form -> bool** is **Equal To True.** 5. In the **True** branch add an action named "navigateBack" with the **Type Navigate Back.** Enable **Return Value** and set the **Return Type** to **Task.** Let the **Return Value** to **From Value.** For the **title** put the **Widget State title title -> String?, Force Not Null** value because in the **Task** model, the title is non optional. Do the same for the **date.** For **description** don't **Force Not Null** because it is optional is the model. Let **isDone** to false because a created task is not already done. For **priority** set a **Conditional Value** that evaluates **IF** the value of **Widget State ChoiceChip IS NOT NULL THEN** the value is **Widget State ChoiceChip Force Not Null.** For **comments** click on **Add Value** then delete the **Value 0** created because we want to initialize the comments with an empty list. *(See the complete action shown below.)*

Now, the CreateTask component return a task and navigate back to the HomePage. But we have no action to actually open this component and handle the returned task. 6. In the **HomePage** select the **addTaskButton,** open the **Action Flow Editor** and create an action named "showCreateTask" of **Type Show Bottom Sheet.** Select your **CreateTask** component and set a **Return Value** of type **Task?.** The return value is nullable because the user can dismiss the bottom sheet without creating a task. Click on **Save** on the bottom on the panel. 7. Below add a **Condition** that evaluates **IF** the **Action Output** of **showCreateTask->Task? IS NOT NULL.** Let the **Default Value** empty.

8. In the **True** branch of the condition, add an action named "addTaskInList" of **Type Update Local State.** The **Update Local State Source** is your **taskList - (List\)** local state. Set the **Update Type** to **Add To List** and the **Update Source** to **Action Output showCreateTask -> Task? Force To Null.**

Now your Local State **taskList** is updated with the new task just created, but to see any visual changes you have to update the observable. 9. Add an action named "updateObservable" of type **Set Observable.** Set the **Observable Source** with your observable **taskList - (List\)** and the **Update Type** with **Set Value.** Set the **Update Source** to **Local State taskList -> List\.**

At this point, you created a CreateTask component that return the Task when completed and update the HomePage with the result. We can now delete the default values put on the local state **taskList** and test the application.

The next step is to create the EditTask and update the HomePage when a task is updated. {% content-ref url="/pages/XShWRN1r3Ds40OuUXel9" %} [Create the EditTask component](/cookbook/my-first-application/create-the-edittask-component) {% endcontent-ref %} # Create the EditTask component In this task, you will create an EditTask component which allows you to modify and update a task. The same way you did for the CreateTask, you are going to create a **New Component.** 1. Create an **New Component** named "EditTask". 2. Add the same pattern as the **CreateTask** component : **Container>SafeArea>SingleChildScrollView>Form>Card>Column.** 3. Add a **Row** composed of **2 Button**, add a **Text** in each **Button.** 4. Add a **Row** composed of an **Icon** and a **TextField** in a **Flexible.** 5. Add a **Row** composed of an **Icon** and a **TextField** in a **Flexible.** 6. Add a **Row** composed of an **Icon** and a **DateTimePicker** in a **Flexible.** 7. Add a **Row** composed of an **Icon** and a **ChoiceChip** in a **Flexible.** 8. Add a **Divider.** 9. Add a **Column** composed of a **Text.** 10. Add a **Row** composed of a **TextField** in a **Flexible** and an **IconButton.** You should have the same result as shown below.

With a completed layout, you now have to add the theme and settings. 1. Set the **Color** of the **Card** with desired one (#FFFFFFFF in the example). 2. In the **Column** set a **Padding** of **10** on the **Left** and **Right, 20** on the **Bottom.** Set the **CrossAxisAlignment** to **Start.** 3. Select the first **Row** and set the **MainAxisAlignment** to **Space Between.** 4. In this **Row** select the first **Button**, name it "cancelButton" and set the **Style Type** to **Outlined Button,** enable **Style,** enable **Side** and set **Color** with **Error.** \ Select the **Text** inside, set the **Text** as "Cancel", enable **TextStyle** and add the same color as above in **TextColor.** 5. Select the second **Button**, name it "saveButton" and repeat the step above with the color #FF33AA23 and the **Text** "Save". 6. Select the **ChoiceChip** and name it "priority". 7. Select the **Icon** in the second **Row**, enable **Icon** and search for "circle outlined", set its **Color** to a **Conditional Value** that have **3** conditions that evaluates if the **WidgetState priority value** is **Equal To 1, 2,** or **3** and set a **Default Value** to **Outline.** (see capture below).\ Select the **TextField** inside the **Flexible,** name it "title" and enable **Decoration,** set **Is Dense** to **True,** enable **Border** and set it to **Outline**, enable **Border Side** and set the **Width** to **0** and the **Style** to **None**, enable **Validation Builder** and set **Required** to **True.**

7. Select the **Icon** in the third **Row**, enable **Icon** and search for "text", set the **Color** to **Outline.**\ Select the **TextField** inside the **Flexible**, name it "description" and repeat the **Decoration** step from the **TextField** "title" without the **Validation Builder** part and with an **Hint Text** of "Description" in addition. 8. Select the **Icon** in the fourth **Row**, enable **Icon** and search for "today", set the same **Conditional Value** in **Color** as the **Icon** in 6.\ Select the **DateTimePicker** inside the **Flexible**, name it "date" and repeat the **Decoration** step from the **TextField** "title". 9. Select the **Icon** in the fifth **Row**, enable **Icon** and search for "flag", set the same **Conditional Value** in **Color** as the **Icon** in 6.\ Select the **ChoiceChip** "priority" inside the **Flexible** and enable **Decoration** and set **Is Dense** and **Is Collapsed** to **True.** Set the same **Border** as you did on 6. Set **Initial Value** to **0** and below in **Options** add 3 values : **1**, **2** and **3**. 10. Select the **Divider** and set the **Thickness** to **2.** 11. Select the **Column** and set **Cross Axis Alignment** to **Start.**\ Select the **Text,** add a **Static Preview Value** of "My comment" and enable **TextStyle** to set a **FontSize** of **16.** 12. Select the last **Row,** set a **Top Padding** of **20**, **MainAxisAlignment** to **Space Between** and **MainAxisSize** to **Max.**\ Select the **TextField** inside the **Flexible** and name it "comment", enable **Decoration** set an **Hint Text** of "Add comment", enable **Border** and set a **BorderRadius** of 10 on all.\ Select the **IconButton,** name it "addComment" and set the **Icon** "send" of **Size 32** and **Color Primary.** You should have the same result as shown below.

The next step is to add the actions to this layout. {% content-ref url="/pages/PBpoSiIC1pxwx99E77CD" %} [Add Actions in EditTask component](/cookbook/my-first-application/add-actions-in-edittask-component) {% endcontent-ref %} # Add Actions in EditTask component In this task, you will add all the actions mandatory to correctly edit a task. In order to update a task, we first have to ensure our widgets interacts well together. To update a task we have to make sure the EditTask component is opened with a Task in parameter and the modification update the global layout of the view. 1. Select the top widget **EditTask** and add a **Parameter** named "task" of **Type Task.**

2. Add an **Observable** named "taskObs" with **Field** **Type Task.**\ Set the **Default Value** of **title** to "Default", of **date** to **Now** in **DateFormat** dropdown, of **isDone** to **False,** of **comments** to an empty list by clicking on **Add Value** then deleting the **value 0.**

3. Select the widget **title** and set an **Initial Value** of **Observable taskObs -> (Task) title.** 4. Select the widget **description** and set an **Initial Value** of **Observable taskObs -> (Task) description.** 5. Select the widget **date** and set an **Initial Value** of **Observable taskObs -> (Task) date.** 6. Select the widget **priority** and set an **Initial Value** of a **Conditional Value** that evaluates the value of **Observable taskObs -> (Task) priority** value to set a **Static From Value** of it.\ The **priority** can have the values **1, 2, 3** or a **Default Value** of **0.** (see capture below).

priority Initial Value Conditional Value

7. Select the **Column** and set a **Conditional Visibility** to **True** if the **Observable taskObs -> (Task) comments Is Not Empty.** \ In the **Generate Children** tab, set the **Data Source** as **Observable taskObs -> (Task) comments.**\ Select the **Text** inside and set the **Text** as **Combined Text** with two **Sources** : "-" and the **Generated Variable comments -> String.** The layout is correctly updating itself on changes, now you need to add actions to the component. 8. Add an **Action** to **EditTask** component named "setObs" that **Set Observable taskObs - (Task)** with the **task -> Task** from the **Parameters.**

9. Add an **Action** to **cancelButton** that **Navigate Back.**

10. Add a **Conditional** **Action** to **saveButton** that evaluates the **Widget State Form form.**\ In the **True** branch, add an **Action** "save" **Navigate Back** that **Return a Task Value From Value.**\ The **title** is the value of the **Widget State title Force Not Null.**\ The **date** is the value of the **Widget State date Force Not Null.**\ The **description** is the value of the **Widget State description.**\ The **isDone** is the value of the **Observable taskObs -> (Task) isDone.**\ The **priority** is a **Conditional Value** that evaluates **IF** the **Widget State priority Is Not Null** then the value is the **Widget State priority Force Not Null.**\ The **comments** is the value of the **Observable taskObs -> (Task) comments.**

Before getting to the next step we have to add a **Custom Function** named "addComment", that takes **two** parameters : a **String comment** and a **Task task.** The **Return Type** is a **List\.** Between the two commented line add the following import : ```dart import 'package:todo_doc/models/models.dart'; ``` Set the following code : ```dart List comments = List.of(task.comments); comments.add(comment); return comments; ``` We can now use this function everywhere in the application. 11. Add a **Conditional Action** to **addComment** that evaluates **IF** the **Widget State comment** **Is Not Empty.**\ In the **True** branch add an **Action** named "updateTaskObservable" of **Type** **Set Observable,** the **Observable Source** is **taskObs - (Task),** the **Update Type** is **Set Value**.\ The fields in **Update Source** are the same as 10. except for the **comments.**\ In this case **comments** is a **Custom Function addComment -> List\**, the parameter **comment** being the **Widget State comment Force Not Null** and the parameter **task** being the **Observable taskObs -> (Task).**

Now, the EditTask component return a task and navigate back to the HomePage. But we have no action to actually open this component and handle the returned task. 12. In the **HomePage** select the **editButton,** open the **Action Flow Editor** and create an action named "showEditTask" of **Type Show Bottom Sheet.** Select your **EditTask** component and set **Generated Variable itemTaskList -> Task** as **Parameters** and set a **Return Value** of type **Task?.** The return value is nullable because the user can cancel the bottom sheet without updating a task. Click on **Save** on the bottom on the panel.

13. Below add a **Condition** that evaluates **IF** the **Action Output** of **showEditTask->Task? IS NOT NULL.** Let the **Default Value** empty.

showEditTask Action Output null condition

14. In the **True** branch of the condition, add an action named "updateLocalState" of **Type Update Local State.** The **Update Local State Source** is your **taskList - (List\)** local state. Set the **Update Type** to **Update Item At Index,** the **Item Index** is **From Generated Index** and the **Update Source** to **Action Output showEditTask -> Task? Force To Null.**

15. Add an action named "updateObservable" of type **Set Observable.** Set the **Observable Source** with your observable **taskList - (List\)** and the **Update Type** with **Set Value.** Set the **Update Source** to **Local State taskList -> List\.**

Now, you should be able to edit a task, and have the same result as shown below.

Congratulations ! You have completed the ToDo application tutorial !