Merge pull request #20 from BranislavMateas/feature/tooltip-over-menu

[FEATURE] Seeing itemName in tooltip when hovering over the item
Jamalianpour · Aug 3, 2022 · 5fbd119 · 5fbd119
2 parents 238b41a + 479ff31
commit 5fbd119
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 26 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -49,6 +49,7 @@ class _MyHomePageState extends State<MyHomePage> {
             //   print(mode);
             // },
             style: SideMenuStyle(
+              // showTooltipOverItemsName: true,
               displayMode: SideMenuDisplayMode.auto,
               hoverColor: Colors.blue[100],
               selectedColor: Colors.lightBlue,
@@ -95,6 +96,7 @@ class _MyHomePageState extends State<MyHomePage> {
                   '3',
                   style: TextStyle(color: Colors.white),
                 ),
+                // tooltipContent: "Home",
               ),
               SideMenuItem(
                 priority: 1,

diff --git a/lib/src/side_menu_item.dart b/lib/src/side_menu_item.dart
@@ -16,6 +16,7 @@ class SideMenuItem extends StatefulWidget {
     required this.priority,
     this.badgeContent,
     this.badgeColor,
+    this.tooltipContent,
   }) : super(key: key);
 
   /// A function that call when tap on [SideMenuItem]
@@ -41,6 +42,10 @@ class SideMenuItem extends StatefulWidget {
   /// Background color for badge
   final Color? badgeColor;
 
+  /// Content of the tooltip - if not filled, the [title] will
+  /// be used. [showTooltipOverItemsName] must be set to true.
+  final String? tooltipContent;
+
   @override
   _SideMenuItemState createState() => _SideMenuItemState();
 }
@@ -134,33 +139,39 @@ class _SideMenuItemState extends State<SideMenuItem> {
           child: ValueListenableBuilder(
             valueListenable: Global.displayModeState,
             builder: (context, value, child) {
-              return Padding(
-                padding: EdgeInsets.symmetric(
-                    vertical: value == SideMenuDisplayMode.compact ? 0 : 8),
-                child: Row(
-                  crossAxisAlignment: CrossAxisAlignment.center,
-                  children: [
-                    SizedBox(
-                      width: Global.style.itemInnerSpacing,
-                    ),
-                    _generateIcon(widget.icon),
-                    SizedBox(
-                      width: Global.style.itemInnerSpacing,
-                    ),
-                    if (value == SideMenuDisplayMode.open)
-                      Expanded(
-                        child: Text(
-                          widget.title,
-                          style: widget.priority == currentPage.ceil()
-                              ? const TextStyle(
-                                      fontSize: 17, color: Colors.black)
-                                  .merge(Global.style.selectedTitleTextStyle)
-                              : const TextStyle(
-                                      fontSize: 17, color: Colors.black54)
-                                  .merge(Global.style.unselectedTitleTextStyle),
-                        ),
+              return Tooltip(
+                message: (value == SideMenuDisplayMode.compact
+                    && Global.style.showTooltipOverItemsName)
+                    ? widget.tooltipContent ?? widget.title
+                    : "",
+                child: Padding(
+                  padding: EdgeInsets.symmetric(
+                      vertical: value == SideMenuDisplayMode.compact ? 0 : 8),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      SizedBox(
+                        width: Global.style.itemInnerSpacing,
                       ),
-                  ],
+                      _generateIcon(widget.icon),
+                      SizedBox(
+                        width: Global.style.itemInnerSpacing,
+                      ),
+                      if (value == SideMenuDisplayMode.open)
+                        Expanded(
+                          child: Text(
+                            widget.title,
+                            style: widget.priority == currentPage.ceil()
+                                ? const TextStyle(
+                                        fontSize: 17, color: Colors.black)
+                                    .merge(Global.style.selectedTitleTextStyle)
+                                : const TextStyle(
+                                        fontSize: 17, color: Colors.black54)
+                                    .merge(Global.style.unselectedTitleTextStyle),
+                          ),
+                        ),
+                    ],
+                  ),
                 ),
               );
             },

diff --git a/lib/src/side_menu_style.dart b/lib/src/side_menu_style.dart
@@ -54,6 +54,12 @@ class SideMenuStyle {
   /// Border Radius of menu item
   BorderRadius itemBorderRadius;
 
+  /// Property that will show user itemName in
+  /// Tooltip when they'll hover over the item
+  /// This property will only work if current
+  /// [SideMenuDisplayMode] is set compact
+  bool showTooltipOverItemsName;
+
   /// Style class to configure [SideMenu]
   SideMenuStyle({
     this.openSideMenuWidth = 300,
@@ -75,5 +81,6 @@ class SideMenuStyle {
     this.itemBorderRadius = const BorderRadius.all(
       Radius.circular(5.0),
     ),
+    this.showTooltipOverItemsName = false,
   });
 }