From DreamFlow
Description
#dreamflow from the #FlutterFlow team has gone through a substantial change during 2025. It is no longer simply a vibe coding app builder but boasts features to suit a number of different audiences. In this video we take a closer look at dreamflow and discover some of the most important aspects of the tool and also try to work out if this is the perfect app builder for you.
We will also look at using dreamflow with #Supabase and also use an external tool to help solve a problem which dreamflow could not initially work out. I'll explore some of the initial features but further in-depth coverage will also be required to look specifically at utilising the product to its full potential.
_____
🔥 Looking for more content? Checkout the details below!
_____
Prompt used in this video:
The Juice Bar Combo Builder is a fun, mobile app that allows users to build their perfect juice by selecting ingredients, naming their combo and saving it to their favourites.
Goal:
Allow users to build custom juice combinations and show nutrition info or quirky combo names. Enable users to save, edit or delete their combos.
Core Features: Build a Juice Combo: 1. Select up to 5 ingredients from a master list (fruits, boosters, base liquids) 2. Ingredients grouped by category 3. Multi-select input for customisation Auto-Generated Combo Name (optional for fun): 1. Combine 2 ingredients into a randomised name, e.g. “Berry Boost”, “Tropical Zen” 2. Based on logic or random pairs 3. Option to edit the name manually Nutrition Preview (Mock or Estimated): 1. Display estimated sugar level, energy (kcal), and “health score” 2. Based on predefined values per ingredient 3. Optional fun summary: “💪 Boost level: High” Save to Favourites: 1. Users can save a combo 2. View, edit and swipe to delete saved juices Light and Dark Mode toggle: 1. Allow users to toggle an option to change the theme of the app. UI Style: 1. Fun and vibrant
🚀 The Digital Pro's NoCode Academy: https://www.thedigitalpro.co.uk (Support the channel and go ad-free! 😉)
Summary
This video introduces the latest version of Dreamflow, an app builder from the FlutterFlow team, highlighting its significant changes and suitability for various audiences (0:02-0:30).
The presenter covers several key aspects of Dreamflow:
Credit-based system: Dreamflow uses a credit system for AI features, with initial project builds typically costing around 5-6 credits (1:10-2:23, 8:26-8:50).
GitHub Integration: A feature for linking GitHub accounts is coming soon, which will allow users to work on their code outside of Dreamflow and sync changes (2:26-3:19).
Project Creation: The video demonstrates creating a "Juice Bar Combo Builder" app using a detailed prompt, showcasing how Dreamflow interprets the prompt and generates the initial code (3:21-6:35).
IDE Features: The Dreamflow IDE offers a preview of the application, a code view showing the Flutter directory structure, and an agent panel for AI output and project summaries (10:15-11:12).
Customization: Users can inspect and modify widget properties directly within the preview canvas, and changes are reflected in the code and preview (12:02-15:52).
Best Practices: The presenter advises manually adjusting simple changes in the code to save credits and using the AI agent for more complex fixes or to recover from mistakes (15:52-16:33).
Widget Tree: Dreamflow includes a widget tree for navigating the application's hierarchical structure, offering both consolidated and detailed views (18:16-21:11).
Reloading and Restarting: The video explains the differences between hot reload (maintains state) and hot restart (clears memory) for refreshing the application preview (23:17-24:17).
Dependency Management: Users can add third-party dependencies by modifying the
pubspec.yamlfile and refreshing dependencies within Dreamflow (24:19-25:03).Themes and Assets: Dreamflow provides options to manage themes and upload assets like images for the application (25:11-26:09).
Issue Tracking: Dreamflow displays issues, warnings, and information, allowing users to correct problems within their code (26:27-27:21).
AI Agent Enhancements: The AI agent can take screenshots to provide context for requested changes and automatically takes screenshots when errors are detected, helping with debugging (27:26-28:41).
Chat Management: It's recommended to start new chat windows for each new feature when using the AI agent to maintain clarity (28:59-29:31).
Publishing and Downloading Code: Dreamflow supports one-click deployment to web, iOS, and Android. Users can also download the project code as a zip file, though this is a one-way street until Git integration is fully implemented (29:42-32:16).
The video concludes by demonstrating how the AI agent can fix the light and dark mode theme issue (32:20-34:10) and add spacing between UI elements (34:15-35:01).
