You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/intro/build-your-first-app.md
+5-4Lines changed: 5 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,8 @@ It’s very straightforward yet introduces you to some fundamental concepts in a
18
18
> - Handle app behavior in response to user interactions (manage state).
19
19
> - Running your app
20
20
21
-
#### The steps to build the app are as follows:
21
+
<br/>
22
+
The steps to build the app are as follows:
22
23
23
24
1.[Clone or create project](#clone-project)
24
25
2.[Building UI](#build-ui)
@@ -43,7 +44,7 @@ In this section, we will see how to build the user interface (UI) for this featu
43
44
To build the UI:
44
45
45
46
1. We'll begin by adding a [Container](#) widget. This will serve as the parent widget for our buttons and labels.
46
-
2. Within the Container, add the [Row](https://www.notion.so/Build-your-first-app-20528f5391f94848aee85e01f2959cd1?pvs=21) > [Text](https://www.notion.so/Build-your-first-app-20528f5391f94848aee85e01f2959cd1?pvs=21) widget to display the ‘Quantity’ label. The Row widget is used to arrange its children (in this case, the Text widget) in a horizontal row.
47
+
2. Within the Container, add the [Row](#) > [Text](#) widget to display the ‘Quantity’ label. The Row widget is used to arrange its children (in this case, the Text widget) in a horizontal row.
47
48
3. Next, add another Row widget containing two [IconButtons](#). Users will interact with these to increase or decrease the product quantity. Also, include a Text widget to display the updated quantity.
48
49
1. Adjust the padding of the widgets to create a spacious and balanced layout.
49
50
2. Change the icon of the decrease button to a minus symbol.
@@ -70,7 +71,7 @@ To customize the style:
70
71
71
72
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.
72
73
73
-
We can achieve this behavior by adding the state variables. A state variable that represents a piece of data that can change over time. For this specific use case, Let’s add a [page state variable](https://www.notion.so/Build-your-first-app-20528f5391f94848aee85e01f2959cd1?pvs=21) that will hold the current quantity value. When a user interacts with the buttons, we update this variable, which in turn updates the UI.
74
+
We can achieve this behavior by adding the state variables. A state variable represents a piece of 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.
74
75
75
76
Here's how to add and use state variables:
76
77
@@ -83,7 +84,7 @@ Here's how to add and use state variables:
83
84
84
85
## 5. Run the App {#run-app}
85
86
86
-
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](https://www.notion.so/Build-your-first-app-20528f5391f94848aee85e01f2959cd1?pvs=21) mode. The Run mode typically requires around 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](https://docs.flutter.dev/development/tools/hot-reload)" feature.
87
+
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 typically requires around 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.
0 commit comments