Skip to content

Commit 29579d9

Browse files
pinkeshmarsPoojaB26
pinkeshmars
and
PoojaB26
authored
Added data representation (#25)
* Added data representation * Addressing review comments part 1 * Addressing review comments part 2 * Added encapsulation * Minor updates --------- Co-authored-by: PoojaB26 <[email protected]>
1 parent 8b7710f commit 29579d9

19 files changed

+472
-0
lines changed

‎docs/resources/data-representation/_category_.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "Data Representation",
3+
"position": 1
4+
}

‎docs/resources/data-representation/app-state.md

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
slug: app-state
3+
title: App State
4+
tags: []
5+
description: Learn how to effectively utilize App State Variables in FlutterFlow to maintain and manage global application states across all pages and components.
6+
sidebar_position: 4
7+
---
8+
9+
# App State
10+
11+
App state variables are specific variables that hold the current state of an application. They can be accessed and modified throughout the entire application across all pages and components. This type of variable can be useful for storing data that needs to be shared between different parts of the app, such as user preferences and authentication tokens.
12+
13+
![app-state-variables.avif](../imgs/app-state-variables.avif)
14+
15+
App state variables should be used in scenarios where the same data needs to be accessed and modified from multiple locations within the app. For instance, in a shopping cart app, items in a user's cart are usually accessible across different pages.
16+
17+
App state variables should not be used for temporary data that doesn't impact the overall state of the application. For instance, a user's temporary input in a form should not be stored in an app state variable. It would be more appropriate to use a [page state](#) or [component state](#) variable instead.
18+
19+
## Working with App State Variables
20+
21+
Let’s see how you can manage the app state variable using an example of adding items to a cart in a shopping app.
22+
23+
### Create app state variable
24+
25+
Head over to the left-side navigation menu and follow the steps below to create a variable.
26+
27+
<div style={{
28+
position: 'relative',
29+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
30+
height: 0,
31+
width: '100%'
32+
}}>
33+
<iframe
34+
src="https://demo.arcade.software/QjdQ0cTmGDqUeG6F1JMh?embed&show_copy_link=true"
35+
title="Sharing a Project with a User"
36+
style={{
37+
position: 'absolute',
38+
top: 0,
39+
left: 0,
40+
width: '100%',
41+
height: '100%',
42+
colorScheme: 'light'
43+
}}
44+
frameborder="0"
45+
loading="lazy"
46+
webkitAllowFullScreen
47+
mozAllowFullScreen
48+
allowFullScreen
49+
allow="clipboard-write">
50+
</iframe>
51+
</div>
52+
### Update app state variable
53+
54+
To update the app state variable, we need to add an action to the 'Add to Bag' button. Within this action, we'll provide the product details and configure it to add to the current cart list.
55+
56+
<div style={{
57+
position: 'relative',
58+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
59+
height: 0,
60+
width: '100%'
61+
}}>
62+
<iframe
63+
src="https://demo.arcade.software/FKv2dXq4jTjjJVLy6nxu?embed&show_copy_link=true"
64+
title="Sharing a Project with a User"
65+
style={{
66+
position: 'absolute',
67+
top: 0,
68+
left: 0,
69+
width: '100%',
70+
height: '100%',
71+
colorScheme: 'light'
72+
}}
73+
frameborder="0"
74+
loading="lazy"
75+
webkitAllowFullScreen
76+
mozAllowFullScreen
77+
allowFullScreen
78+
allow="clipboard-write">
79+
</iframe>
80+
</div>
81+
### Use app state variable
82+
83+
The variable can now be accessed via set from variable menu. For example, on the cart page, you can loop through the app state variable to display each item.
84+
85+
![access-app-state-variable.avif](../imgs/access-app-state-variable.avif)

‎docs/resources/data-representation/constants.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
slug: constants
3+
title: Constants
4+
tags: []
5+
description: Explore the importance of using Constants in FlutterFlow to define unchanging values throughout your application.
6+
sidebar_position: 5
7+
---
8+
9+
# Constants
10+
Constants are used to define values that remain unchanged throughout the lifetime of an application. Using constants is a good practice for values that do not need to be recalculated or reassigned.
11+
12+
Constants are used to define values that you believe are fixed, like API endpoints, standard mathematical values, maximum size limits set by business rules, etc.
13+
14+
:::tip[When to use Constants vs **[App state variables](app-state)?**]
15+
Constants don't change. Once you set its value (in builder), you can't change it from within the app. On the other hand, app state variables are dynamic. They can be updated in response to interactions in the application, such as a user clicking a button or entering data.
16+
:::
17+
18+
## Create and use Constants
19+
20+
<div style={{
21+
position: 'relative',
22+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
23+
height: 0,
24+
width: '100%'
25+
}}>
26+
<iframe
27+
src="https://demo.arcade.software/Dftl0AAL3w3fw6TjaiBR?embed&show_copy_link=true"
28+
title="Sharing a Project with a User"
29+
style={{
30+
position: 'absolute',
31+
top: 0,
32+
left: 0,
33+
width: '100%',
34+
height: '100%',
35+
colorScheme: 'light'
36+
}}
37+
frameborder="0"
38+
loading="lazy"
39+
webkitAllowFullScreen
40+
mozAllowFullScreen
41+
allowFullScreen
42+
allow="clipboard-write">
43+
</iframe>
44+
</div>

‎docs/resources/data-representation/custom-data-types.md

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
slug: custom-data-types
3+
title: Custom Data Types
4+
tags: []
5+
description: Learn how to create and utilize custom data types in FlutterFlow to handle complex data structures that predefined types can't cover.
6+
sidebar_position: 2
7+
---
8+
9+
# Custom Data Types
10+
11+
In FlutterFlow, custom data types allow you to define structured data models that enhance data management and consistency across applications. These data types serve as blueprints for organizing related data attributes.
12+
13+
For instance, you can define a custom data type "Book" that combines predefined data types, such as a string for the title, an integer for the year of publication, and a list of strings for the authors.
14+
15+
Custom data types have several key advantages:
16+
17+
- **Reusable**: Define once, use everywhere.
18+
- **Easy to Update**: Change data structure in one place, and see it reflected throughout your app.
19+
- **Consistent**: Keeps data format uniform across the application.
20+
- **Efficient**: Simplifies complex data handling, reducing errors and redundant code.
21+
22+
:::info
23+
24+
- Use custom data type when predefined data types, such as _integer_ and _string_ may not be enough to store certain kinds of information.
25+
- FlutterFlow also supports some [**Built-in Data Types**](data-types#built-in-data-types).
26+
27+
:::
28+
29+
![custom data type](../imgs/custom-data-type.avif)
30+
When you create a custom data type, it internally creates a Struct. A struct, or structure, is a composite data type that lets you combine fields of different data types to construct a data structure to suit your specific needs.
31+
32+
:::info
33+
The class name for such data types is generated by appending "Struct" to the name of the data type. For example, if you create a custom data type called "Cart", the corresponding class would be named "CartStruct".
34+
:::
35+
36+
## Creating Custom Data Type
37+
38+
To create a custom data type, specify its name and the corresponding fields. Each field can have a distinct data type. You can also specify if a field should allow multiple entries using the **Is List** toggle.
39+
40+
<div style={{
41+
position: 'relative',
42+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
43+
height: 0,
44+
width: '100%'
45+
}}>
46+
<iframe
47+
src="https://demo.arcade.software/fdx2RldmRxm5VeQdaHyd?embed&show_copy_link=true"
48+
title="Sharing a Project with a User"
49+
style={{
50+
position: 'absolute',
51+
top: 0,
52+
left: 0,
53+
width: '100%',
54+
height: '100%',
55+
colorScheme: 'light'
56+
}}
57+
frameborder="0"
58+
loading="lazy"
59+
webkitAllowFullScreen
60+
mozAllowFullScreen
61+
allowFullScreen
62+
allow="clipboard-write">
63+
</iframe>
64+
</div>
65+
66+
## Accessing Custom Data Type
67+
68+
After creating the custom data type, you can use it to create variables, such as an app state variable, and then access them. Here's an [example](app-state#working-with-app-state-variables).
69+
70+
### Custom Data Type in Custom Code
71+
Sometimes, you might want to access the custom data type in your custom code. Our custom code editor allows you to receive and pass data into a variable of a custom data type. For example, you could manipulate or analyze the data as needed, and then return the modified result in the custom data type.
72+
73+
![custom-data-in-custom-code.avif](../imgs/custom-data-in-custom-code.avif)
74+
75+
## Use case: mapping JSON responses from API calls
76+
77+
Consider a case where you're calling an API that returns product details. You could create a custom data type 'Product' representing the JSON structure and then map the JSON values to the custom data type field.
78+
79+
So, if the JSON response looks like this:
80+
81+
```json
82+
{
83+
"id": "a1b2c3d4e5f678901234567",
84+
"name": "Jacket",
85+
"price": 199.99,
86+
"reviews": [
87+
{
88+
"id": "rev101",
89+
"username": "mike",
90+
"rating": 4,
91+
"comment": "This product exceeded my expectations in every way. Highly recommended!",
92+
},
93+
{
94+
"id": "rev102",
95+
"username": "kera",
96+
"rating": 2,
97+
"comment": "Great quality, but the color was not as shown in the picture.",
98+
}
99+
],
100+
}
101+
```
102+
103+
Here’s how you map into a custom data type:
104+
105+
![mapping-json-to-custom-data-type.avif](../imgs/mapping-json-to-custom-data-type.avif)
106+

‎docs/resources/data-representation/data-types.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
slug: data-types
3+
title: Data Types
4+
tags: []
5+
description: Dive into the diverse range of data types supported by FlutterFlow, from basic primitives like integers and strings to complex composite types and built-in functionalities tailored for app development.
6+
sidebar_position: 1
7+
---
8+
9+
# Data Types
10+
11+
FlutterFlow supports a variety of data types to accommodate different needs in your app. These data types range from the basic, such as integers and strings, to more complex types like lists, maps, and built-in data types.
12+
13+
## Primitive Data Types
14+
15+
Primitive data types are the most basic data types. They include **integers**, **doubles**, **booleans**, and **strings**. These are the building blocks and are essential in any kind of app development.
16+
17+
## Composite Data Types
18+
19+
Composite data types are made up of primitive data types. They can hold multiple values and can be used to structure and organize data in a more meaningful way. Examples of composite data types include **lists** and **custom data types**.
20+
21+
### Custom Data Types
22+
You can also create your own custom data types. This can be especially useful when you need a specific structure for your data that doesn't fit into the predefined types. For example, you might create a custom data type for a user profile, which includes several pieces of data like a name, an email address, and a profile picture.
23+
24+
:::info
25+
Learn more about creating and using custom data types [**here**](custom-data-types).
26+
:::
27+
28+
## Built-in Data Types
29+
30+
FlutterFlow's built-in data types are essential for effectively managing and organizing diverse information. They ensure data consistency and easy data retrieval. They handle functionalities from storing simple color values and media URLs to complex geographical data.
31+
32+
For instance, the **GooglePlace** data type manages location data like coordinates, place name, and address, while the **Uploaded File** type handles uploaded file data, including file name, binary data, and image dimensions. This standardization is crucial as it allows you to focus on higher-level application logic without worrying about the underlying data handling specifics.
33+
Below is a list of all supported built-in data types:
34+
35+
- **Color**: Stores color values.
36+
- **Image Path**: Stores the URL of uploaded images.
37+
- **Video Path**: Stores the URL of uploaded videos.
38+
- **Audio Path**: Stores the URL of uploaded audio files.
39+
- **Document Reference**: Stores references to documents, simplifying data fetching.
40+
- **Document**: Stores actual Firestore documents.
41+
- **Timestamp**: Stores date and time values.
42+
- **Json**: Stores JSON values, such as `{"firstName":"John", "lastName":"Doe"}`.
43+
- **LatLng**: Stores the latitude and longitude of specific locations, aiding Google Maps integration.
44+
- **TimestampRange**: Stores start and end date-time values.
45+
- **GooglePlace**: Stores GooglePlace data.
46+
- **Data Type**: Stores custom data types.
47+
- **Supabase Row**: Stores actual row data from a Supabase table.
48+
- **Uploaded File (Bytes)**: Stores uploaded files in Bytes.
49+
50+
## Enums
51+
52+
Enums, or enumerated types, are a special kind of data type that consists of a set of related values. They can be used to create a type-safe way of dealing with a specific set of values. For instance, you may have an enum for user roles, such as 'admin', 'user', and 'guest'.
53+
54+
:::info
55+
56+
Learn more about creating and using enums [**here**](enums).
57+
58+
:::

‎docs/resources/data-representation/enums.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
slug: enums
3+
title: Enums
4+
tags: []
5+
description: Learn how Enums can enhance the management of application states, product types, and process statuses by providing a robust method to handle predefined sets of values.
6+
sidebar_position: 3
7+
---
8+
9+
# Enums
10+
11+
In FlutterFlow, Enums (enumerations) provide a method for defining a set of named constants. They are typically used to represent a group of related values in a more readable and safe manner.
12+
13+
They prevent invalid values from being assigned. For example, if you have an enum for days of the week, you can't mistakenly assign a non-existent day. In contrast, with strings or numbers, you might accidentally use an invalid or misspelled value like "Sundey" or "Sinday".
14+
15+
![enums](../imgs/enums-fi.avif)
16+
17+
Here are some real-world examples where using Enums is beneficial:
18+
19+
1. **Application States**: A media player might use enums to keep track of playback states (e.g., playing, paused, stopped).
20+
2. **Product Types, Sizes, or Categories**: A clothing store app might use enums to categorize clothing sizes (small, medium, large).
21+
3. **Order or Process Status**: For tracking the status of orders, processes, or tasks (pending, inProgress, completed, canceled).
22+
23+
## Create and use Enums
24+
25+
1. You can create Enums from the left side navigation menu and add values to it.
26+
27+
<div style={{
28+
position: 'relative',
29+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
30+
height: 0,
31+
width: '100%'
32+
}}>
33+
<iframe
34+
src="https://demo.arcade.software/U6crZTuELtgYinr4ZxQp?embed&show_copy_link=true"
35+
title="Sharing a Project with a User"
36+
style={{
37+
position: 'absolute',
38+
top: 0,
39+
left: 0,
40+
width: '100%',
41+
height: '100%',
42+
colorScheme: 'light'
43+
}}
44+
frameborder="0"
45+
loading="lazy"
46+
webkitAllowFullScreen
47+
mozAllowFullScreen
48+
allowFullScreen
49+
allow="clipboard-write">
50+
</iframe>
51+
</div>
52+
53+
2. Access the Enum values by navigating to the **Set from Variable** menu, then selecting **Enums > [your enum name] > Values**.
54+
55+
![enums.avif](../imgs/enums.avif)

0 commit comments

Comments
 (0)