UI elements improvements

[alesimula]

Some UI elements should have a translucent background instead of an opaque colour as this can lead to some unpleasant results (some examples below):

^ Buttons only looks good on top of the default background; the alerts should also make use of translucent colors

^ text box (unselected and selected) is another example where this change would be appreciated

By applying this theme to the buttons I managed to make them appear identical to Windows' fluent UI buttons but using translucency (I also removed the shadow as it unfortunately also renders behind the widget):

buttonTheme: ButtonThemeData(
              defaultButtonStyle: ButtonStyle(
                shadowColor: ButtonState.all(Colors.transparent),
                border: ButtonState.resolveWith((states) {
                  if (isLight) {
                    if (states.isDisabled) return const BorderSide(width: 0.5, color: ColorConst.withOpacity(0x212121, 0.12));
                    if (states.isNone || (states.isHovering && !states.isDisabled && !states.isPressing)) return const BorderSide(width: 0.5, color: ColorConst.withOpacity(0x212121, 0.22));
                    else return const BorderSide(width: 0.5, color: ColorConst.withOpacity(0x212121, 0.07));
                  }
                  else {
                    if (states.isDisabled) return const BorderSide(width: 0.5, color: ColorConst.withOpacity(0xf0f0f0, 0.05));
                    if (states.isNone || (states.isHovering && !states.isPressing)) return const BorderSide(width: 0.5, color: ColorConst.withOpacity(0xf0f0f0, 0.035));
                    else return const BorderSide(width: 0.5, color: ColorConst.withOpacity(0xf0f0f0, 0.07));
                  }
                }),
                backgroundColor: ButtonState.resolveWith((states) {
                  if (isLight) {
                    if (states.isDisabled) return const ColorConst.withOpacity(0xf9f9f9, 0.045);
                    if (states.isPressing) return const ColorConst.withOpacity(0xf0f0f0, 0.4);
                    if (states.isHovering) return const ColorConst.withOpacity(0xf9f9f9, 0.65);
                    return const ColorConst.withOpacity(0xFFFFFF, 0.8);
                  }
                  else {
                    if (states.isDisabled) return const ColorConst.withOpacity(0xFFFFFF, 0.045);
                    if (states.isPressing) return const ColorConst.withOpacity(0xFFFFFF, 0.03);
                    if (states.isHovering) return const ColorConst.withOpacity(0xFFFFFF, 0.08);
                    return const ColorConst.withOpacity(0xFFFFFF, 0.055);
                  }
                })
              ) ,
),

^ Much better :P

EDIT: BTW ColorConst is just a simple utility class I made in order to be able to declare a const Color using the hex + an opacity value, this might also be useful

class ColorConst extends Color {
  const ColorConst.withOpacity(int value, double opacity) : super(
    ( (((opacity * 0xff ~/ 1) & 0xff) << 24) | ((0x00ffffff & value)) ) & 0xFFFFFFFF);
}

EDIT2: I've seen you've implemented some changes I suggested for the expander; hovever, I think either the whole button should change its background color (as per my suggested change), or the trailing icon, but not both of them (maybe with a flag to enable either behaviour)

EDIT3: The trailing button inside TextBox seems to be missing an pressed color (it's the same as the hovering color for some reason)

[henry2man]

@bdlukaa Related to this (Maybe a new issue?), I think we have some visual incoherences between Combobox and TextBox: if you place one Combobox and a TextBox side by side, the Combobox is a few pixels taller than the TextBox. Here are some screenshots:

2x Combobox + 1x Textbox:

2x Combobox + 1x Textbox focused:

EDIT: Probably is there additional margins/paddings, I've appreciated some side space placing all widgets in a Wrap container (notice the slight difference in the left side):

[henry2man]

@bdlukaa #125 (comment) -> FIXED using pluto_grid: 3.9.1, thanks!