How to merge Style from parent spec.

[lvsecoto]

Use case

We have Spec

final class ButtonSpec extends Spec<ButtonSpec>
    with Diagnosticable, _$ButtonSpecMethods {
  @override
  final StyleSpec<FlexBoxSpec>? container;

  @override
  final StyleSpec<IconSpec>? icon;

  @override
  final StyleSpec<TextSpec>? label;

  const ButtonSpec({
    this.container,
    this.icon,
    this.label,
  });
}

The button widget，with Widget child and Widget icon

class UIButton extends StatelessWidget {
  const UIButton({
    super.key,
    required this.onPressed,
    this.child,
    this.icon,
    this.style,
    this.variant = ButtonVariant.primary,
    this.size = ButtonVariantSize.sm,
  });

  final VoidCallback onPressed;

  final Widget? child;

  final Widget? icon;

  final ButtonStyler? style;

  final ButtonVariant variant;

  final ButtonVariantSize size;

  @override
  Widget build(BuildContext context) {
    final child = this.child;
    final icon = this.icon;

    return StyleBuilder(
      style: _getButtonStyle(
        style,
        variant: variant,
        size: size,
      ),
      builder: (context, spec) => FlexBox(
        styleSpec: spec.container,
        children: [
          if (spec.label != null && child != null)
            StyleSpecProvider(
              spec: spec.label!,
              child: child,
            ),
          if (spec.icon != null && icon != null)
            StyleSpecProvider(
              spec: spec.icon!,
              child: icon,
            ),
        ],
      ),
    );
  }
}

Proposal

What we want to do is:

  UIButton(
    onPressed: () {},
    size: size,
    variant: variant,
    child:  StyledText(
              title,
              styleSpec: StyleSpecProvider.of<TextSpec>(context),
              style: TextStyler().fontSize(38) // <= merge context style，and make font bigger only
     ),
  );

[lvsecoto]

And I found this in library:

class _StyleWidgetState<S extends Spec<S>> extends State<StyleWidget<S>> {
  @override
  Widget build(BuildContext context) {
    final styleSpec = widget.styleSpec;
    if (styleSpec != null) {
      // Direct spec usage - no style resolution needed
      return StyleSpecBuilder(builder: widget.build, styleSpec: styleSpec);
    } // Style resolution path (current behavior)

    return StyleBuilder<S>(style: widget.style, builder: widget.build);
  }
}

When there is a styleSpec, the style ignored...

[lvsecoto]

Or how to descendant button.icon Style down to child widget?