Unverified Commit 04c104cc authored by Yash Johri's avatar Yash Johri Committed by GitHub

[BottomNavigationBar] Adds more control to ToolTip (#71079)

parent 7ce8f4ab
......@@ -397,6 +397,9 @@ class _BottomNavigationTile extends StatelessWidget {
// (or zero if the unselected icons are not any bigger than the selected icon).
final double unselectedIconDiff = math.max(unselectedIconSize - selectedIconSize, 0);
// The effective tool tip message to be shown on the BottomNavigationBarItem.
final String? effectiveTooltip = item.tooltip == '' ? null : item.tooltip ?? item.label;
// Defines the padding for the animating icons + labels.
//
// The animations go from "Unselected":
......@@ -487,9 +490,9 @@ class _BottomNavigationTile extends StatelessWidget {
),
);
if (item.label != null) {
if (effectiveTooltip != null) {
result = Tooltip(
message: item.label!,
message: effectiveTooltip,
preferBelow: false,
verticalOffset: selectedIconSize + selectedFontSize,
excludeFromSemantics: true,
......
......@@ -32,6 +32,7 @@ class BottomNavigationBarItem {
this.label,
Widget? activeIcon,
this.backgroundColor,
this.tooltip,
}) : activeIcon = activeIcon ?? icon,
assert(label == null || title == null),
assert(icon != null);
......@@ -77,9 +78,7 @@ class BottomNavigationBarItem {
/// The text label for this [BottomNavigationBarItem].
///
/// This will be used to create a [Text] widget to put in the bottom navigation bar,
/// and in Material Design [BottomNavigationBar]s, this will be used to display
/// a tooltip on long press of an item in the [BottomNavigationBar].
/// This will be used to create a [Text] widget to put in the bottom navigation bar.
final String? label;
/// The color of the background radial animation for material [BottomNavigationBar].
......@@ -96,4 +95,13 @@ class BottomNavigationBarItem {
/// * [Icon.color] and [ImageIcon.color] to control the foreground color of
/// the icons themselves.
final Color? backgroundColor;
/// The text to display in the tooltip for this [BottomNavigationBarItem], when
/// the user long presses the item.
///
/// The [Tooltip] will only appear on an item in a Material design [BottomNavigationBar], and
/// when the string is not empty.
///
/// Defaults to null, in which case the [label] text will be used.
final String? tooltip;
}
......@@ -1121,6 +1121,7 @@ void main() {
BottomNavigationBarItem(
label: label,
icon: Icon(Icons.ac_unit),
tooltip: label,
),
BottomNavigationBarItem(
label: 'B',
......@@ -1151,6 +1152,45 @@ void main() {
expect(tester.getSize(find.text(label).last), equals(const Size(168.0, 56.0)));
});
testWidgets('Different behaviour of tool tip in BottomNavigationBarItem', (WidgetTester tester) async {
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
label: 'A',
tooltip: 'A tooltip',
icon: Icon(Icons.ac_unit),
),
BottomNavigationBarItem(
label: 'B',
icon: Icon(Icons.battery_alert),
),
BottomNavigationBarItem(
label: 'C',
icon: Icon(Icons.cake),
tooltip: '',
),
],
),
),
),
);
expect(find.text('A'), findsOneWidget);
await tester.longPress(find.text('A'));
expect(find.byTooltip('A tooltip'), findsOneWidget);
expect(find.text('B'), findsOneWidget);
await tester.longPress(find.text('B'));
expect(find.byTooltip('B'), findsOneWidget);
expect(find.text('C'), findsOneWidget);
await tester.longPress(find.text('C'));
expect(find.byTooltip('C'), findsNothing);
});
testWidgets('BottomNavigationBar limits width of tiles with long titles', (WidgetTester tester) async {
final Text longTextA = Text(''.padLeft(100, 'A'));
final Text longTextB = Text(''.padLeft(100, 'B'));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment