Revert "Remove BottomNavigationBarItem.title deprecation" (#91930)
diff --git a/packages/flutter/lib/src/cupertino/bottom_tab_bar.dart b/packages/flutter/lib/src/cupertino/bottom_tab_bar.dart
index a22eb8f..cd01a9b 100644
--- a/packages/flutter/lib/src/cupertino/bottom_tab_bar.dart
+++ b/packages/flutter/lib/src/cupertino/bottom_tab_bar.dart
@@ -254,6 +254,7 @@
Expanded(
child: Center(child: active ? item.activeIcon : item.icon),
),
+ if (item.title != null) item.title!,
if (item.label != null) Text(item.label!),
];
}
diff --git a/packages/flutter/lib/src/material/bottom_navigation_bar.dart b/packages/flutter/lib/src/material/bottom_navigation_bar.dart
index c40ccbb..7f0999f 100644
--- a/packages/flutter/lib/src/material/bottom_navigation_bar.dart
+++ b/packages/flutter/lib/src/material/bottom_navigation_bar.dart
@@ -185,8 +185,9 @@
}) : assert(items != null),
assert(items.length >= 2),
assert(
+ items.every((BottomNavigationBarItem item) => item.title != null) ||
items.every((BottomNavigationBarItem item) => item.label != null),
- 'Every item must have a non-null label',
+ 'Every item must have a non-null title or label',
),
assert(0 <= currentIndex && currentIndex < items.length),
assert(elevation == null || elevation >= 0.0),
@@ -246,13 +247,13 @@
final double iconSize;
/// The color of the selected [BottomNavigationBarItem.icon] and
- /// [BottomNavigationBarItem.label].
+ /// [BottomNavigationBarItem.title].
///
/// If null then the [ThemeData.primaryColor] is used.
final Color? selectedItemColor;
/// The color of the unselected [BottomNavigationBarItem.icon] and
- /// [BottomNavigationBarItem.label]s.
+ /// [BottomNavigationBarItem.title]s.
///
/// If null then the [ThemeData.unselectedWidgetColor]'s color is used.
final Color? unselectedItemColor;
@@ -691,7 +692,7 @@
),
),
alignment: Alignment.bottomCenter,
- child: Text(item.label!),
+ child: item.title ?? Text(item.label!),
),
);
diff --git a/packages/flutter/lib/src/material/bottom_navigation_bar_theme.dart b/packages/flutter/lib/src/material/bottom_navigation_bar_theme.dart
index df0dd80..2aadba7 100644
--- a/packages/flutter/lib/src/material/bottom_navigation_bar_theme.dart
+++ b/packages/flutter/lib/src/material/bottom_navigation_bar_theme.dart
@@ -78,13 +78,13 @@
final IconThemeData? unselectedIconTheme;
/// The color of the selected [BottomNavigationBarItem.icon] and
- /// [BottomNavigationBarItem.label].
+ /// [BottomNavigationBarItem.title].
///
/// See [BottomNavigationBar.selectedItemColor].
final Color? selectedItemColor;
/// The color of the unselected [BottomNavigationBarItem.icon] and
- /// [BottomNavigationBarItem.label]s.
+ /// [BottomNavigationBarItem.title]s.
///
/// See [BottomNavigationBar.unselectedItemColor].
final Color? unselectedItemColor;
diff --git a/packages/flutter/lib/src/widgets/bottom_navigation_bar_item.dart b/packages/flutter/lib/src/widgets/bottom_navigation_bar_item.dart
index 41f1819..9303d6b 100644
--- a/packages/flutter/lib/src/widgets/bottom_navigation_bar_item.dart
+++ b/packages/flutter/lib/src/widgets/bottom_navigation_bar_item.dart
@@ -24,11 +24,17 @@
/// The argument [icon] should not be null and the argument [label] should not be null when used in a Material Design's [BottomNavigationBar].
const BottomNavigationBarItem({
required this.icon,
+ @Deprecated(
+ 'Use "label" instead, as it allows for an improved text-scaling experience. '
+ 'This feature was deprecated after v1.19.0.',
+ )
+ this.title,
this.label,
Widget? activeIcon,
this.backgroundColor,
this.tooltip,
}) : activeIcon = activeIcon ?? icon,
+ assert(label == null || title == null),
assert(icon != null);
/// The icon of the item.
@@ -61,6 +67,15 @@
/// * [BottomNavigationBarItem.icon], for a description of how to pair icons.
final Widget activeIcon;
+ /// The title of the item. If the title is not provided only the icon will be shown when not used in a Material Design [BottomNavigationBar].
+ ///
+ /// This field is deprecated, use [label] instead.
+ @Deprecated(
+ 'Use "label" instead, as it allows for an improved text-scaling experience. '
+ 'This feature was deprecated after v1.19.0.',
+ )
+ final Widget? title;
+
/// The text label for this [BottomNavigationBarItem].
///
/// This will be used to create a [Text] widget to put in the bottom navigation bar.
diff --git a/packages/flutter/test/cupertino/bottom_tab_bar_test.dart b/packages/flutter/test/cupertino/bottom_tab_bar_test.dart
index d8d781f..6bd33d4 100644
--- a/packages/flutter/test/cupertino/bottom_tab_bar_test.dart
+++ b/packages/flutter/test/cupertino/bottom_tab_bar_test.dart
@@ -429,7 +429,7 @@
semantics.dispose();
});
- testWidgets('Label of items should be nullable', (WidgetTester tester) async {
+ testWidgets('Title of items should be nullable', (WidgetTester tester) async {
final MemoryImage iconProvider = MemoryImage(Uint8List.fromList(kTransparentImage));
final List<int> itemsTapped = <int>[];
diff --git a/packages/flutter/test/material/bottom_navigation_bar_test.dart b/packages/flutter/test/material/bottom_navigation_bar_test.dart
index c71b62f..88cf921 100644
--- a/packages/flutter/test/material/bottom_navigation_bar_test.dart
+++ b/packages/flutter/test/material/bottom_navigation_bar_test.dart
@@ -28,11 +28,11 @@
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit),
- label: 'AC',
+ title: Text('AC'),
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm),
- label: 'Alarm',
+ title: Text('Alarm'),
),
],
onTap: (int index) {
@@ -1031,11 +1031,11 @@
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
- label: 'A',
+ title: Text('A'),
icon: Icon(Icons.ac_unit),
),
BottomNavigationBarItem(
- label: 'B',
+ title: Text('B'),
icon: Icon(Icons.battery_alert),
),
],
@@ -1046,7 +1046,7 @@
);
final RenderBox box = tester.renderObject(find.byType(BottomNavigationBar));
- expect(box.size.height, equals(56.0));
+ expect(box.size.height, equals(66.0));
});
testWidgets('BottomNavigationBar does not grow with textScaleFactor when labels are provided', (WidgetTester tester) async {
@@ -1216,9 +1216,9 @@
expect(find.byTooltip('C'), findsNothing);
});
- testWidgets('BottomNavigationBar limits width of tiles with long labels', (WidgetTester tester) async {
- final String longTextA = List<String>.generate(100, (int index) => 'A').toString();
- final String longTextB = List<String>.generate(100, (int index) => 'B').toString();
+ 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'));
await tester.pumpWidget(
MaterialApp(
@@ -1226,11 +1226,11 @@
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
- label: longTextA,
+ title: longTextA,
icon: const Icon(Icons.ac_unit),
),
BottomNavigationBarItem(
- label: longTextB,
+ title: longTextB,
icon: const Icon(Icons.battery_alert),
),
],
@@ -1242,9 +1242,9 @@
final RenderBox box = tester.renderObject(find.byType(BottomNavigationBar));
expect(box.size.height, equals(kBottomNavigationBarHeight));
- final RenderBox itemBoxA = tester.renderObject(find.text(longTextA));
+ final RenderBox itemBoxA = tester.renderObject(find.text(longTextA.data!));
expect(itemBoxA.size, equals(const Size(400.0, 14.0)));
- final RenderBox itemBoxB = tester.renderObject(find.text(longTextB));
+ final RenderBox itemBoxB = tester.renderObject(find.text(longTextB.data!));
expect(itemBoxB.size, equals(const Size(400.0, 14.0)));
});
@@ -1379,15 +1379,15 @@
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit),
- label: 'AC',
+ title: Text('AC'),
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm),
- label: 'Alarm',
+ title: Text('Alarm'),
),
BottomNavigationBarItem(
icon: Icon(Icons.hot_tub),
- label: 'Hot Tub',
+ title: Text('Hot Tub'),
),
],
),
@@ -1433,15 +1433,15 @@
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit),
- label: 'AC',
+ title: Text('AC'),
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm),
- label: 'Alarm',
+ title: Text('Alarm'),
),
BottomNavigationBarItem(
icon: Icon(Icons.hot_tub),
- label: 'Hot Tub',
+ title: Text('Hot Tub'),
),
],
),
@@ -1626,7 +1626,7 @@
}
});
- testWidgets('BottomNavigationBar item label should not be nullable', (WidgetTester tester) async {
+ testWidgets('BottomNavigationBar item title should not be nullable', (WidgetTester tester) async {
expect(() {
MaterialApp(
home: Scaffold(
@@ -1732,11 +1732,11 @@
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit),
- label: 'Red',
+ title: Text('Red'),
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm),
- label: 'Green',
+ title: Text('Green'),
),
],
),
@@ -1775,11 +1775,11 @@
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit),
- label: 'Red',
+ title: Text('Red'),
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm),
- label: 'Green',
+ title: Text('Green'),
),
],
),
@@ -1817,8 +1817,8 @@
child: BottomNavigationBar(
mouseCursor: SystemMouseCursors.text,
items: const <BottomNavigationBarItem>[
- BottomNavigationBarItem(icon: Icon(Icons.ac_unit), label: 'AC'),
- BottomNavigationBarItem(icon: Icon(Icons.access_alarm), label: 'Alarm'),
+ BottomNavigationBarItem(icon: Icon(Icons.ac_unit), title: Text('AC')),
+ BottomNavigationBarItem(icon: Icon(Icons.access_alarm), title: Text('Alarm')),
],
),
),
@@ -1842,8 +1842,8 @@
cursor: SystemMouseCursors.forbidden,
child: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
- BottomNavigationBarItem(icon: Icon(Icons.ac_unit), label: 'AC'),
- BottomNavigationBarItem(icon: Icon(Icons.access_alarm), label: 'Alarm'),
+ BottomNavigationBarItem(icon: Icon(Icons.ac_unit), title: Text('AC')),
+ BottomNavigationBarItem(icon: Icon(Icons.access_alarm), title: Text('Alarm')),
],
),
),
@@ -1875,8 +1875,8 @@
child: BottomNavigationBar(
enableFeedback: enableFeedback,
items: const <BottomNavigationBarItem>[
- BottomNavigationBarItem(icon: Icon(Icons.ac_unit), label: 'AC'),
- BottomNavigationBarItem(icon: Icon(Icons.access_alarm), label: 'Alarm'),
+ BottomNavigationBarItem(icon: Icon(Icons.ac_unit), title: Text('AC')),
+ BottomNavigationBarItem(icon: Icon(Icons.access_alarm), title: Text('Alarm')),
],
),
),
@@ -2015,7 +2015,9 @@
testWidgets('BottomNavigationBar default layout', (WidgetTester tester) async {
final Key icon0 = UniqueKey();
+ final Key title0 = UniqueKey();
final Key icon1 = UniqueKey();
+ final Key title1 = UniqueKey();
await tester.pumpWidget(
MaterialApp(
@@ -2026,11 +2028,11 @@
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: SizedBox(key: icon0, width: 200, height: 10),
- label: 'Title0',
+ title: SizedBox(key: title0, width: 200, height: 10),
),
BottomNavigationBarItem(
icon: SizedBox(key: icon1, width: 200, height: 10),
- label: 'Title1',
+ title: SizedBox(key: title1, width: 200, height: 10),
),
],
),
@@ -2045,24 +2047,25 @@
// The height of the navigation bar is kBottomNavigationBarHeight = 56
// The top of the navigation bar is 600 - 56 = 544
// The top and bottom of the selected item is defined by its centered icon/label column:
- // top = 544 + ((56 - (10 + 10)) / 2) = 562
+ // top = 544 - (56 - (10 + 10)) / 2 = 562
// bottom = top + 10 + 10 = 582
- expect(tester.getRect(find.byKey(icon0)).top, 560.0);
- expect(tester.getRect(find.text('Title0')).bottom, 584.0);
+ expect(tester.getRect(find.byKey(icon0)).top, 562);
+ expect(tester.getRect(find.byKey(title0)).bottom, 582);
- // The items are padded horizontally according to
- // MainAxisAlignment.spaceAround. Left/right padding is:
- // 800 - (200 * 2) / 4 = 100
- // The layout of the unselected item's label is slightly different; not
- // checking that here.
- expect(tester.getRect(find.text('Title0')), const Rect.fromLTRB(158.0, 570.0, 242.0, 584.0));
- expect(tester.getRect(find.byKey(icon0)), const Rect.fromLTRB(100.0, 560.0, 300.0, 570.0));
- expect(tester.getRect(find.byKey(icon1)), const Rect.fromLTRB(500.0, 560.0, 700.0, 570.0));
+ // The items are horizontal padded according to
+ // MainAxisAlignment.spaceBetween Left/right padding is 800 - (200
+ // * 4) / 4 = 100. The layout of the unselected item's title is
+ // slightly different; not checking that here.
+ expect(tester.getRect(find.byKey(title0)), const Rect.fromLTRB(100, 572, 300, 582));
+ expect(tester.getRect(find.byKey(icon0)), const Rect.fromLTRB(100, 562, 300, 572));
+ expect(tester.getRect(find.byKey(icon1)), const Rect.fromLTRB(500, 562, 700, 572));
});
testWidgets('BottomNavigationBar centered landscape layout', (WidgetTester tester) async {
final Key icon0 = UniqueKey();
+ final Key title0 = UniqueKey();
final Key icon1 = UniqueKey();
+ final Key title1 = UniqueKey();
await tester.pumpWidget(
MaterialApp(
@@ -2074,11 +2077,11 @@
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: SizedBox(key: icon0, width: 200, height: 10),
- label: 'Title0',
+ title: SizedBox(key: title0, width: 200, height: 10),
),
BottomNavigationBarItem(
icon: SizedBox(key: icon1, width: 200, height: 10),
- label: 'Title1',
+ title: SizedBox(key: title1, width: 200, height: 10),
),
],
),
@@ -2091,23 +2094,22 @@
expect(tester.getSize(find.byType(BottomNavigationBar)), const Size(800, kBottomNavigationBarHeight));
expect(tester.getRect(find.byType(BottomNavigationBar)), const Rect.fromLTRB(0, 600 - kBottomNavigationBarHeight, 800, 600));
- // The items are laid out as in the default case, within width = 600
+ // The items are laid out as in the default case, within width=600
// (the "portrait" width) and the result is centered with the
- // landscape width = 800.
- // So item 0's left edges are:
- // ((800 - 600) / 2) + ((600 - 400) / 4) = 150.
- // Item 1's right edge is:
- // 800 - 150 = 650
- // The layout of the unselected item's label is slightly different; not
- // checking that here.
- expect(tester.getRect(find.text('Title0')), const Rect.fromLTRB(208.0, 570.0, 292.0, 584.0));
- expect(tester.getRect(find.byKey(icon0)), const Rect.fromLTRB(150.0, 560.0, 350.0, 570.0));
- expect(tester.getRect(find.byKey(icon1)), const Rect.fromLTRB(450.0, 560.0, 650.0, 570.0));
+ // landscape width=800. So item 0's left edges are (800 - 600) / 2 +
+ // (600 - 400) / 4 = 150. Item 1's right edge is 800 - 150 =
+ // 650. The layout of the unselected item's title is slightly
+ // different; not checking that here.
+ expect(tester.getRect(find.byKey(title0)), const Rect.fromLTRB(150.0, 572.0, 350.0, 582.0));
+ expect(tester.getRect(find.byKey(icon0)), const Rect.fromLTRB(150, 562, 350, 572));
+ expect(tester.getRect(find.byKey(icon1)), const Rect.fromLTRB(450, 562, 650, 572));
});
testWidgets('BottomNavigationBar linear landscape layout', (WidgetTester tester) async {
final Key icon0 = UniqueKey();
+ final Key title0 = UniqueKey();
final Key icon1 = UniqueKey();
+ final Key title1 = UniqueKey();
await tester.pumpWidget(
MaterialApp(
@@ -2119,11 +2121,11 @@
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: SizedBox(key: icon0, width: 100, height: 20),
- label: 'Title0',
+ title: SizedBox(key: title0, width: 100, height: 20),
),
BottomNavigationBarItem(
icon: SizedBox(key: icon1, width: 100, height: 20),
- label: 'Title1',
+ title: SizedBox(key: title1, width: 100, height: 20),
),
],
),
@@ -2137,12 +2139,12 @@
expect(tester.getRect(find.byType(BottomNavigationBar)), const Rect.fromLTRB(0, 600 - kBottomNavigationBarHeight, 800, 600));
// The items are laid out as in the default case except each
- // item's icon/label is arranged in a row, with 8 pixels in
- // between the icon and label. The layout of the unselected
- // item's label is slightly different; not checking that here.
- expect(tester.getRect(find.text('Title0')), const Rect.fromLTRB(212.0, 565.0, 296.0, 579.0));
- expect(tester.getRect(find.byKey(icon0)), const Rect.fromLTRB(104.0, 562.0, 204.0, 582.0));
- expect(tester.getRect(find.byKey(icon1)), const Rect.fromLTRB(504.0, 562.0, 604.0, 582.0));
+ // item's icon/title is arranged in a row, with 8 pixels in
+ // between the icon and title. The layout of the unselected
+ // item's title is slightly different; not checking that here.
+ expect(tester.getRect(find.byKey(title0)), const Rect.fromLTRB(204, 562, 304, 582));
+ expect(tester.getRect(find.byKey(icon0)), const Rect.fromLTRB(96, 562, 196, 582));
+ expect(tester.getRect(find.byKey(icon1)), const Rect.fromLTRB(496, 562, 596, 582));
});
}
