feat(HomePage): added custom tab

SethCohen · Mar 28, 2023 · 28a7fd1 · 28a7fd1
1 parent c63194e
commit 28a7fd1
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 15 deletions.
diff --git a/src/lib/common/widgets/custom_tab.dart b/src/lib/common/widgets/custom_tab.dart
@@ -0,0 +1,41 @@
+import 'package:asl/common/themes/comfy_theme.dart';
+import 'package:flutter/material.dart';
+
+class CustomTab extends StatelessWidget {
+  final String message;
+  final IconData icon;
+
+  const CustomTab({
+    super.key,
+    required this.message,
+    required this.icon,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final ValueNotifier<bool> isHoveredOrFocused = ValueNotifier(false);
+
+    return Focus(
+      onFocusChange: (isFocused) => isHoveredOrFocused.value = isFocused,
+      child: MouseRegion(
+        onEnter: (_) => isHoveredOrFocused.value = true,
+        onExit: (_) => isHoveredOrFocused.value = false,
+        child: ValueListenableBuilder<bool>(
+          valueListenable: isHoveredOrFocused,
+          builder: (context, isHovered, _) {
+            return Tooltip(
+              message: message,
+              child: Tab(
+                icon: isHovered
+                    ? Icon(icon,
+                        color:
+                            Theme.of(context).extension<CustomPalette>()!.hover)
+                    : Icon(icon),
+              ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+}
diff --git a/src/lib/features/home/home_page.dart b/src/lib/features/home/home_page.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import '../../common/utils/data_provider.dart';
+import '../../common/widgets/custom_tab.dart';
 import '../creator/creator_page.dart';
 import '../dictionary/dictionary_page.dart';
 import '../lesson/lessons_list_page.dart';
@@ -42,21 +43,26 @@ class _HomePageState extends State<HomePage> {
                     dividerColor: Colors.transparent,
                     isScrollable: true,
                     tabs: <Widget>[
-                      Tooltip(
-                          message: 'Lessons',
-                          child: Tab(icon: Icon(Icons.school))),
-                      Tooltip(
-                          message: 'Review',
-                          child: Tab(icon: Icon(Icons.history))),
-                      Tooltip(
-                          message: 'Dictionary',
-                          child: Tab(icon: Icon(Icons.find_in_page))),
-                      Tooltip(
-                          message: 'Creator',
-                          child: Tab(icon: Icon(Icons.design_services))),
-                      Tooltip(
-                          message: 'Profile',
-                          child: Tab(icon: Icon(Icons.account_circle))),
+                      CustomTab(
+                        message: 'Lessons',
+                        icon: Icons.school,
+                      ),
+                      CustomTab(
+                        message: 'Review',
+                        icon: Icons.history,
+                      ),
+                      CustomTab(
+                        message: 'Dictionary',
+                        icon: Icons.find_in_page,
+                      ),
+                      CustomTab(
+                        message: 'Creator',
+                        icon: Icons.design_services,
+                      ),
+                      CustomTab(
+                        message: 'Profile',
+                        icon: Icons.account_circle,
+                      ),
                     ],
                   ),
                 ],