diff --git a/.idea/modules.xml b/.idea/modules.xml index 29e3e19..52bca43 100644 --- a/.idea/modules.xml +++ b/.idea/modules.xml @@ -2,7 +2,7 @@ - + \ No newline at end of file diff --git a/docs/get-started/quickstart.md b/docs/get-started/quickstart.md new file mode 100644 index 0000000..2906dc9 --- /dev/null +++ b/docs/get-started/quickstart.md @@ -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. + + +
+ +
+ +***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 diff --git a/docs/get-started/welcome.md b/docs/get-started/welcome.md new file mode 100644 index 0000000..9d800a3 --- /dev/null +++ b/docs/get-started/welcome.md @@ -0,0 +1,40 @@ + + +# Welcome + +Dreamflow is ... + + +## Create Account + + +create an account... + + +## Build First Project + +
+ +
diff --git a/docs/index.md b/docs/index.md index 8198f7c..eb79294 100644 --- a/docs/index.md +++ b/docs/index.md @@ -74,7 +74,7 @@ Dreamflow is a visual development environment that lets you build mobile, web, a

-
+
@@ -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: + \ No newline at end of file diff --git a/docs/test-and-publish/publish/google-playstore-deployment.md b/docs/test-and-publish/publish/google-playstore-deployment.md index 2701e01..54b3dfb 100644 --- a/docs/test-and-publish/publish/google-playstore-deployment.md +++ b/docs/test-and-publish/publish/google-playstore-deployment.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 @@ -151,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 @@ -199,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 @@ -229,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 @@ -263,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 @@ -310,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 diff --git a/docs/workspace/agent-panel.md b/docs/workspace/agent-panel.md new file mode 100644 index 0000000..0faad71 --- /dev/null +++ b/docs/workspace/agent-panel.md @@ -0,0 +1,226 @@ +--- +slug: /workspace/agent-panel +title: Agent Panel +description: Learn about Dreamflow's AI-powered Agent Panel that helps you build and modify Flutter apps through natural language conversations +tags: [agent, ai, development, flutter] +sidebar_position: 5 +keywords: [agent panel, ai assistant, flutter development, natural language, code generation, dreamflow interface, development environment] +--- + +# Agent Panel + +The Agent Panel is an AI-powered development assistant that helps you build and modify your Flutter app through natural language conversations. Simply describe what you want to create or change, and the AI will help you implement it. + +![Agent Panel](imgs/agent-panel.avif) + + +To access the agent chat, click on the Agent Panel button in the right sidebar to open the chat interface. Type your request in the message box at the bottom. For example: + +- *"Add a blue button that says 'Submit'"* +- *"Create a login form with email and password fields"* +- *"Make the text larger and change the color to red"* + + +
+ +
+

+ +## Agent Context + +The Agent Panel automatically understands your current project context, but you can provide additional information to help the AI give you more accurate and relevant assistance. + +The AI automatically has access to: +- Your current app's code and structure +- The widget you currently have selected +- Recent changes you've made +- Your project's dependencies and configuration + + + +### Image Attachments + +Use the Attach Image button in the message box to add screenshots or images to your conversation. This can help the AI understand: + +- Visual designs or mockups you want to implement +- Current state of your app for reference +- Specific UI elements you want to modify +- Before/after comparisons for changes + +### Screenshot Mode + +Instead of trying to describe your current app's appearance in words, you can instantly capture what the AI needs to see. This is much faster and more accurate than explaining complex layouts, colors, or visual relationships through text alone. + +You can capture screenshots via the [Preview tab](../workspace/content-panel.md#app-preview) from the Content Panel. Click the camera button (📷) in the bottom-right corner of the preview area. + + +
+ +
+

+ +### Add to Agent + +The "Add to Agent" feature enhances AI conversations by providing detailed context about specific widgets. When activated, it automatically: + +- Captures technical details including widget type, properties, and location +- Takes a screenshot of the selected widget +- Records the widget's position in the tree hierarchy +- Adds all this information to the AI's context + +This gives the AI agent comprehensive understanding of the components you're working with, enabling more accurate assistance. + + + +
+ +
+

+ +### Prompt Edit + +Prompt Edit is a quick editing feature that lets you make changes to specific widgets without opening the full Agent Panel. The dialog is designed for single-purpose edits, keeping you focused on the specific widget without distractions. + +To use the Prompt Edit feature, right-click on any widget in the Widget Tree Panel and select "Prompt Edit" from the context menu. + +
+ +
+

+ +You can also edit widgets directly from the Preview app using Prompt Edit: + +1. Enable Inspect Mode in the Preview panel. +2. Right-click on any widget you want to modify. +3. Select "Prompt Edit" from the context menu. +4. Enter your editing instructions in the prompt dialog. + +This provides a quick way to make targeted widget changes without leaving the Preview view. + +![Prompt Edit](imgs/prompt-edit-inspect.png) + +### App Logs + +The Agent Panel can automatically access your app's debug logs and console output to help diagnose issues and understand your app's behavior. This is particularly useful when debugging problems or explaining errors to the AI. + +When you ask the AI about errors, debugging, or app behavior, it can automatically retrieve recent log entries from your running Flutter app. It typically fetches the most recent 50-100 lines of logs (configurable) to get relevant context without overwhelming the conversation with too much information. + +The agent can access the following: +- Print statements from your Dart code +- Flutter framework messages and warnings +- Error messages and stack traces +- Hot reload notifications +- Build process output + +
+ +
+

