Flutter MaterialStateProperty - Merge two styles together

92 views Asked by At

I am coming from a more web css design where have things like .btn .btn-primary and the .btn--lg/.btn-sm

I am just not sure how to handle the sizing. Currently I have a function that determines the correct buttonStyle based upon type of button but struggling to then determine the text style size.

For example this is what I have

  TextStyle getTextStyle(BuildContext context) {
    switch (size) {
      case KnowledgehookSize.large:
        return Theme.of(context).textTheme.headlineSmall!;
      case KnowledgehookSize.medium:
        return Theme.of(context).textTheme.titleMedium!;
      case KnowledgehookSize.small:
        return Theme.of(context).textTheme.titleSmall!;
    }
  }

  ButtonStyle getButtonStyle(BuildContext context) {
    final KnowledgehookButtons buttonStyle =
        Theme.of(context).extension<KnowledgehookButtons>()!;
    ButtonStyle? style;
    switch (this.style) {
      case KnowledgehookButtonStyle.primary:
        style = buttonStyle.primaryButtonStyle;
        break;
      case KnowledgehookButtonStyle.secondary:
        style = buttonStyle.secondaryButtonStyle;
        break;
      case KnowledgehookButtonStyle.danger:
        style = buttonStyle.dangerButtonStyle;
        break;
      default:
        style = Theme.of(context).elevatedButtonTheme.style;
    }
    return style!.copyWith(textStyle: MaterialStateProperty.all(getTextStyle(context)));
  }

I cant seem to find a way to just change the textStyle font size without having to repeat the MaterialStateProperty definition. Is there a way to merge MaterialStateProperty or apply a transformation after MaterialStateProperty function is called?

See above for what I have tried

0

There are 0 answers