From 3d2d735ec5a9bd8456164a558fe29960045f6411 Mon Sep 17 00:00:00 2001 From: BranislavMateas Date: Wed, 3 Aug 2022 09:00:37 +0200 Subject: [PATCH 1/2] added feature to tooltip over item so you can see itemName in compact mode --- example/lib/main.dart | 1 + lib/src/side_menu_item.dart | 58 ++++++++++++++++++++---------------- lib/src/side_menu_style.dart | 7 +++++ 3 files changed, 40 insertions(+), 26 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 2ed8d2b..3b703df 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -49,6 +49,7 @@ class _MyHomePageState extends State { // print(mode); // }, style: SideMenuStyle( + // showTooltipOverItemsName: true, displayMode: SideMenuDisplayMode.auto, hoverColor: Colors.blue[100], selectedColor: Colors.lightBlue, diff --git a/lib/src/side_menu_item.dart b/lib/src/side_menu_item.dart index 4844771..7371031 100644 --- a/lib/src/side_menu_item.dart +++ b/lib/src/side_menu_item.dart @@ -134,33 +134,39 @@ class _SideMenuItemState extends State { 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.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 index 3815b30..9df1944 100644 --- 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, }); } From 479ff3185e21713ae798d98b2628d48acd86c411 Mon Sep 17 00:00:00 2001 From: BranislavMateas Date: Wed, 3 Aug 2022 16:07:04 +0200 Subject: [PATCH 2/2] added ability to add custom tooltip content --- example/lib/main.dart | 1 + lib/src/side_menu_item.dart | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 3b703df..d8f6f1b 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -96,6 +96,7 @@ class _MyHomePageState extends State { '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 index 7371031..929f410 100644 --- 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(); } @@ -137,7 +142,7 @@ class _SideMenuItemState extends State { return Tooltip( message: (value == SideMenuDisplayMode.compact && Global.style.showTooltipOverItemsName) - ? widget.title + ? widget.tooltipContent ?? widget.title : "", child: Padding( padding: EdgeInsets.symmetric(