+ + + diff --git a/docs/workspace/content-panel.md b/docs/workspace/content-panel.md new file mode 100644 index 0000000..f90ef0b --- /dev/null +++ b/docs/workspace/content-panel.md @@ -0,0 +1,123 @@ +--- +slug: /workspace/content-panel +title: Content Panel +description: Learn about Dreamflow's Content Panel that provides an integrated environment for code editing, app preview, and debugging with real-time updates +tags: [code-editor, preview, debug, development, flutter] +sidebar_position: 3 +keywords: [content panel, code editor, app preview, debug console, flutter development, dreamflow interface, development environment, monaco editor, hot reload] +--- + +# Content Panel + +The Content Panel is the central workspace area where you can view and edit your application code, preview your app, and access debugging information. It provides a comprehensive development environment with multiple views and tools to help you build and test your applications. + +![Content Panel](imgs/content-panel.webp) + + +The Content Panel consists of three main sections that work together to provide a complete development experience: + +- **Code Editor**: View and edit your Flutter app source code. +- **App Preview**: The application is running in real-time for you to test any logic or UI changes quickly. +- **Debug Console**: Monitor any debug or print information once you run the app. + +:::info[Editor Modes] + +The content panel integrates with three main editor modes accessible via the top toolbar: +- **Preview Mode**: Shows only the app preview with device frame styling. Ideal for focused visual development and testing. +- **Code Mode**: Displays only the Monaco code editor without preview. Perfect for intensive coding sessions. +- **Split Mode**: Shows both preview and code editor side-by-side with adjustable split ratio. +::: + +## Code Editor + +The Code Editor is located on the left side of the Content Panel and provides a powerful environment for writing and editing your Flutter code. + + + +:::tip +You can swap the positions of the preview and code editor by clicking on the icon at the top right of your Content Panel. +

+![Switch Positions](imgs/swap-positions.png) +::: + +The Code editor is built on **Monaco Editor** (the same editor that powers VS Code) and provides a full-featured coding experience. It includes syntax highlighting, auto-completion, and IntelliSense for Dart/Flutter development. The editor supports multi-file editing with tabs, real-time collaboration features, and integrates seamlessly with the platform's live preview system. It also includes advanced features like go-to-definition, find references, and code formatting that you'd expect from a professional IDE. + + + +## App Preview + +The App Preview panel is the central component of Dreamflow's environment, providing real-time preview of Flutter applications with advanced inspection and editing capabilities. + +The panel displays a real-time preview of your Flutter app running in **debug mode**, with instant updates as you make code changes. The preview runs in a WebView container and supports hot reload for immediate feedback during development. + +![Preview Panel](imgs/preview-panel.png) + + +### Inspect Mode +Inspect mode provides an interactive way to explore and modify your Flutter widgets visually. When enabled, hovering over widgets in the preview reveals their boundaries with colored overlays, making it easy to understand widget layout and hierarchy. This visual feedback helps developers quickly identify and understand the structure of their UI components. + +Selecting a widget with a click automatically synchronizes the [Widget Tree](modules-panel/widget-panel.md) and [Property Panel](properties-panel.md) to display detailed information about that widget, maintaining the highlight until another selection is made. This seamless integration between the preview and development panels streamlines the workflow for analyzing and modifying widgets. The context menu, accessed through right-click, offers powerful widget-specific actions including property editing, adding context to agent, code navigation, and other operations, enabling rapid iterations on your Flutter application's user interface. + +### Hot Reload and Hot Restart +Dreamflow provides integrated hot reload and hot restart capabilities that allow you to quickly test code changes without losing your development context. These essential Flutter development tools are accessible through dedicated buttons in the content panel toolbar. + +**Hot Reload (⚡)** applies your code changes instantly while preserving the current application state. This is ideal for UI modifications, styling updates, and minor code changes. The operation typically completes in under 250ms and maintains your app's navigation stack, variables, and user interactions. + +**Hot Restart (↶)** completely restarts your Flutter app with all code changes applied, resetting the application state. Use this for structural changes, when hot reload fails, or after fixing compilation errors. The system intelligently prevents restart attempts when compilation errors are detected. + + +### Additional Features + +- **Multi-Device Preview**: Choose from four preview modes to test your app across different form factors: + - Phone (iPhone 16 Pro Max - 390x844) + - Tablet (iPad Pro 13" - 834x1194) + - Desktop (1920x1080 landscape) + - Expanded (full-width preview without device frame) + +- **Interactive Zoom & Pan**: The preview supports zoom levels from 30% to 300% with smooth panning capabilities. Zoom preferences are automatically saved and restored between sessions. + +- **Theme Support**: Preview both light and dark themes for your Flutter app. + + + +## Debug Console + +The Debug Console is a dedicated output panel in Dreamflow that displays real-time logs and debug information from your Flutter application. This includes: + +- Print statements from your Dart code +- Flutter framework messages +- Hot reload notifications +- Build process output +- Error messages and stack traces + + + +
+ +
+

