Hover color between web and mobile is different

[Albert-Jan Plate]

Thanks for your continued work on this awesome package. Currently, I’m preparing my code to run on mobile and on the web (Chrome). However, the “hover” color is different on both platforms. On Chrome, there is even a different color for an icon that can expand and one which cannot.

Below is my styling of the current theme settings.

TreeViewTheme _treeViewTheme = TreeViewTheme(
      expanderTheme: ExpanderThemeData(
        type: ExpanderType.chevron,
        modifier: ExpanderModifier.none,
        position: ExpanderPosition.start,
        color: Colors.grey.shade700,
        size: 24,
      ),
      labelStyle: TextStyle(
        fontFamily: 'SFProDisplayRegular',
        fontSize: 16.0,
      ),
      parentLabelStyle: TextStyle(
        fontFamily: 'SFProDisplayRegular',
        fontSize: 16,
      ),
      iconTheme: IconThemeData(
        size: 18,
        color: Colors.grey.shade700,
      ),
      colorScheme: Theme.of(context).brightness == Brightness.light
          ? ColorScheme.light(
              primary: Colors.grey.shade700,
              primaryVariant: Colors.grey.shade700,
              onPrimary: Colors.grey.shade900,
              secondary: Theme.of(context).accentColor,
              onSecondary: Theme.of(context).accentColor,
              secondaryVariant: Theme.of(context).accentColor,
              surface: Colors.grey.shade700,
              onSurface: Colors.grey.shade700,
              background: Colors.transparent,
              onBackground: Colors.black)
          : ColorScheme.dark(
              primary: Colors.white,
              onPrimary: Colors.white,
              secondary: Theme.of(context).accentColor,
              onSecondary: Theme.of(context).accentColor,
              background: Colors.transparent,
              onSurface: Colors.grey.shade700,
              onBackground: Colors.white70),
    );

‌

[Albert-Jan Plate]

Been investigating this issue and found the problem. It looks like in tree_node.dart line number 215 in _buildNodeWidget() there is a fixed color of hoverColor: Colors.blue, we might want to set this dynamically using the Theme class.

[Albert-Jan Plate]

The difference between mobile and web had me wondering: apparently you can set 3 colors to hover: focus, hover and highlight. Hover is apparently only triggered on the web as the mouse hovers the InkWell and long-pressing an InkWell activates the highlight function. Simply removing the hoverColor resets it to the defaults just like the other 2 colors and fixes this issue.

[Kevin Armstrong]

I’ve applied the changes you mentioned but when I test, I am not seeing any hovering at all. I removed the hoverColor property from the InkWell to reset the default functionality. I will test this a little more before I check it in and publish.

‌

Thanks!

[Albert-Jan Plate]

Might be useful for testing: I’m testing on Chrome on a Mac

Edit: Please note that this only occurred on an item which is not expandable

[Gustav Gussi]

Use conditional themes:

‌

final mobileTheme = TreeViewTheme();
final chromeTheme = TreeViewTheme();
TreeViewTheme _treeViewTheme = kIsWeb? chromeTheme : mobileTheme;

‌

[Kevin Armstrong]

Fixes issue #33. Fixed NodeExpander size issue Fixes issue #29. Updated code to use proper hover color

→ <<cset 5c022ed945d5>>