Skip to content

Commit d02f6ab

Browse files
committed
add quick start guide for template & scratch
1 parent 5169106 commit d02f6ab

File tree

1 file changed

+73
-1
lines changed

1 file changed

+73
-1
lines changed

docs/get-started/quickstart.md

Lines changed: 73 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,79 @@ keywords: [quickstart, getting started, dreamflow tutorial, ai app generation, f
1111

1212
# Quickstart
1313

14-
## Start With a Prompt (4 mins)
14+
15+
## Start from Scratch
16+
17+
Starting a new Flutter project in Dreamflow is simple and flexible. When you create a project from scratch, you'll begin with Flutter's classic counter app template. From there, you have multiple ways to build out your application:
18+
19+
- Use the **[AI Agent](../workspace/agent-panel.md)** to add features through natural language conversations.
20+
- Visually construct your UI with the **[Properties Editor](../workspace/properties-panel.md)** and drag-and-drop tools.
21+
- Write and edit code directly in the integrated **[Code Editor](../workspace/content-panel.md#code-editor)**.
22+
- Combine these approaches seamlessly as your project grows.
23+
24+
This flexibility allows you to work in whatever way best suits your development style and project needs.
25+
26+
<div style={{
27+
position: 'relative',
28+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
29+
height: 0,
30+
width: '100%'
31+
}}>
32+
<iframe
33+
src="https://demo.arcade.software/81iL80OjQC1gthaDKvPG?embed&show_copy_link=true"
34+
title="Projects - FlutterFlow"
35+
style={{
36+
position: 'absolute',
37+
top: 0,
38+
left: 0,
39+
width: '100%',
40+
height: '100%',
41+
colorScheme: 'light'
42+
}}
43+
frameBorder="0"
44+
loading="lazy"
45+
webkitAllowFullScreen
46+
mozAllowFullScreen
47+
allowFullScreen
48+
allow="clipboard-write">
49+
</iframe>
50+
</div>
51+
52+
## Start from a Template
53+
54+
Dreamflow also provides a collection of professionally designed, production-ready templates to jumpstart your app development. Our templates are fully customizable to match your brand and requirements while being designed to work seamlessly across mobile, tablet, and web platforms.
55+
56+
Simply choose a template that matches your needs and customize it to create your unique application.
57+
58+
<div style={{
59+
position: 'relative',
60+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
61+
height: 0,
62+
width: '100%'
63+
}}>
64+
<iframe
65+
src="https://demo.arcade.software/VUOZqYhw1r4Ea4jBQyJq?embed&show_copy_link=true"
66+
title="Projects - FlutterFlow"
67+
style={{
68+
position: 'absolute',
69+
top: 0,
70+
left: 0,
71+
width: '100%',
72+
height: '100%',
73+
colorScheme: 'light'
74+
}}
75+
frameBorder="0"
76+
loading="lazy"
77+
webkitAllowFullScreen
78+
mozAllowFullScreen
79+
allowFullScreen
80+
allow="clipboard-write">
81+
</iframe>
82+
</div>
83+
84+
85+
86+
## Start With a Prompt
1587

1688
Dreamflow's AI-powered app generation allows you to create fully functional, production-ready applications from simple text or image descriptions. Simply describe what you want to build, and Dreamflow Agent will generate the entire app structure, UI components, and functionality for you.
1789

0 commit comments

Comments
 (0)