Implement hoverColor

Frezyx · Aug 3, 2022 · ee715cc · ee715cc
1 parent c1591b0
commit ee715cc
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -85,6 +85,7 @@ class ExampleSidebarX extends StatelessWidget {
           color: canvasColor,
           borderRadius: BorderRadius.circular(20),
         ),
+        hoverColor: Colors.white.withOpacity(0.5),
         textStyle: TextStyle(color: Colors.white.withOpacity(0.7)),
         selectedTextStyle: const TextStyle(color: Colors.white),
         itemTextPadding: const EdgeInsets.only(left: 30),

diff --git a/lib/src/theme/sidebarx_theme.dart b/lib/src/theme/sidebarx_theme.dart
@@ -19,6 +19,7 @@ class SidebarXTheme {
     this.selectedItemPadding,
     this.itemTextPadding,
     this.selectedItemTextPadding,
+    this.hoverColor,
   });
 
   /// [SidebarX] width
@@ -72,6 +73,10 @@ class SidebarXTheme {
   /// Selected item [SidebarXItem] text padding
   final EdgeInsets? selectedItemTextPadding;
 
+  /// Background color of [SidebarXItem] when the mouse
+  /// cursor hover over an item
+  final Color? hoverColor;
+
   /// Method to get default flutter theme settings
   SidebarXTheme mergeFlutterTheme(BuildContext context) {
     final theme = Theme.of(context);
@@ -95,6 +100,7 @@ class SidebarXTheme {
       selectedItemPadding: selectedItemPadding,
       itemTextPadding: itemTextPadding,
       selectedItemTextPadding: selectedItemTextPadding,
+      hoverColor: theme.hoverColor,
     );
     return mergedTheme;
   }
@@ -123,6 +129,7 @@ class SidebarXTheme {
       itemDecoration: itemDecoration ?? theme.itemDecoration,
       selectedItemDecoration:
           selectedItemDecoration ?? theme.selectedItemDecoration,
+      hoverColor: hoverColor ?? theme.hoverColor,
     );
   }
 
@@ -145,6 +152,7 @@ class SidebarXTheme {
     EdgeInsets? selectedItemPadding,
     EdgeInsets? itemTextPadding,
     EdgeInsets? selectedItemTextPadding,
+    Color? hoverColor,
   }) {
     return SidebarXTheme(
       width: width ?? this.width,
@@ -166,6 +174,7 @@ class SidebarXTheme {
       itemTextPadding: itemTextPadding ?? this.itemTextPadding,
       selectedItemTextPadding:
           selectedItemTextPadding ?? this.selectedItemTextPadding,
+      hoverColor: hoverColor ?? this.hoverColor,
     );
   }
 }
diff --git a/lib/src/widgets/sidebarx_cell.dart b/lib/src/widgets/sidebarx_cell.dart
@@ -25,6 +25,7 @@ class SidebarXCell extends StatefulWidget {
 
 class _SidebarXCellState extends State<SidebarXCell> {
   late Animation<double> _animation;
+  var _hovered = false;
 
   @override
   void initState() {
@@ -52,12 +53,14 @@ class _SidebarXCellState extends State<SidebarXCell> {
         widget.selected ? theme.selectedItemTextPadding : theme.itemTextPadding;
 
     return MouseRegion(
-      onEnter: (e) => debugPrint(e.toString()),
-      onExit: (e) => debugPrint(e.toString()),
+      onEnter: (_) => _onEnteredCellZone(),
+      onExit: (_) => _onExitCellZone(),
       child: GestureDetector(
         onTap: widget.onTap,
         child: Container(
-          decoration: decoration,
+          decoration: decoration?.copyWith(
+            color: _hovered ? theme.hoverColor : null,
+          ),
           padding: padding ?? const EdgeInsets.all(8),
           margin: margin ?? const EdgeInsets.all(4),
           child: Row(
@@ -100,6 +103,14 @@ class _SidebarXCellState extends State<SidebarXCell> {
       ),
     );
   }
+
+  void _onEnteredCellZone() {
+    setState(() => _hovered = true);
+  }
+
+  void _onExitCellZone() {
+    setState(() => _hovered = false);
+  }
 }
 
 class _Icon extends StatelessWidget {