Headless Widgets are completely unstyled while offering maximum visual flexibility. In other words, Headless Components do not care about UI, but with functionality.
Every Headless Widget is a instance of a
RemixableWidget. It provides a
that is the base UI implementation of the widget. This can be heavily changed by providing a
CardX, for example, uses
$surface as the background color by default, but it can be
overrideen by providing
CardX( mix: Mix( bgColor(Colors.amber), ), ),
As stated before in this documentation, variants are capable of creating consistent variations of widgets. They are heavily used Headless Widgets, usually to separate styles from one component to another.
For example, imagine a card with a title and a subtitle. How would the style for each text be specifically changed without affecting the other parts of the widget?
They can also be used for to change the UI according to the current state. For example, on a selected checkbox, the style is different from the normal state.
To change or add an attribute based on a variant, call it on the Mix initialization.
AlertDialogX as example:
final dialog = AlertDialogX( mix: Mix( title( // Everything inside [title] will only be taken into account only on the title textColor(Colors.green), ), ), );
The catalog of built-in headless widgets: