Theming buttons and pane items

[alesimula]

Hello, I was trying this library together with the flutter_acrylic library, and I tried to apply an "app-wide" mica effect.

I got some pretty decent results, but encountered some limitations, especially when trying to theme elements like buttons, pane items, text input boxes etc..

It isn't clear whether it is possible to chage these colors, in the specific case of pill buttons and pane items I wanted to use a translucent shade of white for dark theme and a translucent shade of gray for light theme instead of the default opaque colors.

[bdlukaa]

You can use the style property. https://github.com/bdlukaa/fluent_ui/blob/master/lib/src/controls/inputs/buttons/button.dart#L22

[alesimula]

@bdlukaa That doesn't help me with pane items though (which I used for the elements on the screenshot above)

It's also not clear how button states work, I've tried to change the button theme globally, but I'm only able to change it to a static unchanging color (I'd like to change the disabled, enabled, hover and pressed colors separately, or at least change them by a delta of the default color), what should I do

return FluentApp(
    theme: ThemeData(
        buttonTheme: ButtonThemeData(
            defaultButtonStyle: ButtonStyle(
                backgroundColor: ButtonState.all(Colors.transparent.lerpWith(Colors.white, 0.2))
            ),
        ),
        [...]
    )
)

[bdlukaa]

For PaneItems, you can extend them and override the build method. An example of this can be the PaneItemSeparator

For buttons, you can use ButtonState.resolveWith:

style: ButtonState.resolveWith((state) {
  if (state.isPressing) return ...;
  if (state.isHovering) return ...;
  if (state.isFocused) return ...;
  return ...;
})

[alesimula]

@bdlukaa But in order to extend PaneItem and make it look and behave exactly like the PaneItem widget I should copy the whole build method from PaneItem (which is extensively longer), and other than being a little unpractical, the method uses a private class which I have no way to call ( _NavigationBody.maybeOf(context)?.displayMode ); it might still be a viable solution in my case as I don't need to get the current navigation view display mode, but I propose making this widget themable (or at least calling an extensible method to apply the style)

EDIT: I see you use a static method inside ButtonThemeData called uncheckedInputColor, one of the returned values is dynamic (style.disabledColor), while the others are defined inside the method, why not tie those to themable values too?

EDIT2: This will render an almost identical result but with transparency, so it looks good on any background color

static Color uncheckedInputColor(ThemeData style, Set<ButtonStates> states) {
    if (style.brightness == Brightness.light) {
        if (states.isDisabled) return style.disabledColor;
        if (states.isPressing) return const Color(0xFF221D08).withOpacity(0.255);
        if (states.isHovering) return const Color(0xFF221D08).withOpacity(0.075);
        return Colors.transparent;
    } else {
        if (states.isDisabled) return style.disabledColor;
        if (states.isPressing) return const Color(0xFFFFF3E8).withOpacity(0.285);
        if (states.isHovering) return const Color(0xFFFFF3E8).withOpacity(0.12);
        return Colors.transparent;
    }
}

[bdlukaa]

I agree with you that theming buttons and pane items should be easier.

[alesimula]

@bdlukaa Yeah, that would be nice; I would also like to submit a few ideas

I think you should be using translucent black/white shades where possible (like I did above), or maybe even better having a flag inside ThemeData to use translucent effects instead of fixed colors for certain elements; this may be a good idea for elements like pill buttons, pane items but also widget like the Expander (and probably some other widget I haven't tried.)

I also think there should be a flag to show pane items' hover and click effects even when PaneDisplayMode.top is selected, I achieved this by simply changing two lines in the build method (if (isTop && !topHoverEffect) and (selected && !isTop) ?) an adding the flag topHoverEffect to the constructor, I edited the second condition so it wouldn't show the effect when pane is selected

decoration: BoxDecoration(
    color: () {
        final ButtonState<Color?> tileColor = theme.tileColor ??
            ButtonState.resolveWith((states) {
                if (isTop && !topHoverEffect) return Colors.transparent;
                return translucent ? uncheckedInputAlphaColor(FluentTheme.of(context), states) :
                  ButtonThemeData.uncheckedInputColor(FluentTheme.of(context), states);
            });
        final newStates = states.toSet()..remove(ButtonStates.disabled);
        return tileColor.resolve(
            (selected && !isTop) ? {ButtonStates.hovering} : newStates,
        );
    }(),
    borderRadius: BorderRadius.circular(4.0),
),

Speaking of the Expander widget, it seems to have a black line border (on dark theme) similar to what I reported for the navigation bar, looks way better with white theme

[bdlukaa]

Speaking of the Expander widget, it seems to have a black line border (on dark theme) similar to what I reported for the navigation bar, looks way better with white theme

I try to replicate everything in the native Expander, and the middle bar is there as well.

[alesimula]

@bdlukaa I know but (and this might just depend on the 125% or higher scaling) the lines are less noticeable in the native Expander, so I think if you can't find a way to prevent the lines scaling up, using a colour closer to the background (like in the white theme) or a translucent black colour would make it look better (and actually closer to the original)

[alesimula]

@bdlukaa BTW I've modified your expander so it looks like the Windows 11 settings' expander

Feel free to kang it :P

https://github.com/alesimula/wsa_pacman/blob/main/lib/widget/fluent_expander.dart

[alesimula]

@bdlukaa I made a card widget using the expander as a base, and also updated the background color method (disabled color is now the same as the default color), again, I'd love to see that in this library :D

https://github.com/alesimula/wsa_pacman/blob/main/lib/widget/fluent_card.dart

clickable

non-clickable

disabled