Custom Data Type in App State
Let's see how you can utilize custom data types in an app state variable through an example. An app where users can add, update, and delete products. We can create a custom data type called 'product' and then an app state variable that holds the list.
Here's how it looks when completed:
Here are the steps to build such an example:
1. Creating app state variable with custom data type
First, create a custom data type with the name 'product' and then create an app state variable named 'products' and mark it as 'Is List' so that it can hold the list of 'product'.
Here's how you create it:
You can also prefill the values for custom data types directly within the app state variable.
To do so, simply click on 'Tap to Edit Fields', enter values, and click Save Data. To add more, use + Add Item button. For this example, let's add some pre-existing products.
2. Showing a list of products
To show a list of products, you can add a ListView > ListTile widget. On the ListView widget, Generate Children from Variable, and while doing so, select the App State > [app_state_variable] i.e., 'products'.
Now, to display the product details (i.e., a custom data type field values such as name and price) on the ListTile widget:
Select the ListTile widget, move to the properties panel > Title > Text > Set from Variable menu > [generate_children_from_variable_name] item.
Set Available Options to Data Structure Field. This allows you to select a field from a custom data type.
Now Select Field that you want to display.
3. Add product
You can add a new 'product' (i.e., custom data type) in the app state variable via the Update App State action. Here's how you do it:
Select the widget (i.e., Button in this case) and add the Update App State action.
Click on + Add Fields and select the app state variable i.e., 'products' in this case.
Select Update Type to Add to List.
Now you must get the custom field values such as name and price from the TextFields and prepare a 'product' custom data type to be added. To do so:
Select UNSET > Set Variable > Create Data Type > [custom_data_type_name]. Tip: Don't get confused with the name 'Create Data Type'. You already created it, but here it means that you have to prepare the data type or fill in data type values.
Click on + Add Fields, and set the field value from Set Variable > Widget State > [TextFieldName].
Similarly, set other custom field values.
4. Update product
In this example, we are updating the product item on a new page. To provide a better user experience, we initially display the current values of the product, ensuring that users have a clear idea of what they are going to edit. They can then effortlessly edit and update the desired fields without the need to re-enter all the information.
To display the product details of a specific product, we first pass the 'product' index from the previous page and use it to retrieve the product from the app state variable. After this, you can select the field to display in the TextField widget.
If you are a newbie, an "index" typically refers to a numeric identifier or key assigned to an item or record in a list. It acts as a unique identifier for each item and allows for efficient retrieval and organization of data.
To display existing product details on TextField:
Select the TextField widget, move to the properties panel > TextField Properties > Initial Value > Set from Variable menu > App State > [app_state_variable]. Here we select the app state variable.
Set Available Option to Item at Index and List Index Options to Specific Index. Here we are telling to retrieve a product from a specific index in a list.
Set Index Value to Page Parameters > [page_parameter_name](that holds the product index).
Finally, Select Field that you want to display.
To update the values inside the 'product', again, you can use the Update App State action. Here's how you do it:
Select the widget (i.e., Button in this case) and add the Update App State action.
Click on + Add Fields and select the app state variable i.e., 'products' in this case.
Select Update Type to Update Item at Index because we want to update a specific product.
Set the Item Index to Page Parameters > [page_parameter_name] (that holds the product index). This will help retrieve the exact product based on the specified index.
Select Update Type to Update Field(s) and click on Update [custom_data_type_name].
Click on + Add Fields, and set the field value from Set Variable > Widget State > [TextFieldName]. Similarly, set other custom field values.
5. Delete product
In this example, we delete the product directly from the list. You can do so by first retrieving its index from the list and then using it in Update App State action to remove an item based on the index.
Here's exactly how you do it:
Select the widget (i.e., SlidableActionWidget from Slidable ListTile widget in this case) and add the Update App State action.
Click on + Add Fields and select the app state variable i.e., 'products' in this case.
Select Update Type to Remove from List at Index because we want to remove a specific product.
Set the Index to remove to [generate_children_from_variable_name] item > Index in List. This removes the exact product based on the specified index.
Example project
You will find the pages demonstated here in the 'ProductListing' folder of this example project.
FAQs
How do I remove an item in a list within a datatype?
To understand how to delete an item in a list within a custom datatype, let's take an example of a 'product' datatype and use it to store a list of products in an app state variable. And the 'product' datatype further contains the list of addons like this:
Now, to delete an addon item in a list within the 'product' data type, first ensure you have a widget that lets users delete an item (e.g., ListTile with SlidableActionWidget).
On click of the widget, add an action that updates the current product in an app state variable. While updating, you can Select Update Type to Update Field(s) because we want to update the addons list in a specific product (i.e., remove one item). Here, select the field with a list (i.e., addons), Select Update Type to Remove from List at Index, and set it to Index in List.
Last updated