+ + + + diff --git a/docs/workspace/imgs/agent-panel.avif b/docs/workspace/imgs/agent-panel.avif new file mode 100644 index 0000000..e7699ba Binary files /dev/null and b/docs/workspace/imgs/agent-panel.avif differ diff --git a/docs/workspace/imgs/agent-panel.png b/docs/workspace/imgs/agent-panel.png new file mode 100644 index 0000000..86ff3d4 Binary files /dev/null and b/docs/workspace/imgs/agent-panel.png differ diff --git a/docs/workspace/imgs/content-panel.png b/docs/workspace/imgs/content-panel.png new file mode 100644 index 0000000..53fd7ae Binary files /dev/null and b/docs/workspace/imgs/content-panel.png differ diff --git a/docs/workspace/imgs/content-panel.webp b/docs/workspace/imgs/content-panel.webp new file mode 100644 index 0000000..8a595e7 Binary files /dev/null and b/docs/workspace/imgs/content-panel.webp differ diff --git a/docs/workspace/imgs/preview-panel.png b/docs/workspace/imgs/preview-panel.png new file mode 100644 index 0000000..09f134a Binary files /dev/null and b/docs/workspace/imgs/preview-panel.png differ diff --git a/docs/workspace/imgs/prompt-edit-inspect.png b/docs/workspace/imgs/prompt-edit-inspect.png new file mode 100644 index 0000000..ee4ab7d Binary files /dev/null and b/docs/workspace/imgs/prompt-edit-inspect.png differ diff --git a/docs/workspace/imgs/swap-positions.png b/docs/workspace/imgs/swap-positions.png new file mode 100644 index 0000000..b764bde Binary files /dev/null and b/docs/workspace/imgs/swap-positions.png differ diff --git a/docs/workspace/imgs/widget-tree-view-mode.png b/docs/workspace/imgs/widget-tree-view-mode.png new file mode 100644 index 0000000..b0e8131 Binary files /dev/null and b/docs/workspace/imgs/widget-tree-view-mode.png differ diff --git a/docs/workspace/imgs/widget-tree.png b/docs/workspace/imgs/widget-tree.png new file mode 100644 index 0000000..8d1ce93 Binary files /dev/null and b/docs/workspace/imgs/widget-tree.png differ diff --git a/docs/workspace/keyboard-shortcuts.md b/docs/workspace/keyboard-shortcuts.md new file mode 100644 index 0000000..fcd215e --- /dev/null +++ b/docs/workspace/keyboard-shortcuts.md @@ -0,0 +1,8 @@ +--- +slug: /workspace/keyboard-shortcuts +title: Keyboard Shortcuts +# description: +# tags: +sidebar_position: 6 +# keywords: +--- \ No newline at end of file diff --git a/docs/workspace/modules-panel/_category_.json b/docs/workspace/modules-panel/_category_.json new file mode 100644 index 0000000..53c4c51 --- /dev/null +++ b/docs/workspace/modules-panel/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Modules Panel", + "position": 1 + } \ No newline at end of file diff --git a/docs/workspace/modules-panel/modules-panel.md b/docs/workspace/modules-panel/modules-panel.md new file mode 100644 index 0000000..57f2bc7 --- /dev/null +++ b/docs/workspace/modules-panel/modules-panel.md @@ -0,0 +1,24 @@ +--- +title: Modules Panel +description: Learn about Dreamflow's Modules Panel that provides access to different functional areas including Widget Tree, Theme, Assets, Firebase and Supabase integration +tags: [modules, workspace, ui, development, flutter] +keywords: [modules panel, widget tree, theme, assets, firebase, supabase, flutter development, dreamflow interface, development environment] +--- + + +# Modules Panel + +The Modules Panel enabled from the left side of the builder interface, provides access to different functional modules for managing your Flutter project. + +## Available Modules + +- **[Widget Tree Module](../modules-panel/widget-panel.md)**: The default module that provides navigation and management of your app's widget hierarchy, allowing you to browse, select, and organize UI components. + +- **[Theme Module](../modules-panel/theme.md)**: Manages app theming and styling by providing tools to customize colors, fonts, typography, and design tokens across your application. + +- **Assets Module**: Handles project asset management by allowing you to upload images, organize files, and manage all project resources in one centralized location. + +- **Firebase Module**: Configures Firebase integration for backend services including authentication, database, storage, and other Firebase-powered features. + +- **Supabase Module**: Sets up Supabase backend integration for database management, authentication, and real-time subscriptions to power your app's backend functionality. + diff --git a/docs/workspace/modules-panel/theme.md b/docs/workspace/modules-panel/theme.md new file mode 100644 index 0000000..ec78cbf --- /dev/null +++ b/docs/workspace/modules-panel/theme.md @@ -0,0 +1,10 @@ +--- +slug: /workspace/theme +title: Theme +# description: +# tags: +sidebar_position: 2 +# keywords: +--- + +# Theme \ No newline at end of file diff --git a/docs/workspace/modules-panel/widget-panel.md b/docs/workspace/modules-panel/widget-panel.md new file mode 100644 index 0000000..910a3d4 --- /dev/null +++ b/docs/workspace/modules-panel/widget-panel.md @@ -0,0 +1,172 @@ +--- +slug: /workspace/widget-tree +title: Widget Tree +description: Learn about the Widget Tree panel in Dreamflow, a powerful hierarchical view that displays and helps you manage your Flutter app's widget structure +tags: [widgets, ui, widget-tree, flutter, dreamflow, components] +keywords: [widget tree, flutter widgets, ui components, widget hierarchy, widget management, widget structure, dreamflow interface, widget navigation, widget properties, widget selection] +sidebar_position: 1 + +--- + +# Widget Tree + +The Widget Tree panel is a powerful hierarchical view that displays the complete structure of your Flutter app's widget tree, providing comprehensive tools for navigation, inspection, and modification of your UI components. + +**Hierarchical Tree View**: Displays your app's widget structure as an expandable tree, showing the parent-child relationships between widgets. Each node represents a widget with its type, properties, and children clearly visible. + +**Real-Time Synchronization**: The tree automatically updates in real-time as you make changes to your code, reflecting the current state of your running Flutter app. + +**Widget Selection**: Click on any widget in the tree to select it, which automatically highlights the corresponding widget in the preview panel and updates the property panel with its details. + +## Nodes + +**Nodes** are individual widgets in your Flutter app's hierarchy, displayed as tree items in the Widget Tree panel. Each node represents a widget instance with its properties and relationships. + +**Root Nodes**: Top-level widgets that represent entire screens or components. +- **Page Nodes**: Main app screens +- **Component Nodes**: Reusable custom widgets used in your main screen. + +**Child Nodes**: Widgets that contain other widgets +- **Single Child**: Widgets with exactly one child (Container, Padding, Center) +- **Multiple Children**: Widgets with multiple children (Column, Row, Scaffold) + +**Leaf Nodes**: Terminal widgets with no children such as Text, Image, Icon, Button. + +The tree structure helps you understand your app's widget hierarchy and navigate between different UI components. + +![Widget Tree Panel](../imgs/widget-tree.png) + +*The Widget Tree panel displays a hierarchical view of the selected page/screen, showing the complete widget tree including the Scaffold structure and any custom widgets used within it.* + + +:::info[View Modes] + +**Consolidated View**: Hides structural widgets or Modifiers like `Expanded`, `Padding` to provide a cleaner, more focused view of your actual UI components. + +**Detailed View**: Shows every widget in the tree, including all structural and layout widgets, giving you complete visibility into the widget hierarchy. +

