Merge branch 'main' of https://github.com/FlutterFlow/dreamflow-documentation into feature/supabase-integration

Author: pinkeshmars

.idea/modules.xml

@@ -0,0 +1,93 @@
+
+
+
+# Quickstart
+
+## Start With a Prompt (4 mins)
+
+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.
+
+Ready to create your app? Simply:
+
+1. Open Dreamflow and click the textbox that says "Start with a prompt..."
+2. Enter your app description and wait for the Agent to generate your complete app.
+3. Review and customize the generated project in the [workspace](#).
+
+
+The Agent will create all the necessary screens, components, and functionality based on your description, giving you a fully functional app that you can further customize and deploy.
+
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/pkh6dsSwozFhyAZUW9IU?embed&show_copy_link=true"
+        title="Projects - FlutterFlow"
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameBorder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+
+***Prompt used:** Build a sleek music streaming app like Spotify, with a dark theme, album art grids, a bottom navigation bar (Home, Search, Library) and a clean now-playing screen with controls and progress bar.*
+
+### Sample Prompts
+
+Here are some prompts that we've used recently while chatting with the agent.
+
+#### A habit tracker
+
+**Prompt**
+    
+    Build the main screen for a habit tracking app. Prepopulate with common habits, and then show the tasks for today on this main screen. Make the app look modern and whimsical.
+
+
+**Duration / Cost**: 161 seconds / 2.51 credits
+
+**Next steps**
+    - Let the user enter their own habits
+    - Give the user reminders for their habits, even when the app is not running.
+    - Allow the user to share their habit progress with others (through the share sheet of the mobile OS)
+
+
+#### Asteroids game
+
+**Prompt**
+
+Replace the main screen with an implementation of the classic game of Asteroids. Make this look and work the same as the original arcade game. Make sure that it has keyboard controls, mouse controls, and touch controls. Store the high-score locally.
+
+**Duration / Cost** : 183 seconds / 2.30 credits
+
+**Next steps**
+    - Give the game a start screen (with instructions)
+    - Give the game an end screen (with a leaderboard)
+    - Store a leaderboard of highscores on a server
+
+
+
+#### Chat app
+
+**Prompt**
+
+Build a small chat app (store the data locally for now) where users can chat with their friends. Make the app look modern and familiar, but also give it some unique twists.
+
+**Duration / Cost** : 313 seconds /  4.42 credits
+
+**Next steps**
+    - Make the chats clustered when folks are close to each other
+    - Store the chat data in a cloud database
+    - Show a notification when a message arrives when the app is not active

docs/get-started/quickstart.md

@@ -0,0 +1,40 @@
+
+
+# Welcome
+
+Dreamflow is ... 
+
+
+## Create Account
+
+
+create an account...
+
+
+## Build First Project 
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/5Lbea4PqYYhwyNItSuND?embed&show_copy_link=true"
+        title="Projects - FlutterFlow"
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameBorder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>

docs/get-started/welcome.md

@@ -74,7 +74,7 @@ Dreamflow is a visual development environment that lets you build mobile, web, a
 
 <p></p>
 
-<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>
+<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>
 
 
 
@@ -149,11 +149,11 @@ Discover additional tools and references to enhance your Dreamflow development e
 
 ## Still Have Problems?
 
-If you're still experiencing issues or need additional help, here are some resources to get you back on track:
+<!-- If you're still experiencing issues or need additional help, here are some resources to get you back on track:
 
 - **[Submit Bug Report](#)** - Report bugs or issues you've encountered
 - **[Community Forum](https://community.flutterflow.io)** - Ask questions and get help from the community
 - **[Reddit Community](https://www.reddit.com/r/FlutterFlow/)** - Join discussions on Reddit
 - **[Documentation Bug](https://github.com/FlutterFlow/flutterflow-documentation/issues)** - Report documentation issues
 - **[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. 
-- **[FlutterFlow Support](mailto:[email protected])** - Get direct support from the FlutterFlow support team.
+- **[FlutterFlow Support](mailto:[email protected])** - Get direct support from the FlutterFlow support team. -->

docs/index.md

@@ -41,7 +41,7 @@ To create a new app in the Google Play Store, start by opening the [Google Play
             height: '100%',
             colorScheme: 'light'
         }}
-        frameborder="0"
+        frameBorder="0"
         loading="lazy"
         webkitAllowFullScreen
         mozAllowFullScreen
@@ -88,7 +88,7 @@ To create the Service Account, you can follow the instructions from [here](http
             height: '100%',
             colorScheme: 'light'
         }}
-        frameborder="0"
+        frameBorder="0"
         loading="lazy"
         webkitAllowFullScreen
         mozAllowFullScreen
@@ -117,7 +117,7 @@ To create the Service Account, you can follow the instructions from [here](http
             height: '100%',
             colorScheme: 'light'
         }}
-        frameborder="0"
+        frameBorder="0"
         loading="lazy"
         webkitAllowFullScreen
         mozAllowFullScreen
@@ -133,6 +133,8 @@ To create the Service Account, you can follow the instructions from [here](http
     - "Release apps to testing tracks"
     - "Manage testing tracks and edit tester lists"
 
+    <p></p>
+
     <div style={{
         position: 'relative',
         paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
@@ -149,7 +151,7 @@ To create the Service Account, you can follow the instructions from [here](http
                 height: '100%',
                 colorScheme: 'light'
             }}
-            frameborder="0"
+            frameBorder="0"
             loading="lazy"
             webkitAllowFullScreen
             mozAllowFullScreen
@@ -171,7 +173,7 @@ For first-time deployment, you need to create an initial release manually in Goo
 
 ### 4.1 Downloading AAB file
 
-In DreamFlow, set the **Google Play Track** to **Internal**, enter the **Bundle ID** and **Version Code**, then click **Submit Build to Google Play**. Wait a few minutes and click **Check Deployment Status**.
+In Dreamflow, set the **Google Play Track** to **Internal**, enter the **Bundle ID** and **Version Code**, then click **Submit Build to Google Play**. Wait a few minutes and click **Check Deployment Status**.
 
 Once the build is complete, click **Download AAB File** button (in the **App Bundle** section). If the button is still disabled, wait a bit longer and try again.
 
@@ -197,7 +199,7 @@ Even if the build status appears as FAILURE, you can still download the AAB file
             height: '100%',
             colorScheme: 'light'
         }}
-        frameborder="0"
+        frameBorder="0"
         loading="lazy"
         webkitAllowFullScreen
         mozAllowFullScreen
@@ -227,7 +229,7 @@ In Google Play Console, create an **Internal Testing** track and upload the **.a
             height: '100%',
             colorScheme: 'light'
         }}
-        frameborder="0"
+        frameBorder="0"
         loading="lazy"
         webkitAllowFullScreen
         mozAllowFullScreen
@@ -238,7 +240,7 @@ In Google Play Console, create an **Internal Testing** track and upload the **.a
 <p></p>
 
 :::info
-After the internal testing track is set up, DreamFlow can handle all future deployments directly.
+After the internal testing track is set up, Dreamflow can handle all future deployments directly.
 :::
 
 ### 4.3 Deploy from Dreamflow
@@ -261,7 +263,7 @@ To deploy your app from Dreamflow, navigate to **Publish > Android**, set the **
             height: '100%',
             colorScheme: 'light'
         }}
