Style models provide fine-grained control over individual widget instances. They override ThemeExtension values when both are provided, making them the source of truth for customization.


How Style Models Work

  1. Per-Widget Control: Each widget instance can have its own style model
  2. Override Behavior: Style model values take precedence over ThemeExtension values
  3. Fallback System: If a style model property is null, the widget falls back to the ThemeExtension value

Example

MyoroButton(
  style: MyoroButtonStyle(
    backgroundIdleColor: Colors.red,
    borderRadius: BorderRadius.circular(12),
    // Only these properties override the theme
    // Other properties use ThemeExtension defaults
  ),
  child: Text('Custom Button'),
)