Skip to content

Commit 1a07b40

Browse files
PoojaB26PoojaB26
authored
Merge pull request #7 from FlutterFlow/pooja/welcome
Welcome & Quickstart
2 parents 3319629 + a2119bb commit 1a07b40

File tree

8 files changed

+244
-182
lines changed

8 files changed

+244
-182
lines changed

‎.firebaserc‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
{
22
"projects": {
3-
"default": "flutterflow-docs-82026"
4-
}
3+
"default": "dreamflow-docs-2c50c",
4+
"prod": "dreamflow-docs-2c50c",
5+
"dreamflow-docs": "dreamflow-docs-2c50c"
6+
},
7+
"targets": {},
8+
"etags": {}
59
}

‎docs/get-started/quickstart.md‎

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,89 @@
1+
---
2+
slug: /quickstart
3+
title: Quickstart
4+
description: Get started with Dreamflow by building your first app in just 4 minutes using AI-powered prompts and natural language descriptions.
5+
tags: [quickstart, getting started, tutorial, ai, flutter, mobile app development]
6+
sidebar_position: 1
7+
keywords: [quickstart, getting started, dreamflow tutorial, ai app generation, flutter development, mobile app creation, natural language prompts]
8+
---
19

210

311

412
# Quickstart
513

6-
## 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
787

888
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.
989

‎docs/get-started/welcome.md‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎docs/index.md‎

Lines changed: 91 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,121 @@
11
---
2-
title: Getting Started
3-
custom_edit_url: null
4-
showLastUpdateTime: false
5-
hide_title: true
62
slug: /
7-
hide_table_of_contents: false
3+
title: Welcome to Dreamflow
4+
description: Discover Dreamflow, the AI-first platform for building mobile apps with Flutter. Learn about key features, how it works, and get started with your first app.
5+
tags: [welcome, introduction, overview, dreamflow, flutter, mobile app development, ai]
6+
sidebar_position: 0
7+
keywords: [dreamflow welcome, flutter development platform, ai mobile app development, visual development environment, flutter builder, mobile app creation]
88
---
99

10-
import InfoCard from '@site/src/components/InfoCard';
11-
import InfoCards from '@site/src/components/InfoCards';
12-
import FlutterFlowDocsLogo from '@site/src/components/FlutterFlowDocsLogo';
13-
import FlutterFlowLogo from '@site/src/components/FlutterFlowLogo';
14-
import GearIcon from '@site/static/icons/_icon_Setting.png';
15-
import DocsIcon from '@site/static/icons/document.png';
16-
import DeviceIcon from '@site/static/icons/deviceMobile.png';
17-
import CheckIcon from '@site/static/icons/check_errors.png';
18-
import UsersIcon from '@site/static/icons/users.png';
19-
import BranchIcon from '@site/static/icons/branch_New.png';
2010

11+
# Welcome to Dreamflow
2112

13+
**The Fastest Way to Build Mobile Apps**
2214

15+
Dreamflow is an AI-first platform that combines code, visual, and agentic app development for Flutter—no install, no lock-in, production-ready workflows. Transform your ideas into production-ready mobile apps in minutes using natural language prompts and our integrated development environment.
2316

24-
# Getting Started with Dreamflow
25-
Dreamflow is a visual development environment that lets you build mobile, web, and desktop apps incredibly fast, without sacrificing on app quality or features.
17+
### Product Tour
2618

19+
<div style={{
20+
position: 'relative',
21+
paddingBottom: '56.25%', // 16:9 aspect ratio
22+
height: 0,
23+
width: '100%',
24+
marginBottom: '2rem'
25+
}}>
26+
<iframe
27+
src="https://www.youtube.com/embed/aT8Ta0-h_Ak"
28+
title="Dreamflow Platform Demo"
29+
style={{
30+
position: 'absolute',
31+
top: 0,
32+
left: 0,
33+
width: '100%',
34+
height: '100%'
35+
}}
36+
frameBorder="0"
37+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
38+
allowFullScreen>
39+
</iframe>
40+
</div>
2741

2842

29-
<InfoCards>
30-
<InfoCard
31-
icon="🚀"
32-
title="Build Your First App"
33-
description="Get started with Dreamflow by building your first Dreamflow app step-by-step."
34-
pagePath="/quickstart"
35-
isLarge={true}
36-
/>
37-
<InfoCard
38-
icon="🗺️"
39-
title="App Development Roadmap"
40-
description="Learn the three essential layers of app development: UI Layer, Logic Layer, and Data Layer for building Dreamflow applications."
41-
pagePath="/roadmap"
42-
isLarge={true}
43-
/>
44-
45-
</InfoCards>
46-
47-
<p></p>
48-
4943