+![Widget Tree View Modes](../imgs/widget-tree-view-mode.png) + + +::: + + +## Widget Management + +Right-click on any widget to access a comprehensive context menu with options for: +- Adding new widgets +- Wrapping existing widgets +- Copying, cutting, and pasting widgets +- Taking screenshots for AI context +- Navigating to component definitions +- Removing widgets + +### Add Widget +Insert new widgets into your tree by selecting a parent widget and choosing from a categorized catalog of available widgets (Framework, Project, Dependencies). For structural widgets like Scaffold, you will see a list of property-specific widgets that can be added as children. + + +
+ +
+

+ + +Here’s a quick demo showing how you can add a widget to a Column: + +
+ +
+

+ +:::tip[Right-Click to Add Widget] +For quick access to widget options, right-click on any existing widget to open the context menu. This provides an alternative way to add new widgets to your layout. +::: + +### Wrap Widget +Wrap existing widgets with containers, padding, or other layout widgets to modify their behavior without changing their core functionality. + +
+ +
+

+ +### Clipboard Operations +The context menu provides standard clipboard operations (cut, copy, paste) that allow you to move and duplicate widgets across your layout tree. You can use either the context menu options or familiar keyboard shortcuts: + +- **Cut**: Ctrl/Cmd + X +- **Copy**: Ctrl/Cmd + C +- **Paste**: Ctrl/Cmd + V + +These operations enable efficient widget reuse and layout restructuring without having to recreate widgets from scratch. + +### Go to Code +The "Go to Code" and "Go to Component" features provide quick navigation from the widget tree to the underlying [code implementation](../content-panel.md#code-editor). You can access these features by hovering over a widget in the tree and right-clicking on the widget to use the context menu options. + +- **Go to Code**: Jumps to the Code Editor and highlights the code for the selected widget. +- **Go to Component**: For custom project widgets, opens the component file with the relevant widget code highlighted. + +This makes it easy to inspect and modify widget code directly from the visual layout editor. + diff --git a/docs/workspace/properties-panel.md b/docs/workspace/properties-panel.md new file mode 100644 index 0000000..ddc0141 --- /dev/null +++ b/docs/workspace/properties-panel.md @@ -0,0 +1,135 @@ +--- +slug: /workspace/properties-panel +title: Properties Panel +description: Learn about Dreamflow's Properties Panel that provides comprehensive property editing for Flutter widgets with specialized editors and real-time visual feedback +tags: [properties, widgets, ui, development, flutter] +sidebar_position: 4 +keywords: [properties panel, widget properties, property editing, flutter development, dreamflow interface, development environment, visual editing, property editors] +--- + +# Properties Panel + +The Properties Panel is a sophisticated interface for editing widget properties in real-time, providing both visual and code-based editing capabilities with intelligent property type detection and specialized editors. + +
+ +
+

