What’s new in Flutter Markup Language 2.0 ‘s Upcoming Release

5 min readMay 23, 2023

Massive bump in layout performance, simplified widget trees, form enhancements, an FML VSCode Extension and more!

Since the release of 1.3.0 we have been hard at work bringing some massive improvements to Flutter Markup Language. This includes massive bumps in layout performance, improved rulesets, a VSCode extension with syntax highlighting and code snippets to name a few!

Flutter Markup Language 2.0 is now LIVE and can be downloaded, compiled, and edited! View the release notes here.

The focus of the dev team from 1.3 to 2.0 was to improve the consistency and predictability of layouts, define a strong set of rules for laying out widgets, and most importantly: vastly improve the speed of layout in Flutter Markup Language at both a performance and development level.

If you are unfamiliar with FML, it’s use cases, or would like to learn more, you can check out our YouTube channel, visit the GitHub wiki, or see live examples on fml.dev. You can also check out the Flutter Markup Language: Benefits and Use Cases article!

Not only has our team made a host of upgrades, but we also have FML 2.0 running on Flutter 3.10 which offers its own suite of performance enhancements, default Material3 support, smaller load sizes, preparation for multiwindow support, and more!

Keep an eye out for the the Flutter Markup Language 2.0 release here, or read ahead for some specific examples on the main new features!

Layout Performance, Predictable Rulesets, and Crashproofing

First and foremost, we improved the speed of layout by almost 3x in some cases, while adding additional default interactions to all layout widgets! This allows for quicker painting times while drawing templates in real time, increased controllability, and smarter interaction of widgets by default; saving you time and greatly reducing the size of your templates!

Some of the layout additions we have added, on top of the new layout ruleset, include:

Automatic sibling awareness — When laying out widgets, we have added the ability for all widgets to know their available size by default, regardless of position in the tree. This allows for multiple widgets to share available space in their main axis within their parent, without any work on the part of the developer!
Built in flex factors — The flex factors allow fine control of a widget when it takes up available space by using the flex=”” attribute on any viewable widget. This allows you to tell a widget to share more or less of the available space with its other siblings that do not have a hard size.
Always-known constraint passing — Previously, certain widgets such as EXPANDED would break the constraint tree, forcing devs to hard size most items within the widget, and increasing the chance of overflow when on unexpected screen dimensions. We have ensured with the new ruleset that constraints are always known and bindable, even if they aren’t used. This allows for widgets to take up space without overflowing on any screen dimension!
Dry-run layout — Previously, layout was deferred to Flutter, which would force multiple rebuilds with our current ruleset. This forced us to get under the hood and use dart to preform the initial layout before painting to the screen, allowing the quickest multipass sizing available! This ensures all your widgets know their size in the tree, regardless of parent or sibling!
Decoration on All Layout Widgets — With the ability of widgets to size in specific ways based on their layout, we have decided to add decoration attributes to all layout widgets without costing any performance! This allows you to use the best widget for the job based on its sizing behaviors, regardless of whether or not you want a background color, border, or shadow!
Padding and Margins — On top of all the additional consolidations, we added pad=”” and margin=”” as an attribute on all widgets, which is taken into account for every layout pass. This allows you to pad the internals, or add a margin externally without the need for different widgets that can break alignment. This reduces nesting greatly and decreases the tree size, allowing you to only see the widgets in your template that are most important!

Other Improvements and Additions

Form Field Error state and Error Messages for all FormField widgets.
Alarms for FormFields that affect the visual error state of the widgets, With custom error messages, individual triggers, and event strings.
Autofilling and Autoposting FORMS.
FIELD widget for Form, for non viewable posting data.
SBOX (expand=”false” on box), CARD (a BOX with a border and color by default) and other shorthand syntax for widgets to reduce attribute loads.
Added a STASH datasource to view all stashed values.
Improved Pager’s Currentpage binding.
Visual fixes for list and table.
Improved default sizing of complex widgets such as chart, modal, and drawer.
Stopped double build on navigation.
Updated codebase to pass all lints.
Chart UI and performance improvements.
Chart axis start/cutoffs and intervals added.
Chart axis label customization.
Chart Legend Sizing.
Chart selection follower and draggability.
Chart Annotations added.
Improved Debug Logs and messages.
Improved Default Prompts and Messages.
Added updated Video Player Widget.
Fixes to DATA to take subset of other widgets such as SELECT.
Multiple bug fixes.

What’s Upcoming For Flutter Markup Language

As our focus is always on improvement of stability and performance on all devices, we also try to incorporate new features, and improve the existing ones in FML. Some features that we are currently working on coming down the pipe are:

PROTOTYPE and STYLES — A Configuration that allows for a user to specify overridable style and attributes for specific widgets, allowing them to be used across the entire application and changed from a single location. This is used to extend THEME.

Drag and Drop template builder — This one is a bit further off, but we are seriously looking into the start of a drag and drop codeless platform, that will be built in FML, and render FML templates!

New Widgets — DRAG and DROP widgets,

JSON Support for auto-building/auto-filling forms — The next step in the form iterations is to support input and output of auto-filling and auto-building forms!

VSCode FML Extension Beta — An alpha version is currently available in the extension marketplace. We aim to improve the stability and usability, while also implementing FML lints!

Content Blitz — With the recent stability and changes, our small team will be focussing on producing a large amount of educational and example content using FML, such as a Celebrity Jet Tracker Dashboard tutorial, Serveless Connections in FML, and more!

That is just a small list of the features we are working on adding to FML currently. If you would like to suggest features, or contribute your own, please Visit The GitHub and try your hand at adding a new Widget and creating a PR! As always, we continue to improve and iterate on already existing features, while always providing new and improved features to help build complex applications quickly.

That is just a quick preview of some of the features added to Flutter Markup Language 2.0. If you have any questions about FML, writing templates, updating your application, and more you can:

Thanks for reading!