- edited description
Hover color between web and mobile is different
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),
);
Comments (7)
-
reporter -
reporter 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 ofhoverColor: Colors.blue,
we might want to set this dynamically using the Theme class. -
reporter 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.
-
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!
-
reporter 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
-
Use conditional themes:
final mobileTheme = TreeViewTheme(); final chromeTheme = TreeViewTheme(); TreeViewTheme _treeViewTheme = kIsWeb? chromeTheme : mobileTheme;
-
- changed status to resolved
Fixes issue #33. Fixed NodeExpander size issue Fixes issue
#29. Updated code to use proper hover color→ <<cset 5c022ed945d5>>
- Log in to comment