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/ff-ui/builder.md
+21-2Lines changed: 21 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,17 +3,36 @@ slug: builder
3
3
title: App Builder
4
4
tags: []
5
5
description: Explore the App Builder in FlutterFlow, featuring a comprehensive interface with four main sections. Navigation Menu, Toolbar, Canvas, and Properties Panel.
6
+
sidebar_position: 0
6
7
---
7
8
8
9
# App Builder
9
10
10
11
On opening the project, you'll see the App Builder, which consists of four main sections: [Navigation Menu](#navigation-menu), [Toolbar](#toolbar), [Canvas](#canvas-area), and [Properties panel](#properties-panel).
11
12
12
-
13
+
13
14
14
15
## 1. Navigation Menu {#navigation-menu}
15
16
16
-
The [Navigation Menu](navigation-menu) provides access to the project's widget palette, widget tree, storyboard, and features like Firestore, API calls, asset uploads, app values, integrations, custom functions, theme settings, and more.
17
+
The Navigation Menu, located on the left side of the builder, allows you to switch between various FlutterFlow features. These include designing the UI, managing databases, setting up API, adjusting app settings, adding integrations, and more.
18
+
19
+
Here is a list of all the features accessible from the navigation menu:
20
+
21
+
1.**Dashboard**: Manage projects, access account info, and FlutterFlow resources.
22
+
2.**Widget Palette**: Access all widgets for your app.
23
+
3.**Page Selector**: Manage pages and components, create folders as needed.
24
+
4.**Widget Tree**: Get an overview of all widgets on a selected page.
25
+
5.**Storyboard**: Visualize app's design and navigation.
26
+
6.**Firestore**: Create collections and adjust Firestore-related settings.
27
+
7.**Data Types**: Create custom data types for your app.
28
+
8.**App Values**: Manage App State variables and Constants.
29
+
9.**API Calls**: Define API calls.
30
+
10.**Media Assets**: Upload assets for your app and team.
31
+
11.**Custom Functions**: Add custom functionalities, widgets, and actions.
32
+
12.**Cloud Functions**: Write and deploy cloud functions for Firebase.
Copy file name to clipboardExpand all lines: docs/intro/ff-ui/canvas.md
+24-19Lines changed: 24 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,14 +3,15 @@ slug: canvas
3
3
title: Canvas
4
4
tags: []
5
5
description: Dive into the versatile Canvas in FlutterFlow, where you can effortlessly design and preview your app’s interface.
6
+
sidebar_position: 2
6
7
---
7
8
8
9
# Canvas
9
-
The Canvas shows the mobile device screen where you can add widgets by dragging and dropping them. You can select, move, and position widgets anywhere on the Canvas.
10
+
The Canvas shows the screen of the device, which could be mobile, iPad, web, or desktop. It allows you to add widgets via drag-and-drop. You can select, move, and position widgets anywhere on the Canvas.
10
11
11
-
It allows zoom level adjustments and previews in light or dark mode. It also includes features for multi-language preview, adding AppBar and NavBar, simulating larger font visualization, and more.
12
+
It allows zoom level adjustments and previews in light or dark mode. It also includes features for multi-language preview, adding App Bar and Nav Bar, simulating larger font visualization, and more.
12
13
13
-
14
+
14
15
15
16
## 1. Preview Screen
16
17
@@ -28,18 +29,18 @@ There's a zoom in ( + ) and a zoom out ( - ) button to control the zoom level of
28
29
29
30
From here, you can [create a page using AI](#).
30
31
31
-
## 5. Add AppBar
32
+
## 5. Add App Bar
32
33
33
-
From here, you can add an [AppBar](#) to your page. Clicking this button opens a popup displaying different [AppBar styles](#) for you to choose from. Just select any AppBar style from the list and it will appear in the Preview Screen.
34
+
From here, you can add an [App Bar](#) to your page. Clicking this button opens a popup displaying different [App Bar styles](#) for you to choose from. Just select any App Bar style from the list and it will appear in the Preview Screen.
34
35
35
36
36
37
37
38
## 6. Multi-Language Preview
38
39
39
40
If you've enabled the multi-language feature for your project, you can use this to preview your app in different languages. Just select the language from the dropdown menu, and the text in your app will be translated accordingly.
40
41
41
-
:::info
42
-
This becomes really helpful in testing your app design with translated text without having you run your app.
42
+
:::tip
43
+
This feature is valuable for testing your app across multiple locales without needing to run your app.
43
44
:::
44
45
45
46
<div style={{
@@ -76,23 +77,27 @@ This toggle lets you switch between light and dark mode in your app, allowing yo
76
77
77
78
You can use this to show the device frame in the preview. This might come in handy if you want to visualize better or capture the user interface on a particular device.
78
79
79
-
## 9. Display Resize Handle Bars
80
+
## 9. Handle Bars
80
81
81
82
Enabling the Resize Handle Bars will show the handle bards at the right and bottom sides of the preview screen. This allows you to change the size of the preview screen to better test your app on a screen with a custom resolution and the overall responsiveness of your app.
82
83
83
-
## 10. Larger Font Visualization
84
+
84
85
85
-
This enables you to simulate how your app appears when users adjust text scale or accessibility settings on their devices. It's vital for developing an app that's visually appealing and also accessible, especially for those requiring larger text sizes.
86
+
## 10. Show or hide Keyboard
87
+
This option, when enabled, displays a virtual keyboard on the device preview screen. This is particularly useful for visualizing the user interface with the keyboard displayed.
86
88
87
-
## 11. Canvas Settings
89
+
## 11. Larger Font Visualization
88
90
89
-
### 11.1 Safe Area
91
+
This enables you to simulate how your app appears when users adjust text scale or accessibility settings on their devices. It's vital for developing an app that's visually appealing and also accessible, especially for those requiring larger text sizes.
90
92
91
-
When the safe area is enabled, it ensures that content isn't hidden behind physical features like camera notches, sensors, or rounded edges of the display. You can enable or disable it using the Safe Area switch.
93
+
## 12. Canvas Settings
94
+
95
+
### Safe Area
96
+
The Safe Area is a concept in mobile design that prevents content from being obscured by physical features of the device, such as camera notches, sensors, or rounded display edges. In this context, the FlutterFlow offers a Safe Area switch which allows you to enable or disable this feature as needed.
92
97
93
-
### 11.2 Resize Snapping
98
+
### Resize Snapping
94
99
95
-
When resizing a widget, you can snap its size to the specific pixel values or a percentage of the screen size. By default, it is set to 1 px. To change this, click here, ensure Resize Snapping is enabled, and enter the pixel or percentage value.
100
+
When resizing a widget, you can snap its size to the specific pixel values or a percentage of the screen size.
96
101
97
102
<div style={{
98
103
position: 'relative',
@@ -120,20 +125,20 @@ When resizing a widget, you can snap its size to the specific pixel values or a
120
125
</iframe>
121
126
</div>
122
127
123
-
### 11.3 Change canvas color
128
+
### Change canvas color
124
129
Changing the canvas color can be helpful when creating components, especially when you want to preview them against the background color of the page. For example, if you have a text component that is black or dark-colored, and the default background is also dark, changing the canvas color to a lighter shade can improve visibility and make the design process easier.
125
130
126
-
## 12. Add NavBar
131
+
## 13. Add Nav Bar
127
132
128
-
This button allows you to add the [NavBar](#) to your page. Clicking on this button opens the popup that allows you to enable NavBar for your project. Once the NavBar is enabled, you can customize it to match your design.
133
+
This button allows you to add the [Nav Bar](#) to your page. Clicking on this button opens the popup that allows you to enable Nav Bar for your project. Once the Nav Bar is enabled, you can customize it to match your design.
129
134
130
135
131
136
132
137
---
133
138
134
139
## Video guide
135
140
136
-
If you prefer watching a video tutorial, here's the one for you:
141
+
Watch this video if you prefer watching a video tutorial.
Copy file name to clipboardExpand all lines: docs/intro/ff-ui/resource-hierarchy.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,6 +3,7 @@ slug: resource-hierarchy
3
3
title: Resource Hierarchy Overview
4
4
tags: []
5
5
description: Explore the Resource Hierarchy Overview to understand the correlation between traditional Flutter app components and their equivalents in FlutterFlow.
Copy file name to clipboardExpand all lines: docs/intro/ff-ui/storyboard.md
+4-3Lines changed: 4 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,6 +3,7 @@ slug: storyboard
3
3
title: Storyboard
4
4
tags: []
5
5
description: Master the Storyboard view in FlutterFlow to visualize your app’s design and user navigation. The Storyboard allows you to see screens and interactions, ensuring a seamless user experience.
6
+
sidebar_position: 3
6
7
---
7
8
8
9
# Storyboard
@@ -11,7 +12,7 @@ The Storyboard view allows you to visualize the overall design and navigation of
11
12
12
13
:::info
13
14
14
-
Our *Beta* release of Storyboarding is optimized for projects with 30 or fewer pages.
15
+
This feature is currently in Beta. It is optimized for projects with 30 pages or less.
15
16
16
17
:::
17
18
@@ -31,7 +32,7 @@ We use the following elements inside the storyboard:
31
32
32
33
## Highlight routes on a page
33
34
34
-
With so many pages displayed on a storyboard, it may be difficult to identify which routes are coming and where they go from a specific page, especially when lines overlap each other. To highlight the incoming and outgoing routes on a specific page, simply click on the page, and the routes will be highlighted in blue.
35
+
With so many pages displayed on a Storyboard, it may be difficult to identify the route path from a specific page, especially when lines overlap each other. To highlight the pathways leading into and out of a specific page, just click on a page, and the routes will be highlighted in blue color.
0 commit comments