50-
<p></p>
44+
## Key Features
5145

52-
### Dreamflow Tour
46+
- **[AI Agent](workspace/agent-panel.md)**: Prompt small edits or large refactors with natural language commands. The AI agent can scaffold entire screens, implement complex flows, and generate comprehensive tests, making development faster and more intuitive than traditional coding approaches.
5347

54-
<InfoCards>
48+
- **[Realtime Preview](workspace/content-panel.md#app-preview)**: See your changes instantly with a live run session that compiles and previews your app in real-time. Inspect logs, monitor state changes, and debug issues as they happen, providing immediate feedback for faster iteration and development.
5549

56-
<InfoCard
57-
icon="🏗️"
58-
title="Dreamflow Builder"
59-
description="Explore the Dreamflow Builder interface, learn about the dashboard, widgets panel, and how to navigate the visual development environment."
60-
pagePath="/flutterflow-ui/dashboard"
61-
isLarge={true}
62-
/>
6350

64-
<InfoCard
65-
icon="🔍"
66-
title="Building Blocks"
67-
description="Dive into the building blocks of the platform: projects, widgets, functions and more."
68-
pagePath="/resources"
69-
isLarge = {true}
70-
/>
51+
- **[Visual Widget Tree](workspace/modules-panel/widget-panel.md)**: Add, remove, move, wrap, collapse, and expand UI components with intuitive visual controls. Restructure your entire widget hierarchy instantly through drag-and-drop interactions, making UI development more visual and accessible.
7152

53+
- **[Properties Editor](workspace/properties-panel.md)**: Type-safe controls for every widget property with intelligent suggestions and validation. Use expressions, formulas, or simply ask the AI for assistance when configuring complex widget behaviors and styling.
7254

73-
</InfoCards>
55+
- **Deploy**: Push your applications to the web or app stores with streamlined one-click deployment. Support for multiple platforms including Web, iOS, Android, macOS, Windows, and Linux ensures your app reaches users everywhere.
7456

75-
<p></p>
57+
- **Hot Reload**: See changes instantly as you develop with Flutter's hot reload technology, enabling rapid iteration and real-time feedback during the development process.
7658

77-
<div class="video-container"><iframe src="https://www.youtube.com/embed/GpXjU-ieAKU?si=moIEUUGry24CdSJN" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
59+
- **Debug Console**: Monitor app logs and performance in real-time with integrated debugging tools that help you identify and resolve issues quickly.
7860

7961

62+
- **Multi-Platform Support**: Build applications that run seamlessly across mobile (iOS and Android), web (responsive), and desktop (macOS, Windows, Linux) platforms from a single codebase.
8063

64+
## How It Works
8165

66+
Dreamflow follows a simple 3-step workflow: **Start → Build → Run & Ship**
8267

68+
### 1. Start
69+
Kick off from a natural-language prompt, a blank Flutter project, or import an existing repo (coming soon).
8370

84-
### Best Practices
71+
### 2. Build
72+
Jump between multiple development modes to build your app efficiently:
8573

86-
Essential guidelines and recommendations for building robust Dreamflow applications. Discover security best practices and performance optimization techniques to ensure your apps are production-ready, scalable, and maintainable.
74+
- Use the **Code** editor for direct Flutter development.
75+
- Navigate the **Visual widget tree** for drag-and-drop UI building.
76+
- Configure components in the **Properties editor** with type-safe controls.
77+
- Leverage the **AI agent** to scaffold features and refactor code through natural language.
8778

88-
<InfoCards>
89-
<InfoCard
90-
icon="🔐"
91-
title="Secure your API Key"
92-
description="Learn best practices for keeping your API keys created in Google Cloud Console safe and secure in production applications."
93-
pagePath="/best-practices/secure-api-keys"
94-
isLarge={true}
95-
/>
96-
<InfoCard
97-
icon="🧪"
98-
title="Test Your Apps Locally"
99-
description="Set up Local Run to debug and validate your app in physical devices."
100-
pagePath="/testing/local-run"
101-
/>
102-
<InfoCard
103-
icon="📝"
104-
title="Naming Variables"
105-
description="Learn Dreamflow naming conventions and best practices for variables, functions, and components to maintain clean, readable code."
106-
pagePath="/resources/style-guide"
107-
/>
108-
</InfoCards>
79+
Built-in Firebase and Supabase integrations provide authentication, database, and storage capabilities without complex setup. The integrated **Language Server Protocol (LSP)** delivers intelligent code completions, quick fixes, and real-time diagnostics as you type.
80+
81+
<div style={{
82+
position: 'relative',
83+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
84+
height: 0,
85+
width: '100%'
86+
}}>
87+
<iframe
88+
src="https://demo.arcade.software/pkh6dsSwozFhyAZUW9IU?embed&show_copy_link=true"
89+
title="Dreamflow App Creation Demo"
90+
style={{
91+
position: 'absolute',
92+
top: 0,
93+
left: 0,
94+
width: '100%',
95+
height: '100%',
96+
colorScheme: 'light'
97+
}}
98+
frameBorder="0"
99+
loading="lazy"
100+
webkitAllowFullScreen
101+
mozAllowFullScreen
102+
allowFullScreen
103+
allow="clipboard-write">
104+
</iframe>
105+
</div>
106+
107+
### 3. Run & Ship
108+
A managed run session compiles and previews your app in real time. Connect Firebase/Supabase, test flows, and deploy to web or the app stores when ready.
109+
110+
111+
112+
## Ready to Start Building?
113+
114+
Whether you're a seasoned developer looking to accelerate your workflow or a newcomer wanting to bring your app ideas to life, Dreamflow provides the tools and AI assistance you need to succeed.
115+
116+
**Next Steps:**
117+
1. **[Quickstart Guide](get-started/quickstart.md)**: Build your first app from scratch, from a template or describe your app idea and let AI generate an app for you.
118+
2. **[Workspace Tour](workspace/workspace.md)**: Learn about the development environment.
119+
3. **[Deployment Guide](test-and-publish/publish/web-deployment.md)**: Publish your app to the world.
109120

110-
### Scaling Dreamflow Apps
111-
112-
Learn advanced techniques and strategies to scale your Dreamflow applications from simple prototypes to enterprise-grade solutions with native integrations and modular architecture.
113121

114-
<InfoCards>
115-
<InfoCard
116-
icon="🔌"
117-
title="Integrating Native Plugins in Dreamflow"
118-
description="Extend Dreamflow's capabilities by integrating native platform plugins and custom functionality using method channels for advanced app development."
119-
pagePath="/concepts/advanced/method-channels"
120-
isLarge={true}
121-
/>
122-
<InfoCard
123-
icon="🏗️"
124-
title="Building Super Apps using Libraries"
125-
description="Discover how to create scalable, modular applications using Dreamflow libraries to build complex, maintainable super apps with independent feature libraries."
126-
pagePath="https://blog.flutterflow.io/scaling-super-apps-modular-architecture-with-flutterflow-libraries/"
127-
/>
128-
129-
</InfoCards>
130-
131-
### Additional Tools
132-
133-
Discover additional tools and references to enhance your Dreamflow development experience:
134-
<InfoCards>
135-
<InfoCard
136-
icon="⚙️"
137-
title="System Requirements"
138-
description="Ensure you meet system requirements required to smoothly run Dreamflow application on the web & desktop."
139-
pagePath="/before-you-begin/setup-flutterflow"
140-
/>
141-
<InfoCard
142-
icon="🆕"
143-
title="What's New in Dreamflow"
144-
description="Follow latest updates, features, and the latest enhancements in Dreamflow."
145-
pagePath="https://community.flutterflow.io/c/whats-new-in-flutterflow"
146-
/>
147-
148-
</InfoCards>
149-
150-
## Still Have Problems?
151-
152-
<!-- If you're still experiencing issues or need additional help, here are some resources to get you back on track:
153-
154-
- **[Submit Bug Report](#)** - Report bugs or issues you've encountered
155-
- **[Community Forum](https://community.flutterflow.io)** - Ask questions and get help from the community
156-
- **[Reddit Community](https://www.reddit.com/r/FlutterFlow/)** - Join discussions on Reddit
157-
- **[Documentation Bug](https://github.com/FlutterFlow/flutterflow-documentation/issues)** - Report documentation issues
158-
- **[Contribute to Documentation](https://github.com/FlutterFlow/flutterflow-documentation?tab=readme-ov-file#how-to-contribute)** - Contribution guidelines for contributing to the FlutterFlow documentation site.
159-
- **[FlutterFlow Support](mailto:[email protected])** - Get direct support from the FlutterFlow support team. -->

0 commit comments

Comments
 (0)