How to use button style properly?

[heyjuns]

I've tried several widgets from forui and it feels great. But i find it hard when I try to add a style to a button. I.e i want to just add a custom color but the class seems to have to define all the other things. Do you mind sharing the example?

[Pante]

Just to clarify, do you want to extend a ButtonStyle with a custom color, or modify a ButtonStyle?

For the latter, it depends on the specific part of the button you want to customize. For example, to customize a outline button's background color based on an existing style:

final buttonStyle = FButtonStyles.inherit(
  colorScheme: context.theme.colorScheme,
  typography: context.theme.typography,
  style: context.theme.style,
).outline.copyWith(
  enabledBoxDecoration: BoxDecoration(
    border: Border.all(color: context.theme.colorScheme.primary),
    borderRadius: context.theme.style.borderRadius,
  ),
  enabledHoverBoxDecoration: BoxDecoration(
    border: Border.all(color: context.theme.colorScheme.primary),
    borderRadius: context.theme.style.borderRadius,
    color: context.theme.colorScheme.secondary,
  ),
);

Then, either pass it to a FThemeData or FButton.

[heyjuns]

I want to just simply change the color i.e primary button styles. Ok, given the example we have to code that much to just change the button's color ? I thought it would simply override the color property of button styles.

[Pante]

Yes, it’s quite verbose atm. The reason it’s so verbose is because we expose the button’s decoration rather than color. This allows a greater degree of customisability at the cost of being slightly more verbose.

It's also worth mentioning that this example modifies not just the color, but the border and border radius as well for both the normal & hovered states. It also takes into account the fact that you might want to modify the typography etc.

If you're interested in modifying only the color, it can be shorten to:

context.theme.buttonStyles.outline.copyWith(
  enabledBoxDecoration: BoxDecoration( color: context.theme.colorScheme.secondary),
  enabledHoverBoxDecoration: BoxDecoration(color: context.theme.colorScheme.secondary),
);

We’re also currently working on a CLI tool that generates a modifiable style, #470.

[heyjuns]

Yupyup actually I've seen that this approach can help to build the design system in the early development stages. But since it's too verbose it will be very tiring if we do it one by one.

Got your point and also great work sir 🥂

[Pante]

Thank you! TBH, thinking about this question gave me an interesting idea to tackle the verbosity issue :) Hopefully we'll see it in 0.11.0.

[heyjuns]

Wow great 😃 glad if this make you have an idea for the future development. Would love to see the result