Styler API

Remix stylers expose matching named factories and fluent methods for canonical style operations. This symmetry lets a state variant use Dart’s contextual dot shorthand without constructing another styler explicitly:


final style = RemixButtonStyler()
    .color(Colors.blue)
    .onHovered(.color(Colors.indigo))
    .onPressed(.scale(0.97));

The following expressions are equivalent:


RemixCardStyler.color(Colors.blue)
RemixCardStyler().color(Colors.blue)

Factory policy

API shape	Policy
Canonical style operation	Expose both a named factory and a matching fluent method.
Direct child styler field	Expose a field factory such as `RemixMenuStyler.trigger(...)`.
Primary nested container	Forward one compatible canonical surface from the nested styler.
Alias or expanded convenience	Keep it fluent-only and use its canonical operation in contextual shorthand.
Styler lifecycle or composition (`animate`, `variants`, `wrap`, `modifier`, `merge`)	Keep it fluent-only because it configures or combines an existing parent styler.
Generic variant or callable widget helper	Keep it as an extension method; it operates on an existing styler.
Name conflict	Give the component-specific behavior a descriptive name and reserve the canonical name for the generated surface.

Factories are generated from each component spec. Do not add public methods directly to generated *.g.dart files.

Canonical operations and conveniences

Canonical operations include APIs such as color, padding, borderRadius, scale, and direct child fields such as label. Expanded conveniences and aliases remain fluent-only. For example, use the canonical factory inside a variant:


final style = RemixCardStyler()
    .paddingAll(12)
    .backgroundColor(Colors.white)
    .onHovered(.padding(EdgeInsetsGeometryMix.all(16)))
    .onPressed(.color(Colors.grey.shade100));

Here, paddingAll expands to padding, and backgroundColor aliases color. They do not add duplicate named factories.

Legacy convenience factories map to canonical factories as follows. Their fluent convenience methods remain available on an existing styler.

Legacy convenience factory	Canonical contextual replacement
`backgroundColor(value)`	`.color(value)`
`RemixAccordionStyler.titleColor(value)`	`.title(.color(value))`
`titleFontSize(value)` / `titleFontWeight(value)`	`.title(.fontSize(value))` / `.title(.fontWeight(value))`
`titleStyle(value)`	`.title(.style(value))`
`leadingIconColor(value)` / `leadingIconSize(value)`	`.leadingIcon(.color(value))` / `.leadingIcon(.size(value))`
`trailingIconColor(value)` / `trailingIconSize(value)`	`.trailingIcon(.color(value))` / `.trailingIcon(.size(value))`
`contentColor(value)` / `contentPadding(value)` / `contentDecoration(value)`	`.content(.color(value))` / `.content(.padding(value))` / `.content(.decoration(value))`
`RemixAvatarStyler.square(value)`	`.size(value, value)`
`RemixAvatarStyler.foregroundColor(value)`	`.label(.color(value)).iconColor(value)`
`RemixBadgeStyler.foregroundColor(value)`	`.label(.color(value))`
`RemixCalloutStyler.foregroundColor(value)`	`.icon(.color(value)).textColor(value)`
`RemixCalloutStyler.iconSize(value)`	`.icon(.size(value))`
`RemixCalloutStyler.textStyle(value)`	`.text(.style(value))`

Forwarded surfaces

Most visual components forward the canonical surface of their primary Box or FlexBox container. A composite root without one clear visual surface, such as RemixMenuStyler, exposes factories for its child fields instead:


final style = RemixMenuStyler.trigger(
  RemixMenuTriggerStyler.color(Colors.black),
);

RemixSelectStyler stores its popup container as a FlexBox, but intentionally forwards only the compatible Box surface. This exposes operations such as color, padding, and scale without leaking popup layout controls through the root select styler.

The upstream forwarded transform factory currently accepts Alignment rather than the wider AlignmentGeometry accepted by the former handwritten helpers. Use a direct child styler when a directional alignment is required, for example RemixCardStyler.container(BoxStyler(transform: matrix, transformAlignment: AlignmentDirectional.centerStart)).

Variants and selected state

Widget-state and selected-state helpers consume the same styler type, so named factories work contextually for every generated Remix styler:


final checkboxStyle = RemixCheckboxStyler()
    .onHovered(.color(Colors.grey.shade100))
    .onSelected(.color(Colors.green));

Resolved naming conflicts

Three legacy helpers used names that now belong to a canonical forwarded surface. Their component-specific behavior remains available under explicit names:

Styler	Canonical generated API	Component-specific helper
`RemixTextFieldStyler`	`color` styles the container	`textColor` styles editable text
`RemixButtonStyler`	`rotate` transforms the container	`modifierRotate` rotates the complete widget with a modifier
`RemixCalloutStyler`	`textStyle(TextStyler)` applies the container text style	`contentTextStyle(TextStyleMix)` styles callout content

This keeps contextual shorthand predictable while preserving each specialized operation without ambiguous overloads.

Generated and hand-authored code

Remix*Styler classes are generated from @MixableSpec. Fortal widget wrapper classes are hand-authored source. Either way the public API is identical — the fortal*Styler recipes, constructors, fields, and widget behavior are the same whether a class is generated or written by hand, so nothing changes for code that consumes them.