Skip to content

Commit 939a316

Browse files
PoojaB26PoojaB26
authored
Merge pull request #16 from FlutterFlow/pinkesh/quick-start-app
Quick start app (Build your first app)
2 parents 08728e8 + 4de4373 commit 939a316

File tree

8 files changed

+216
-5
lines changed

8 files changed

+216
-5
lines changed

‎docs/intro/quickstart.md

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
---
2+
slug: quickstart
3+
title: Quick Start Guide
4+
tags: []
5+
---
6+
7+
# **Quick Start Guide**
8+
9+
Welcome to the FlutterFlow Quickstart Guide! This guide is tailored for those eager to dive right into building their first FlutterFlow application. Here, you'll build a screen that lets users adjust the quantity of a product before adding it to their shopping cart.
10+
11+
This quickstart is designed to be straightforward and accessible, introducing you to basic FlutterFlow concepts quickly. For those seeking a deeper understanding of FlutterFlow's capabilities, we recommend reading through the FlutterFlow concepts pages.
12+
<!-- TO DO: add links to resource section later on -->
13+
14+
Below is a preview of what your app will look like once completed:
15+
![flutterflow-quick-start-app-demo.avif](../../static/img/flutterflow-quick-start-app-demo.avif)
16+
17+
## **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
22+
23+
<br/>
24+
The steps to build the app are as follows:
25+
26+
1. [Clone or create project](#clone-project)
27+
2. [Building UI](#build-ui)
28+
3. [Customize style](#customize-style)
29+
4. [Manage state](#manage-state)
30+
5. [Run the app](#run-app)
31+
32+
## 1. Clone or create project {#clone-project}
33+
34+
To kick off your project, the first step is to [create a new project](#). However, to make things easier, we've already created a starter app for you. Simply open [this link](https://app.flutterflow.io/project/f-f-quick-start-app-umu392), click the '**Clone**' button, and the project will be instantly added to your account.
35+
36+
<img src="../../static/img/clone-project.png" alt="clone-project.png" />
37+
38+
After cloning the project, you’ll see a page with product images and descriptions. You’ll add a feature that allows users to update the product quantity.
39+
40+
<img src="../../static/img/zero-to-final.png" alt="zero-to-final.png" />
41+
42+
## 2. Building UI {#build-ui}
43+
44+
In this section, we'll see how to build the user interface (UI) for this feature. This involves creating a layout and adding various widgets to our page.
45+
46+
To build the UI:
47+
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>
73+
74+
:::info
75+
You can learn more about creating layouts [here](#).
76+
:::
77+
78+
## 3. Customize Style {#customize-style}
79+
80+
The next step is to customize the style of UI elements. This includes changing the colors, fonts, and sizes of your buttons and labels. In FlutterFlow, you can do this via the [properties panel](#) which provides a range of options for customization.
81+
82+
To customize the style:
83+
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}
111+
112+
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.
113+
114+
### 4.1 Add state variable
115+
116+
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.
117+
118+
Here's how to add and use state variables:
119+
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>
177+
178+
## 5. Run the App {#run-app}
179+
180+
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.
181+
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>
207+
208+
Congratulations! You've built your first app with FlutterFlow.
209+
210+
## **Problems?**
211+
212+
If you're experiencing any issues with the app, ensure that you have followed the instructions correctly. For troubleshooting, refer to our [comprehensive guide](#) or seek assistance from the [Community Forum](https://flutterflow.bettermode.io/). If you're still encountering problems, don't hesitate to report the issue to our support team.

‎docs/troubleshooting/push-notifications.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ toc_max_heading_level: 5
99
Push notifications play a vital role in mobile apps, letting you connect with your audience and update them on key developments. But, there are instances when push notifications fail to deliver. In this guide, we'll explore some typical problems that hinder push notifications in FlutterFlow and offer detailed instructions on how to fix them.
1010

1111

12-
![Firebase Console](./push-notification-assets/push-notifications-ff.png)
12+
<img src="./push-notification-assets/push-notifications-ff.png" alt="Firebase Console" />
1313

1414
:::tip Using CodeMagic? [Skip ahead!](https://mdxjs.com/playground/)
1515

@@ -20,7 +20,7 @@ Push notifications play a vital role in mobile apps, letting you connect with yo
2020
#### 1. Ensure your subscription status hasn't changed.
2121
Head to the [Firebase Console](https://console.firebase.google.com/) and select Project Settings > Usage & Billing > Details & Settings.
2222

23-
![Firebase Console](./push-notification-assets/firebase-console.png)
23+
<img src="./push-notification-assets/firebase-console.png" alt="Firebase Console" />
2424

2525
If you see Spark listed, you will need to select Modify Plan and upgrade to a Blaze Plan.
2626

‎docusaurus.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const config: Config = {
130130
],
131131
},
132132
],
133-
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
133+
copyright: `Copyright © ${new Date().getFullYear()} FlutterFlow. Built with Docusaurus.`,
134134
},
135135
plugins: [
136136
[

‎sidebars.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const sidebars: SidebarsConfig = {
1010
label: 'Getting Started',
1111
collapsed: false,
1212
items: ['index', {type: 'category', label: "Before You Begin", items: [
13-
'intro/before-you-begin/setting-up-flutterflow', 'intro/before-you-begin/app-architecture'
13+
'intro/before-you-begin/setting-up-flutterflow', 'intro/before-you-begin/app-architecture','intro/quickstart'
1414
]}],
1515
}
1616
]

‎src/components/InfoCard/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import React from 'react';
32
import styles from './index.module.css';
43

‎static/img/clone-project.png

491 KB
Loading

‎static/img/flutterflow-quick-start-app-demo.avif

12.1 KB
Binary file not shown.

‎static/img/zero-to-final.png

164 KB
Loading

0 commit comments

Comments
 (0)