-        frameborder="0"
+        frameBorder="0"
         loading="lazy"
         webkitAllowFullScreen
         mozAllowFullScreen
@@ -308,7 +310,7 @@ To promote your app to production, open your **Internal testing** track in Googl
             height: '100%',
             colorScheme: 'light'
         }}
-        frameborder="0"
+        frameBorder="0"
         loading="lazy"
         webkitAllowFullScreen
         mozAllowFullScreen

docs/test-and-publish/publish/google-playstore-deployment.md

@@ -0,0 +1,43 @@
+---
+slug: /deployment/web-deployment
+title: Web Deployment
+description: Learn how to deploy your apps to the Web using Dreamflow.
+tags: [Web, Deployment, Dreamflow]
+sidebar_position: 4
+toc_max_heading_level: 4
+keywords: [Deployment, Dreamflow, Web]
+---
+
+# Web Deployment
+
+Dreamflow makes it easy to take your app live on the web with minimal setup. You can quickly publish apps for testing, demos, or full production use, directly from your browser.
+
+Dreamflow offers two flexible options:
+
+- **One-Click Deployment:** Instantly publish your app to the web in just seconds, perfect for previews and prototypes.
+- **Custom Web Deployment:** Gain more control over the deployment process, with configuration options tailored for production-ready apps.
+
+## One-Click Deployment
+
+With **One-Click Deployment**, you can instantly publish your app to the web without any additional setup. Dreamflow automatically builds and hosts your project under a shareable Dreamflow URL.
+
+To deploy your app, navigate to **Publish > Web** and click **One-Click Deployment**. Dreamflow will automatically build and host your app at a unique subdomain (e.g., `https://<unique-id>.share.dreamflow.app`).
+
+![one-click-deployment.avif](imgs/one-click-deployment.avif)
+
+If you make changes to your project, click **Update Deployment** to publish the latest version. You can click **Unpublish** to remove the app from its live URL whenever you no longer want it accessible.
+
+![update-unpublish-deployment.avif](imgs/update-unpublish-deployment.avif)
+
+:::info[Key Benefits]
+
+- **Fastest way to go live:** No configuration or hosting setup needed. Everything happens directly in Dreamflow.
+- **Shareable link:** Easily share your app with teammates, testers, or clients.
+- **Quick iteration:** Update deployments as you make changes, ensuring your live app always reflects the latest build.
+- **Full control:** Unpublish when you’re ready to stop sharing or move to a custom deployment.
+
+:::
+
+## Custom Deployment
+
+(Coming soon)

