Skip to content

Commit 8ba54b1

Browse files
pinkeshmarspinkeshmars
committed
Added AI tools info
1 parent 2487190 commit 8ba54b1

File tree

2 files changed

+119
-2
lines changed

2 files changed

+119
-2
lines changed

‎docs/intro/ff-ui/imgs/toolbar.avif

100 KB
Binary file not shown.

‎docs/intro/ff-ui/toolbar.md

Lines changed: 119 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ keywords: [Toolbar, FlutterFlow, UI, Tools, Project Management]
1111

1212
The Toolbar, located at the top of the app builder, provides easy access to numerous tools and features. It includes options for project configuration, saving your app version, accessing help, reporting or debugging issues, viewing project comments, downloading your app code, and running your app directly in FlutterFlow.
1313

14-
![toolbar](imgs/toolbar-new.avif)
14+
![toolbar](imgs/toolbar.avif)
1515

1616
## Project info
1717

18-
Hovering over this section reveals the essential information about your project. Here, you can easily check the project name, the current version of FlutterFlow that you're using, along with its release date. Additionally, it shows the Flutter version that your project is currently running on.
18+
Hovering over this section reveals the essential information about your project. Here, you can easily check the project name, branch name, environment name and the current version of FlutterFlow that you're using, along with its release date. Additionally, it shows the Flutter version that your project is currently running on.
1919

2020
## Help
2121

@@ -43,6 +43,123 @@ The Command Palette makes it easy to find and use things in the App Builder. Ope
4343

4444
![command-palette.avif](imgs/command-palette.avif)
4545

46+
## AI Tools
47+
FlutterFlow AI Tools is a powerful set of features designed to speed up app development by leveraging artificial intelligence. These tools allow you to quickly generate app elements such as pages, components, and even entire page layouts with relevant widgets automatically populated.
48+
49+
- **New Page Creation:** Instantly create complete app pages with the necessary layout and widgets. This can be particularly useful when you're unsure where to start.
50+
51+
<div style={{
52+
position: 'relative',
53+
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
54+
height: 0,
55+
width: '100%'}}>
56+
<iframe
57+
src="https://demo.arcade.software/jAH6Ar0X8fTIk3PTRNej?embed&show_copy_link=true"
58+
title=""
59+
style={{
60+
position: 'absolute',
61+
top: 0,
62+
left: 0,
63+
width: '100%',
64+
height: '100%',
65+
colorScheme: 'light'
66+
}}
67+
frameborder="0"
68+
loading="lazy"
69+
webkitAllowFullScreen
70+
mozAllowFullScreen
71+
allowFullScreen
72+
allow="clipboard-write">
73+
</iframe>
74+
</div>
75+
<p></p>
76+
77+
- **New Component Creation:** Build reusable components quickly using AI.
78+
79+
<div style={{
80+
position: 'relative',
81+
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
82+
height: 0,
83+
width: '100%'}}>
84+
<iframe
85+
src="https://demo.arcade.software/qTqZVHv7EOjw0Gcfp697?embed&show_copy_link=true"
86+
title=""
87+
style={{
88+
position: 'absolute',
89+
top: 0,
90+
left: 0,
91+
width: '100%',
92+
height: '100%',
93+
colorScheme: 'light'
94+
}}
95+
frameborder="0"
96+
loading="lazy"
97+
webkitAllowFullScreen
98+
mozAllowFullScreen
99+
allowFullScreen
100+
allow="clipboard-write">
101+
</iframe>
102+
</div>
103+
<p></p>
104+
105+
- **Sketch To Component:** Simply sketch out your desired layout, and FlutterFlow AI will turn your sketch into actual Components.
106+
107+
108+
<div style={{
109+
position: 'relative',
110+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
111+
height: 0,
112+
width: '100%'}}>
113+
<iframe
114+
src="https://demo.arcade.software/llUMoLjlVutwhBfi5rxH?embed&show_copy_link=true"
115+
title=""
116+
style={{
117+
position: 'absolute',
118+
top: 0,
119+
left: 0,
120+
width: '100%',
121+
height: '100%',
122+
colorScheme: 'light'
123+
}}
124+
frameborder="0"
125+
loading="lazy"
126+
webkitAllowFullScreen
127+
mozAllowFullScreen
128+
allowFullScreen
129+
allow="clipboard-write">
130+
</iframe>
131+
</div>
132+
<p></p>
133+
134+
- **Page Autocomplete:** This intelligently adds relevant widgets to a page based on the pages’s context, making it easy to complete partially built pages.
135+
136+
137+
<div style={{
138+
position: 'relative',
139+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
140+
height: 0,
141+
width: '100%'}}>
142+
<iframe
143+
src="https://demo.arcade.software/nI1ECv9gcuY4iurJaWJC?embed&show_copy_link=true"
144+
title=""
145+
style={{
146+
position: 'absolute',
147+
top: 0,
148+
left: 0,
149+
width: '100%',
150+
height: '100%',
151+
colorScheme: 'light'
152+
}}
153+
frameborder="0"
154+
loading="lazy"
155+
webkitAllowFullScreen
156+
mozAllowFullScreen
157+
allowFullScreen
158+
allow="clipboard-write">
159+
</iframe>
160+
</div>
161+
<p></p>
162+
46163
## Canvas size
47164

48165
We allow you to visualize and design your app for various mobile, tablet, and desktop devices. The [canvas](../ff-ui/canvas.md) size is defined as width (in pixels) x height (in pixels). This size is determined according to the device selected. To set a custom canvas size, click on the Canvas Size and enter the width and height (in pixels) you want.

0 commit comments

Comments
 (0)