Hi Abel,
I’ve been using FlutterFlow daily for the past 1,366 days (since 2021-05-31), and it is the most awesome tool ever built worldwide for mobile and web development. I’ve tried all major frameworks and programming languages over the last 19 years (starting with development in 2005).
However, the main feature I’ve been waiting for since day one of my FlutterFlow journey is the ability to set up and build components in the FlutterFlow Editor programmatically. While I can build anything with Flutter and import it as a Custom Widget, these are just black boxes that aren’t editable, making my apps look unattractive. Onboarding designers to enhance aesthetics and allowing clients to create UI directly without writing any specifications is the greatest value of FlutterFlow.
In the past five weeks, we’ve witnessed a significant technological revolution with new AI developments emerging every few days. Large Language Models (LLMs) can now build impressive applications (I’ve been testing them daily for the last seven months). Tools like Grok 3 and the recently released Claude Sonnet 3.7 make it feasible to develop an open-source version of FlutterFlow. Therefore, I suggest adding one line of code in the next FlutterFlow release in main.dart:
SemanticsBinding.instance.ensureSemantics();Additionally, import the semantics library in main.dart and reference it in pubspec.yaml. This would enable programmatic interaction with app.flutterflow.io using tools like Playwright and other integration test tools. Currently, Flutter Glass overlays the entire canvas, making it impossible to inspect DOM elements. I understand this was initially disabled in the production release for security reasons, but I believe the FlutterFlow Editor is now mature enough, with adequate security measures in place, to expose the DOM elements schema safely.
This change would allow the use of tools like:
• Browser Use (GitHub Repository)
Moreover, with Microsoft’s Omnitool and their latest release of OmniParserV2, this could be achievable today (though it’s more challenging without exposed semantics). Watch the demonstration here.
Programmatically interacting with the FlutterFlow Editor on the web or desktop app would be beneficial. Even better would be enabling the import and editing of Project YAML files introduced in Branching V2. Learn more about Branching V2 here.
This would allow the use of tools like Claude Desktop to generate YAML files from feature prompts and then, with an MCP server, import changes into FlutterFlow projects. This approach would be groundbreaking while preserving FlutterFlow’s primary value: providing a GUI builder for designers and non-technical entrepreneurs but giving more freedom to developers to make new features faster.