+ + + +**Real-Time Property Editing**: The panel displays all properties of the currently selected widget and allows you to edit them with immediate visual feedback. Changes are applied instantly to your running app. + +**Intelligent Property Editors:** The system automatically detects property types and provides specialized editors: +- **Color Properties:** Color picker with hex input and visual color swatches +- **TextStyle Properties:** Rich text styling editor with font family, size, weight, and color options +- **Padding/Margin:** Visual padding editor with individual side controls +- **Border Radius:** Corner-specific radius controls with visual preview +- **Gradients:** Linear, radial, and sweep gradient editors with color stops +- **Borders:** Border style, width, and color controls +- **Images:** Asset and network image selectors +- **Icons:** Icon picker with search functionality +- **Alignment:** Visual alignment controls +- **Boolean Properties:** Toggle switches for true/false values +- **Enum Properties:** Dropdown menus for predefined options + + +This makes the Properties Panel a comprehensive tool for visual Flutter development, allowing you to modify any aspect of your UI without writing code manually. + +:::tip[Quick Access from Widget Tree] +The Properties Panel can be quickly accessed by clicking any widget in the Widget Tree. The panel will automatically update to show the properties of the selected widget. +::: + + + +### Advanced Functionalities + +- **Property Search:** Search functionality to quickly find specific properties within complex widgets. +- **Add Property Button:** Add new properties to widgets that don't have them configured yet. +- **Grouped Properties:** For supported widgets (Container, Text, TextField), properties are organized into logical groups like "Layout", "Styling", "Behavior" for easier navigation. +- **Syntax Highlighting:** For complex expressions and function properties, the panel provides syntax-highlighted code editors. +- **CopyWith Support:** Automatically handles Flutter's copyWith pattern for updating nested properties like TextStyle sub-properties. + + + +## Modifiers + + +Modifiers refer to wrapper widgets that can be added around existing Flutter widgets to modify their behavior, appearance, or layout. Think of them as "decorators" or "containers" that wrap around your base widgets. They are Flutter widgets that wrap around other widgets to modify their: +- **Layout behavior** (positioning, sizing, constraints) +- **Visual appearance** (colors, borders, shadows, opacity) +- **Interactive behavior** (gestures, focus, accessibility) +- **Animation properties** (transitions, transformations) + + + + +### Adding a Modifier + +1. Select any widget in the Widget Tree Panel that you want to wrap with a **Modifier** widget. + +2. In the Properties Panel, scroll down to the **Modifiers** section at the bottom. + +3. Click the **+** button next to "Modifiers" tab to open the Modifier selection menu. + +4. Choose from available wrapper widgets such as: + - **Container** - For padding, margin, decoration, and constraints + - **Padding** - For adding space around content + - **Center** - For centering content + - **Align** - For positioning content + - **SizedBox** - For setting specific dimensions + - **Transform** - For rotations, scaling, and translations & other such modifier widgets. + + +5. The Modifier widget will be added to your widget hierarchy and its properties will appear in the Modifiers tab section of the Properties panel, where you can edit them immediately. + + +
+ +
+

