Flutterflow 6.0

Four years ago, Flutterflow was launched at Google I/O with the goal of revolutionizing app development. Last Wednesday, Flutterflow celebrated its four-year anniversary and presented version 6.0: a more powerful and smarter tool! This blog summarizes all new features.

Custom code and classes

Classes are an important concept in today's object-oriented programming (OOP). A class is a kind of template and describes what an object is and what it can do. For example, you can have a class of the type 'car'. Within this class, a car has a color and brand . In addition, the car can start , accelerate and brake . Until now, you could not use classes in Flutterflow and you had to use a workaround for this. With version 6.0, this is a thing of the past and you can import your own Dart files and use custom classes such as Cart , CartItem or Product directly into FlutterFlow. These are automatically available in the tool. Here are some advantages of classes:

• Creating and passing objects between pages;

• Link properties directly to the UI.

• You can use complex OOP techniques such as inheritance, mixins and abstract classes.

• Still in development: automatic synchronization of Dart files via the VS Code extension.

Custom code expressions

Until now, you could write small pieces of custom code where you needed it within your action flows. This was useful for things like a quick calculation or conversion. With version 6.0, you can now write larger multi-line Dart code and insert it directly in property fields. Perfect for formatting text, logic or complex calculations.

Furthermore:

• Use the Execute Code action to execute code directly within a flow.

• The new inline editor offers automatic suggestions and instant error checking.

• Next week: AI addition with understanding of project variables, such as App State or user data.

Pages in libraries

Build pages once and reuse them everywhere – perfect for login flows, onboarding or form processing. Use them in navigation actions and pass variables between pages.

Coming soon: pages that can be used for navigation bars or as a home page.

Importing Figma Frames

Until now, it was only possible to import brand colors and typography from Figma. The rest of your design had to be recreated in Flutterflow. With version 6.0, you can now import complete frames as components! This makes it much faster to transfer a design. An automated connection is also made with the Flutterflow theme.

Teams / collaboration

Starting in July, it will be possible to be a member of multiple FlutterFlow teams at the same time. Switching between workspaces without logging out will be a thing of the past.

Integration and automation

YAML Edits

Perform large-scale changes via direct editing of your project's YAML file, using Git-like version control. For example, quickly apply a theme color to all slices in your application. This feature can be found under 'Refactor Project' in the Develop menu.

Project API

For the first time, a REST API is available to read and edit project data. This opens the door for automated workflows and CI/CD integrations.

MCP Server (in development / experimental)

An official MCP Server is in development that will allow you to customize projects, create pages, and perform refactorings – directly from AI tools.

Others

• Desktop apps now use the Monaco code editor with real-time error checking and smart suggestions.

• Import Dart files into any page or component.

• Over 200 new error messages help you debug variable binding issues faster.

• Over 50 bugs fixed during the recent Bug Bash.

• Support for custom typography in addition to custom colors.

• A more compact and efficient Firestore UX for field settings.

• Improved search functionality, with a new location of the command menu, better search results, and keyboard navigation.