New
Mix 1.5.3 "Nielsen"
Highlights
FlexBox Gets a Dedicated Spec and Utility
In this release, FlexBox now has its own dedicated utility: $flexbox. Previously, you styled FlexBox using either $flex or $box. With $flexbox, you get a utility that combines attributes from both, offering a more intuitive and efficient way to handle a common use case in most applications.
This enhancement simplifies your code by reducing the need to use both box and any flex widget, making it easier to define layouts with different children.
FlexBox(
direction: Axis.vertical,
style: Style(
$flexbox.chain
..flex.mainAxisAlignment.center()
..flex.crossAxisAlignment.center()
..flex.gap(12)
..padding.all(12)
..color.red()
..border.all.color.redAccent(),
),
children: const [
Text('Hello'),
Text('World'),
],
),
Important Note: Starting with the next major version, FlexBox will exclusively use $flexbox. This change ensures that FlexBox styling is fully aligned with the existing API conventions in Mix, offering a more consistent developer experience.