docs/test-and-publish/publish/imgs/one-click-deployment.avif

@@ -30,7 +30,7 @@ For more detailed guidance, refer to the [**Android Flutter documentation**](ht
 
 ## iOS Setup
 
-For app testing on an iOS device or simulator, you need a Mac with Xcode. Follow [**these instructions**](https://docs.flutter.dev/get-started/install/macos/mobile-ios) to set up your Mac.
+For app testing on an iOS device or simulator, you need a Mac with Xcode installed. Follow [**these instructions**](https://docs.flutter.dev/get-started/install/macos/mobile-ios) to set up your Mac.
 
 To setup a physical iOS device, you must configure your **Apple Developer account** and set up **code signing** in Xcode. First, add your **Apple ID** by opening **Xcode > Preferences > Accounts**, clicking **"+"**, selecting **Apple ID**, and signing in.
 
@@ -62,8 +62,5 @@ Once downloaded, open the project in your preferred IDE and run your app on eith
     3. Click the green "Run" button (a right-facing triangle) located in the top toolbar. Choose the target device (emulator or physical device) where you want to run the app. Android Studio will build and run your app. You'll see the output in the "Run" panel at the bottom, and the app should launch in the selected emulator or device.
 
 :::info
-
-- If your device is not listed in the **Flutter Device Selection** dropdown, make sure you have properly completed the [**Android**](#android-setup) and [**iOS**](#ios-setup) setup.
-- If you encounter a version compatibility issue with Flutter, you can resolve it by upgrading to the latest version. Simply execute the `flutter upgrade` command in your terminal. To verify your current Flutter version, use the `flutter --version` command.
-
+If you encounter a version compatibility issue with Flutter, you can resolve it by upgrading to the latest version. Simply execute the `flutter upgrade` command in your terminal. To verify your current Flutter version, use the `flutter --version` command.
 :::