+ + + diff --git a/docs/workspace/workspace.md b/docs/workspace/workspace.md new file mode 100644 index 0000000..6f340ad --- /dev/null +++ b/docs/workspace/workspace.md @@ -0,0 +1,33 @@ +--- +slug: /workspace +title: Workspace +description: Learn about Dreamflow's integrated workspace panels that provide a complete Flutter development environment with specialized tools for building, testing and deploying applications +tags: [workspace, ui, development, flutter] +sidebar_position: 0 +keywords: [workspace, panels, modules panel, content panel, properties panel, agent panel, flutter development, dreamflow interface, development environment] +--- + +# Workspace + +The workspace is organized into several specialized panels that work together to provide a complete development experience. Each panel focuses on specific aspects of your project while maintaining seamless integration with the overall workflow. + +## Core Panels + +- **Top Bar**: Central command center for project navigation, panel management, and deployment. Provides access to project settings, undo/redo functionality, panel visibility controls, and deployment actions. + +- **[Modules Panel](modules-panel/widget-panel.md)**: Helps users access different functional areas of the platform. Includes Widget Tree (default navigation), Theme (styling), Assets (file management), Firebase (backend services), and Supabase (database integration). + +- **[Content Panel](../workspace/content-panel.md)**: Main workspace area that displays either the app preview or code editor depending on the selected mode. Features real-time app preview with device frame options, hot reload/restart controls, and integrated Monaco code editor with syntax highlighting. + +- **[Properties Panel](../workspace/properties-panel.md)**: Comprehensive property editing interface for selected widgets. Provides intelligent property editors for colors, text styles, padding, borders, gradients, and more, with real-time visual feedback and specialized controls for different Flutter property types. + +- **[Agent Panel](../workspace/agent-panel.md)**: AI-powered development assistant that helps you build and modify your Flutter app through natural language conversations. Features streaming conversations, context management, screenshot integration, and support for multiple AI models. + +- **Bottom Bar**: Provides essential project status and debugging tools: + - **Refresh Dependencies**: Runs `flutter pub get` to update project packages + - **Debug Console**: Toggle to view real-time app logs and debugging output + - **App Status**: Live indicator showing if your app is running, loading, has errors, or is stopped + - **Analysis Issues**: Quick overview of errors, warnings, and info messages in your code + + +This integrated workspace approach eliminates the need to switch between different tools and provides a cohesive environment for building, testing, and deploying Flutter applications. \ No newline at end of file diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 13bf349..610ca79 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -5,7 +5,7 @@ import type * as Preset from '@docusaurus/preset-classic'; const config: Config = { title: 'Dreamflow Documentation', tagline: 'Learn how to build mobile, web and desktop apps incredibly fast - without sacrificing on app quality or features', - url: 'https://docs.flutterflow.io', + url: 'https://docs.dreamflow.io', baseUrl: '/', onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'throw', @@ -14,7 +14,6 @@ const config: Config = { clientModules: [ require.resolve('./src/js/table-helpers.js'), - require.resolve('./src/js/chatbot.js'), ], i18n: { defaultLocale: 'en', @@ -65,15 +64,21 @@ const config: Config = { themeConfig: { // Replace with your project's social card image: 'img/social-card-docs.png', + colorMode: { + defaultMode: 'dark', + disableSwitch: false, + respectPrefersColorScheme: true, + }, navbar: { title: 'Dreamflow Docs', logo: { alt: 'Dreamflow Docs', - src: '/logos/logoMark_outlinePrimary_transparent.svg', + src: '/logos/dreamflow-icon-black.png', + srcDark: '/logos/dreamflow-icon-white.png', }, items: [ { - href: 'https://github.com/FlutterFlow/flutterflow-documentation', + href: 'https://github.com/FlutterFlow/dreamflow-documentation', label: 'GitHub', position: 'right', }, @@ -97,30 +102,26 @@ const config: Config = { title: 'Community', items: [ { - label: 'Community Forum', - href: 'https://community.flutterflow.io', + label: 'Reddit', + href: 'https://www.reddit.com/r/DreamFlow/', }, { label: 'Twitter', - href: 'https://twitter.com/flutterflow', + href: 'https://twitter.com/DreamflowApp', }, ], }, { title: 'More', items: [ - { - label: 'Blog', - to: 'https://blog.flutterflow.io', - }, { label: 'GitHub', - href: 'https://github.com/FlutterFlow/flutterflow-documentation', + href: 'https://github.com/FlutterFlow/dreamflow-documentation', }, ], }, ], - copyright: `Copyright © ${new Date().getFullYear()} Dreamflow. Built with Docusaurus.`, + copyright: `Copyright © ${new Date().getFullYear()} FlutterFlow. Built with Docusaurus.`, }, algolia: { diff --git a/firebase.json b/firebase.json index b1ab221..303504b 100644 --- a/firebase.json +++ b/firebase.json @@ -18,6 +18,7 @@ "destination": "/", "type": 301 } + ] } } \ No newline at end of file diff --git a/scripts/convertMarkdownLinks.js b/scripts/convertMarkdownLinks.js index ec30242..35778b4 100644 --- a/scripts/convertMarkdownLinks.js +++ b/scripts/convertMarkdownLinks.js @@ -11,11 +11,11 @@ async function convertMarkdownLinks() { let content = await fs.readFile(file, 'utf8'); content = content.replace(/!\[\]\((https:\/\/www\.youtube\.com\/watch\?v=([a-zA-Z0-9_-]+))\)/g, (_, url, id) => - `` + `` ); content = content.replace(/!\[\]\((https:\/\/www\.loom.com\/share\/([a-zA-Z0-9_-]+))\)/g, (_, url, id) => - `` + `` ); await fs.writeFile(file, content, 'utf8'); diff --git a/sidebars.ts b/sidebars.ts index eef7d46..4c321f0 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -8,6 +8,28 @@ const sidebars: SidebarsConfig = { id: 'index', label: 'Index', }, + { + type: 'category', + label: 'Getting Started', + collapsed: false, + items: [ + { + type: 'autogenerated', + dirName: 'get-started' + } + ], + }, + { + type: 'category', + label: 'Workspace', + collapsed: false, + items: [ + { + type: 'autogenerated', + dirName: 'workspace' + } + ], + }, { type: 'category', label: 'Test & Publish', @@ -20,6 +42,7 @@ const sidebars: SidebarsConfig = { ], }, ] + }; export default sidebars; diff --git a/src/components/FlutterFlowDocsLogo/index.tsx b/src/components/FlutterFlowDocsLogo/index.tsx index 417d933..5085123 100644 --- a/src/components/FlutterFlowDocsLogo/index.tsx +++ b/src/components/FlutterFlowDocsLogo/index.tsx @@ -3,7 +3,7 @@ import styles from './index.module.css'; const FlutterFlowDocsLogo = () => { const title = "Dreamflow Docs"; - const logoSrc = "/logos/logoMark_outlinePrimary_transparent.svg"; // Path relative to the static directory + const logoSrc = "/logos/favicon.png"; // Path relative to the static directory return (
diff --git a/src/components/FlutterFlowLogo/index.tsx b/src/components/FlutterFlowLogo/index.tsx index 12a43a5..de0ece8 100644 --- a/src/components/FlutterFlowLogo/index.tsx +++ b/src/components/FlutterFlowLogo/index.tsx @@ -4,8 +4,8 @@ import styles from './index.module.css'; const FlutterFlowLogo = () => { - const logoSrcDark = "/logos/logo_primary_color@2x.png"; // Light mode logo - const logoSrcLight = "/logos/logo_primary_color_onLight@2x.png"; // Dark mode logo + const logoSrcDark = "/logos/DreamFlow-Logo-Black.png"; // Light mode logo + const logoSrcLight = "/logos/DreamFlow-Logo.png"; // Dark mode logo const { colorMode } = useColorMode(); return ( diff --git a/src/css/custom.css b/src/css/custom.css index d0ac69d..f1284aa 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -40,18 +40,17 @@ /* Direct body text styling that will override Docusaurus */ body { - color: #d7d7d7 !important; + color: var(--ifm-text-secondary-color) !important; + font-size: 15px !important; /* Set body text size */ } + + /* Light mode body text */ [data-theme='light'] body { color: #333333 !important; /* Dark text for light mode */ } -/* Dark mode body text */ -[data-theme='dark'] body { - color: #d7d7d7 !important; -} /* Global background pattern for all pages */ html { @@ -103,11 +102,21 @@ html[data-theme='dark'] { } h1 { - font-size: 2.5rem !important; /* Adjust this value as needed */ + font-size: 2.2rem !important; /* Adjust this value as needed */ font-weight: 700; line-height: 1.2; } +h2 { + font-size: 1.8rem !important; /* Adjust this value as needed */ +} + +h3 { + font-size: 1.4rem !important; /* Adjust this value as needed */ +} + + + [data-theme='dark'] { --primary-text: var(--white); --ifm-color-primary: #7e71f4; /* Primary brand color */ @@ -122,8 +131,8 @@ h1 { --ifm-background-secondary-color: #2a2a2a; /* Slightly lighter background for contrast */ --ifm-background-code-color: #2a2a2a; /* Background for code blocks */ --ifm-background-code-line-color: #333; /* Background for highlighted lines in code blocks */ - --ifm-text-color: #dfdfdf; /* Primary text color */ - --ifm-text-secondary-color: #ffffff; /* Secondary text color */ + --ifm-text-color: #ffffff; /* Primary text color */ + --ifm-text-secondary-color: #d7d7d7; /* Secondary text color */ --ifm-text-sidebar-text-color: #888888; /* Secondary text color */ --ifm-border-color: #444; /* Border color */ diff --git a/src/js/chatbot.js b/src/js/chatbot.js deleted file mode 100644 index 876d73d..0000000 --- a/src/js/chatbot.js +++ /dev/null @@ -1,191 +0,0 @@ -// Simple Dify chatbot loader -(function() { - if (typeof window === 'undefined') return; - - // TEMPORARY DISABLE FLAG - Set to false to disable chatbot - const CHATBOT_ENABLED = true; - - if (!CHATBOT_ENABLED) { - console.log('Chatbot is temporarily disabled'); - return; - } - - // Set configuration - window.difyChatbotConfig = { - token: 'bYIppJMzMieMPDHm' - }; - - // Load the script - const script = document.createElement('script'); - script.src = 'https://udify.app/embed.min.js'; - script.defer = true; - document.head.appendChild(script); - - // Add custom styles for purple color and rounded corners - const style = document.createElement('style'); - style.textContent = ` - #dify-chatbot-bubble-button { - background-color: #4B39EF !important; - bottom: 0.80rem !important; - right: 0.80rem !important; - border-radius: 50% !important; - width: 45px !important; - height: 45px !important; - } - - /* Make the main chat window background more translucent to show rounded corners */ - .dify-chatbot-widget #dify-chatbot-bubble-window { - background-color: rgba(51, 51, 51, 0.6) !important; - border-radius: 12px !important; - overflow: hidden !important; - } - - /* Also target any main container backgrounds */ - .dify-chatbot-widget > div { - background-color: rgba(51, 51, 51, 0.6) !important; - border-radius: 12px !important; - overflow: hidden !important; - } - - /* Target the main chat container */ - .dify-chatbot-widget .dify-chatbot-bubble-window { - background-color: rgba(51, 51, 51, 0.6) !important; - border-radius: 12px !important; - overflow: hidden !important; - } - - /* Target any chat window elements */ - [id*="chat"], [class*="chat-window"], [class*="bubble-window"] { - background-color: rgba(51, 51, 51, 0.6) !important; - border-radius: 12px !important; - overflow: hidden !important; - } - - /* Ensure the chat button is perfectly circular */ - [id*="bubble-button"], [class*="bubble-button"] { - border-radius: 50% !important; - width: 60px !important; - height: 60px !important; - } - `; - document.head.appendChild(style); - - // Function to force positioning - function forceChatbotPosition() { - // Only target specific chatbot elements with very specific selectors - const chatbotWidgets = document.querySelectorAll('.dify-chatbot-widget, #dify-chatbot-widget'); - const chatbotWindows = document.querySelectorAll('#dify-chatbot-bubble-window, .dify-chatbot-bubble-window'); - const chatbotButtons = document.querySelectorAll('#dify-chatbot-bubble-button, .dify-chatbot-bubble-button'); - - // Position chatbot widget containers only - chatbotWidgets.forEach(widget => { - widget.style.position = 'fixed'; - widget.style.bottom = '0'; - widget.style.right = '0'; - widget.style.top = 'auto'; - widget.style.left = 'auto'; - widget.style.zIndex = '1000'; - widget.style.margin = '0'; - widget.style.transform = 'none'; - }); - - // Position chatbot window elements only - chatbotWindows.forEach(window => { - window.style.position = 'fixed'; - window.style.bottom = '0'; - window.style.right = '0'; - window.style.top = 'auto'; - window.style.left = 'auto'; - window.style.margin = '0'; - window.style.transform = 'none'; - }); - - // Handle chatbot iframes specifically - const chatbotIframes = document.querySelectorAll('iframe[src*="dify"], iframe[src*="udify"]'); - chatbotIframes.forEach(iframe => { - iframe.style.position = 'fixed'; - iframe.style.bottom = '0'; - iframe.style.right = '0'; - iframe.style.top = 'auto'; - iframe.style.left = 'auto'; - iframe.style.margin = '0'; - iframe.style.transform = 'none'; - }); - - // Only target expanded chatbot elements - const expandedChatbotElements = document.querySelectorAll('.dify-chatbot-widget[data-state="expanded"], .dify-chatbot-widget .expanded'); - expandedChatbotElements.forEach(element => { - element.style.position = 'fixed'; - element.style.bottom = '0'; - element.style.right = '0'; - element.style.top = 'auto'; - element.style.left = 'auto'; - element.style.margin = '0'; - element.style.transform = 'none'; - element.style.zIndex = '1000'; - }); - - // Only force positioning on chatbot elements with high z-index - const highZIndexChatbotElements = document.querySelectorAll('.dify-chatbot-widget[style*="z-index: 999"], .dify-chatbot-widget[style*="z-index: 1000"], .dify-chatbot-widget[style*="z-index: 1001"]'); - highZIndexChatbotElements.forEach(element => { - if (element.style.position === 'fixed') { - element.style.bottom = '0'; - element.style.right = '0'; - element.style.top = 'auto'; - element.style.left = 'auto'; - } - }); - - // Make chatbot background elements more translucent to show rounded corners - const chatbotElements = document.querySelectorAll('.dify-chatbot-widget *'); - chatbotElements.forEach(element => { - const computedStyle = window.getComputedStyle(element); - // Look for dark backgrounds that are likely the main content area - if (computedStyle.backgroundColor && - (computedStyle.backgroundColor.includes('rgb(51, 51, 51)') || - computedStyle.backgroundColor.includes('rgb(64, 64, 64)') || - computedStyle.backgroundColor.includes('rgb(33, 33, 33)') || - computedStyle.backgroundColor.includes('#333333') || - computedStyle.backgroundColor.includes('#404040') || - computedStyle.backgroundColor.includes('#212121'))) { - // Make it more translucent - element.style.backgroundColor = 'rgba(51, 51, 51, 0.5)'; - element.style.borderRadius = '12px'; - element.style.overflow = 'hidden'; - } - }); - - // Ensure chat button is circular - chatbotButtons.forEach(button => { - button.style.borderRadius = '50%'; - button.style.width = '60px'; - button.style.height = '60px'; - }); - } - - // Apply positioning after script loads - setTimeout(forceChatbotPosition, 1000); - setTimeout(forceChatbotPosition, 2000); - setTimeout(forceChatbotPosition, 3000); - setTimeout(forceChatbotPosition, 4000); - setTimeout(forceChatbotPosition, 5000); - - // Also watch for changes - const observer = new MutationObserver(() => { - forceChatbotPosition(); - // Run again after a short delay to catch any delayed changes - setTimeout(forceChatbotPosition, 100); - setTimeout(forceChatbotPosition, 500); - }); - observer.observe(document.body, { childList: true, subtree: true, attributes: true }); - - // Also run continuously for the first 10 seconds - let runCount = 0; - const continuousInterval = setInterval(() => { - forceChatbotPosition(); - runCount++; - if (runCount > 20) { // Stop after 10 seconds (20 * 500ms) - clearInterval(continuousInterval); - } - }, 500); -})(); \ No newline at end of file diff --git a/static/logos/DreamFlow-Logo-Black.png b/static/logos/DreamFlow-Logo-Black.png new file mode 100644 index 0000000..a15eb20 Binary files /dev/null and b/static/logos/DreamFlow-Logo-Black.png differ diff --git a/static/logos/DreamFlow-Logo.png b/static/logos/DreamFlow-Logo.png new file mode 100644 index 0000000..c9bb518 Binary files /dev/null and b/static/logos/DreamFlow-Logo.png differ diff --git a/static/logos/dreamflow-icon-black.png b/static/logos/dreamflow-icon-black.png new file mode 100644 index 0000000..ebd2381 Binary files /dev/null and b/static/logos/dreamflow-icon-black.png differ diff --git a/static/logos/dreamflow-icon-white.png b/static/logos/dreamflow-icon-white.png new file mode 100644 index 0000000..3e1d224 Binary files /dev/null and b/static/logos/dreamflow-icon-white.png differ diff --git a/static/logos/favicon.png b/static/logos/favicon.png index 961687e..ebd2381 100644 Binary files a/static/logos/favicon.png and b/static/logos/favicon.png differ diff --git a/static/logos/logoMark_outlinePrimary_transparent.svg b/static/logos/logoMark_outlinePrimary_transparent.svg deleted file mode 100644 index cb2222f..0000000 --- a/static/logos/logoMark_outlinePrimary_transparent.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - SVG /logoMark_outlinePrimary_transparent - - - - - - \ No newline at end of file diff --git a/static/logos/logo_primary_color@2x.png b/static/logos/logo_primary_color@2x.png deleted file mode 100644 index 8b78fb1..0000000 Binary files a/static/logos/logo_primary_color@2x.png and /dev/null differ diff --git a/static/logos/logo_primary_color_onLight@2x.png b/static/logos/logo_primary_color_onLight@2x.png deleted file mode 100644 index 266852b..0000000 Binary files a/static/logos/logo_primary_color_onLight@2x.png and /dev/null differ