Added Tooltip to BottomNavyBar.items

CHANGELOG.md

@@ -1,6 +1,7 @@
 # 7.0.0
 
 - Added customizations options for text and background colors of the bottom navigation bar item as `activeBackgroundColor`, `activeTextColor`.
+- Added support for `tooltipText` to show a tooltip when the item is long pressed.
 
 ## 6.1.0
 

README.md

@@ -43,6 +43,7 @@ The navigation bar uses your current theme, but you are free to customize it.
 - `textAlign` - property to change the alignment of the item title
 - `activeBackgroundColor` - the active item's background color
 - `activeTextColor` - the active item's text color
+- `tooltipText` - the tooltip text that will appear when the item is long pressed
 
 ## Getting Started
 

example/lib/main.dart

@@ -62,7 +62,7 @@ class _MyHomePageState extends State<MyHomePage> {
             icon: Icon(Icons.apps),
             title: Text('Home'),
             activeColor: Colors.red,
-            textAlign: TextAlign.center,
+            textAlign: TextAlign.center
           ),
           BottomNavyBarItem(
             icon: Icon(Icons.people),

lib/bottom_navy_bar.dart

@@ -166,7 +166,7 @@ class _ItemWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Semantics(
+    Semantics semantic = Semantics(
       container: true,
       selected: isSelected,
       child: AnimatedContainer(
@@ -253,6 +253,12 @@ class _ItemWidget extends StatelessWidget {
         ),
       ),
     );
+    return item.tooltipText == null
+        ? semantic
+        : Tooltip(
+      message: item.tooltipText!,
+      child: semantic,
+    );
   }
 }
 
@@ -266,6 +272,7 @@ class BottomNavyBarItem {
     this.inactiveColor,
     this.activeTextColor,
     this.activeBackgroundColor,
+    this.tooltipText,
   });
 
   /// Defines this item's icon which is placed in the right side of the [title].
@@ -295,4 +302,6 @@ class BottomNavyBarItem {
   ///
   /// Will fallback to [activeColor] with opacity 0.2 when null
   final Color? activeBackgroundColor;
+  /// Will show a tooltip for the item if provided.
+  final String? tooltipText;
 }

test/bottom_navy_bar_test.dart

@@ -10,6 +10,7 @@ final List<BottomNavyBarItem> dummyItems = <BottomNavyBarItem>[
     textAlign: TextAlign.center,
     activeTextColor: Colors.white,
     activeBackgroundColor: Colors.red,
+    tooltipText: 'Item 1',
   ),
   BottomNavyBarItem(
     icon: Icon(Icons.people),
@@ -150,4 +151,18 @@ void main() {
     expect(bottomNavyBar.items[0].activeTextColor, Colors.white);
     expect(bottomNavyBar.items[0].activeBackgroundColor, Colors.red);
   });
+
+  testWidgets('should show a tooltip message when tooltipText is not null', (WidgetTester tester) async {
+    await tester.pumpWidget(
+        buildNavyBarBoilerplate(
+          onItemSelected: onItemSelected,
+        ),
+    );
+
+    final BottomNavyBar bottomNavyBar = tester.firstWidget<BottomNavyBar>(find.byType(BottomNavyBar));
+
+    expect(bottomNavyBar.items[0].tooltipText, 'Item 1');
+    // if tooltipText is null, tooltip should be null
+    expect(bottomNavyBar.items[1].tooltipText, null);
+  });
 }