Skip to content

Commit 4de4373

Browse files
pinkeshmarspinkeshmars
committed
Add state divided into sub sections
1 parent cb4b1eb commit 4de4373

File tree

1 file changed

+142
-13
lines changed

1 file changed

+142
-13
lines changed

‎docs/intro/quickstart.md

Lines changed: 142 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,18 @@ Below is a preview of what your app will look like once completed:
1515
![flutterflow-quick-start-app-demo.avif](../../static/img/flutterflow-quick-start-app-demo.avif)
1616

1717
## **What you'll learn**
18-
> - Creating layouts (add widgets)
19-
> - Adding interactivity to UI elements
20-
> - Handle app behavior in response to user interactions (manage state).
21-
> - Running your app
18+
- Creating layouts (add widgets)
19+
- Adding interactivity to UI elements
20+
- Handle app behavior in response to user interactions (manage state).
21+
- Running your app
2222

2323
<br/>
2424
The steps to build the app are as follows:
2525

2626
1. [Clone or create project](#clone-project)
2727
2. [Building UI](#build-ui)
2828
3. [Customize style](#customize-style)
29-
4. [Add state](#add-state)
29+
4. [Manage state](#manage-state)
3030
5. [Run the app](#run-app)
3131

3232
## 1. Clone or create project {#clone-project}
@@ -45,10 +45,34 @@ In this section, we'll see how to build the user interface (UI) for this feature
4545

4646
To build the UI:
4747

48-
<iframe src="https://demo.arcade.software/5CNFKTzhvnHPrLyZNzgZ?embed&show_copy_link=true" title="Update product quantity" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" width="100%" height="500"></iframe>
48+
<div style={{
49+
position: 'relative',
50+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
51+
height: 0,
52+
width: '100%'
53+
}}>
54+
<iframe
55+
src="https://demo.arcade.software/5CNFKTzhvnHPrLyZNzgZ?embed&show_copy_link=true"
56+
title="Sharing a Project with a User"
57+
style={{
58+
position: 'absolute',
59+
top: 0,
60+
left: 0,
61+
width: '100%',
62+
height: '100%',
63+
colorScheme: 'light'
64+
}}
65+
frameborder="0"
66+
loading="lazy"
67+
webkitAllowFullScreen
68+
mozAllowFullScreen
69+
allowFullScreen
70+
allow="clipboard-write">
71+
</iframe>
72+
</div>
4973

5074
:::info
51-
You can learn more about creating layouts [here](#).
75+
You can learn more about creating layouts [here](#).
5276
:::
5377

5478
## 3. Customize Style {#customize-style}
@@ -57,24 +81,129 @@ The next step is to customize the style of UI elements. This includes changing t
5781

5882
To customize the style:
5983

60-
<iframe src="https://demo.arcade.software/MGpg8TSzMGBusCGyOk89?embed&show_copy_link=true" title="Update product quantity" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" width="100%" height="600"></iframe>
61-
62-
## 4. Add State {#add-state}
84+
<div style={{
85+
position: 'relative',
86+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
87+
height: 0,
88+
width: '100%'
89+
}}>
90+
<iframe
91+
src="https://demo.arcade.software/MGpg8TSzMGBusCGyOk89?embed&show_copy_link=true"
92+
title="Sharing a Project with a User"
93+
style={{
94+
position: 'absolute',
95+
top: 0,
96+
left: 0,
97+
width: '100%',
98+
height: '100%',
99+
colorScheme: 'light'
100+
}}
101+
frameborder="0"
102+
loading="lazy"
103+
webkitAllowFullScreen
104+
mozAllowFullScreen
105+
allowFullScreen
106+
allow="clipboard-write">
107+
</iframe>
108+
</div>
109+
110+
## 4. Manage State {#manage-state}
63111

64112
Once your UI is set up, it's time to make your app interactive by adding a state. This means setting up your app to respond to user interactions. For example, when a user clicks the button to increase the quantity, the number displayed on the label should increase accordingly.
65113

114+
### 4.1 Add state variable
115+
66116
We can achieve this behavior by adding state variables. A state variable stores data that can change over time. For this specific use case, let's add a [page state variable](#) that will hold the current quantity value. When a user interacts with the buttons, we update this variable, which in turn updates the UI.
67117

68118
Here's how to add and use state variables:
69119

70-
<iframe src="https://demo.arcade.software/UI92tJF6DX0lOVuidaSH?embed&show_copy_link=true" title="Update product quantity" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" width="100%" height="600"></iframe>
120+
<div style={{
121+
position: 'relative',
122+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
123+
height: 0,
124+
width: '100%'
125+
}}>
126+
<iframe
127+
src="https://demo.arcade.software/UI92tJF6DX0lOVuidaSH?embed&show_copy_link=true"
128+
title="Sharing a Project with a User"
129+
style={{
130+
position: 'absolute',
131+
top: 0,
132+
left: 0,
133+
width: '100%',
134+
height: '100%',
135+
colorScheme: 'light'
136+
}}
137+
frameborder="0"
138+
loading="lazy"
139+
webkitAllowFullScreen
140+
mozAllowFullScreen
141+
allowFullScreen
142+
allow="clipboard-write">
143+
</iframe>
144+
</div>
145+
146+
### 4.2 Update state variable
147+
148+
To update the state variable, we will need to add actions. Actions are essentially functions that are triggered by the user's interaction, in this case, by clicking either the "Increase" or "Decrease" buttons. You can add actions to your buttons via the [actions panel](#).
149+
150+
Here's how to add actions to your buttons and update the state variable:
151+
152+
<div style={{
153+
position: 'relative',
154+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
155+
height: 0,
156+
width: '100%'
157+
}}>
158+
<iframe
159+
src="https://demo.arcade.software/6UIpWtPzuhEmK3rdZ7QI?embed&show_copy_link=true"
160+
title="Sharing a Project with a User"
161+
style={{
162+
position: 'absolute',
163+
top: 0,
164+
left: 0,
165+
width: '100%',
166+
height: '100%',
167+
colorScheme: 'light'
168+
}}
169+
frameborder="0"
170+
loading="lazy"
171+
webkitAllowFullScreen
172+
mozAllowFullScreen
173+
allowFullScreen
174+
allow="clipboard-write">
175+
</iframe>
176+
</div>
71177

72178
## 5. Run the App {#run-app}
73179

74180
Now that you've built and customized your app, it's time to run it. FlutterFlow allows you to test a fully-functional version of your app in [Test](#) and [Run](#) mode. The Run mode requires 2-4 minutes (or more, depending on the size of your project). However, to see your changes immediately, you can run your app in a Test mode that uses Flutter's "[Hot Reload](#)" feature.
75181

76-
77-
<iframe src="https://demo.arcade.software/TxetiPgtHe50ZcLsHyFH?embed&show_copy_link=true" title="Update product quantity" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" width="100%" height="600"></iframe>
182+
<div style={{
183+
position: 'relative',
184+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
185+
height: 0,
186+
width: '100%'
187+
}}>
188+
<iframe
189+
src="https://demo.arcade.software/TxetiPgtHe50ZcLsHyFH?embed&show_copy_link=true"
190+
title="Sharing a Project with a User"
191+
style={{
192+
position: 'absolute',
193+
top: 0,
194+
left: 0,
195+
width: '100%',
196+
height: '100%',
197+
colorScheme: 'light'
198+
}}
199+
frameborder="0"
200+
loading="lazy"
201+
webkitAllowFullScreen
202+
mozAllowFullScreen
203+
allowFullScreen
204+
allow="clipboard-write">
205+
</iframe>
206+
</div>
78207

79208
Congratulations! You've built your first app with FlutterFlow.
80209

0 commit comments

Comments
 (0)