How to make a Button with it's label is a Widget?

[lvsecoto]

I don't think Button.label with it's type is String is a good idea.

Like we need:

Button(
  label: Row(
    child: [
      StyledText('Text with Mix Style'),
      Text('Text with ThemeData Style'),
      OthersWidget(),
    ]
  ),
)

Here is my ButtonSpec:

import 'package:flutter/material.dart';
import 'package:mix_annotations/mix_annotations.dart';
import 'package:mix/mix.dart';

part 'button.g.dart';
part 'button_widget.dart';
part 'button_variants.dart';
part 'button_style.dart';

@MixableSpec()
class ButtonSpec extends Spec<ButtonSpec> with _$ButtonSpec {
  final BoxSpec container;
  final TextSpec label;

  static const of = _$ButtonSpec.of;

  static const from = _$ButtonSpec.from;

  const ButtonSpec({
    BoxSpec? container,
    TextSpec? label,
    super.animated,
  })  : flex = flex ?? const FlexSpec(),
        container = container ?? const BoxSpec(),
        icon = icon ?? const IconSpec(),
        label = label ?? const TextSpec();
}

Button :

part of 'button.dart';

class Button extends StatelessWidget {
  const Button({
    super.key,
    this.onPressed,
    required this.label,
    this.variants = const [ButtonVariant.filled],
    this.style,
  });

  final VoidCallback? onPressed;

  final Widget label;

  final List<ButtonVariant> variants;

  final Style? style;

  @override
  Widget build(BuildContext context) {
    return Pressable(
      onPress: onPressed,
      enabled: onPressed != null,
      child: SpecBuilder(
        style: _buttonStyle(style, variants),
        builder: (context) {
          final spec = ButtonSpec.of(context);
          final label = spec.label;
          return spec.container(
            child: Box(
              style: label.style, /// HOW ????
            ),
          );
        },
      ),
    );
  }
}

[lvsecoto]

I found a solution:

  Widget build(BuildContext context) {
    return Pressable(
      onPress: onPressed,
      enabled: onPressed != null,
      child: SpecBuilder(
        style: _buttonStyle(style, variants),
        builder: (context) {
          final spec = ButtonSpec.of(context);
          final label = spec.label;
          return spec.container(
            child: Box(
              style: Style( // << Style
                $text.style.as(label.style!),
              ),
              child: DefaultTextStyle(
                style: label.style!,
                child: this.label,
              ), // >> Style
            ),
          );
        },
      ),
    );
  }

But I think we need a utils to convert Spec to Style

[tilucasoli]

I recommend using a builder in the label property and passing the TextSpec to the builder, as who implements this button can utilize it to receive the TextSpec and apply to a TextSpecWidget.

Button(
  label: (spec) {
    Row(
        child: [
          TextSpecWidget('Text with Mix Style', spec: spec),
          Text('Text with ThemeData Style'),
          OthersWidget(),
        ]
      ),
    }
)