Fix BottomNavigationBar label style text colors (#102638)

Author: TahaTesser

packages/flutter/lib/src/material/bottom_navigation_bar.dart

@@ -138,7 +138,7 @@ class BottomNavigationBar extends StatefulWidget {
   ///
   /// If [selectedLabelStyle].color and [unselectedLabelStyle].color values
   /// are non-null, they will be used instead of [selectedItemColor] and
-  /// [unselectedItemColor].
+  /// [unselectedItemColor] to style the label color.
   ///
   /// If custom [IconThemeData]s are used, you must provide both
   /// [selectedIconTheme] and [unselectedIconTheme], and both
@@ -384,7 +384,7 @@ class _BottomNavigationTile extends StatelessWidget {
     this.animation,
     this.iconSize, {
     this.onTap,
-    this.colorTween,
+    this.itemColorTween,
     this.flex,
     this.selected = false,
     required this.selectedLabelStyle,
@@ -410,7 +410,7 @@ class _BottomNavigationTile extends StatelessWidget {
   final Animation<double> animation;
   final double iconSize;
   final VoidCallback? onTap;
-  final ColorTween? colorTween;
+  final ColorTween? itemColorTween;
   final double? flex;
   final bool selected;
   final IconThemeData? selectedIconTheme;
@@ -513,7 +513,7 @@ class _BottomNavigationTile extends StatelessWidget {
         child: _Tile(
           layout: layout,
           icon: _TileIcon(
-            colorTween: colorTween!,
+            itemColorTween: itemColorTween!,
             animation: animation,
             iconSize: iconSize,
             selected: selected,
@@ -522,7 +522,7 @@ class _BottomNavigationTile extends StatelessWidget {
             unselectedIconTheme: unselectedIconTheme,
           ),
           label: _Label(
-            colorTween: colorTween!,
+            itemColorTween: itemColorTween!,
             animation: animation,
             item: item,
             selectedLabelStyle: selectedLabelStyle,
@@ -602,7 +602,7 @@ class _Tile extends StatelessWidget {
 
 class _TileIcon extends StatelessWidget {
   const _TileIcon({
-    required this.colorTween,
+    required this.itemColorTween,
     required this.animation,
     required this.iconSize,
     required this.selected,
@@ -612,7 +612,7 @@ class _TileIcon extends StatelessWidget {
   }) : assert(selected != null),
        assert(item != null);
 
-  final ColorTween colorTween;
+  final ColorTween itemColorTween;
   final Animation<double> animation;
   final double iconSize;
   final bool selected;
@@ -622,7 +622,7 @@ class _TileIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final Color? iconColor = colorTween.evaluate(animation);
+    final Color? iconColor = itemColorTween.evaluate(animation);
     final IconThemeData defaultIconTheme = IconThemeData(
       color: iconColor,
       size: iconSize,
@@ -646,22 +646,22 @@ class _TileIcon extends StatelessWidget {
 
 class _Label extends StatelessWidget {
   const _Label({
-    required this.colorTween,
+    required this.itemColorTween,
     required this.animation,
     required this.item,
     required this.selectedLabelStyle,
     required this.unselectedLabelStyle,
     required this.showSelectedLabels,
     required this.showUnselectedLabels,
-  }) : assert(colorTween != null),
+  }) : assert(itemColorTween != null),
        assert(animation != null),
        assert(item != null),
        assert(selectedLabelStyle != null),
        assert(unselectedLabelStyle != null),
        assert(showSelectedLabels != null),
        assert(showUnselectedLabels != null);
 
-  final ColorTween colorTween;
+  final ColorTween itemColorTween;
   final Animation<double> animation;
   final BottomNavigationBarItem item;
   final TextStyle selectedLabelStyle;
@@ -679,10 +679,16 @@ class _Label extends StatelessWidget {
       selectedLabelStyle,
       animation.value,
     )!;
+    final ColorTween labelColor = ColorTween(
+      begin: unselectedLabelStyle.color
+        ?? itemColorTween.begin,
+      end: selectedLabelStyle.color
+        ?? itemColorTween.end,
+    );
     Widget text = DefaultTextStyle.merge(
       style: customStyle.copyWith(
         fontSize: selectedFontSize,
-        color: colorTween.evaluate(animation),
+        color: labelColor.evaluate(animation),
       ),
       // The font size should grow here when active, but because of the way
       // font rendering works, it doesn't grow smoothly if we just animate
@@ -923,10 +929,10 @@ class _BottomNavigationBarState extends State<BottomNavigationBar> with TickerPr
         break;
     }
 
-    final ColorTween colorTween;
+    final ColorTween itemColorTween;
     switch (_effectiveType) {
       case BottomNavigationBarType.fixed:
-        colorTween = ColorTween(
+        itemColorTween = ColorTween(
           begin: widget.unselectedItemColor
             ?? bottomTheme.unselectedItemColor
             ?? themeData.unselectedWidgetColor,
@@ -937,7 +943,7 @@ class _BottomNavigationBarState extends State<BottomNavigationBar> with TickerPr
         );
         break;
       case BottomNavigationBarType.shifting:
-        colorTween = ColorTween(
+        itemColorTween = ColorTween(
           begin: widget.unselectedItemColor
             ?? bottomTheme.unselectedItemColor
             ?? themeData.colorScheme.surface,
@@ -971,7 +977,7 @@ class _BottomNavigationBarState extends State<BottomNavigationBar> with TickerPr
         onTap: () {
           widget.onTap?.call(i);
         },
-        colorTween: colorTween,
+        itemColorTween: itemColorTween,
         flex: _evaluateFlex(_animations[i]),
         selected: i == widget.currentIndex,
         showSelectedLabels: widget.showSelectedLabels ?? bottomTheme.showSelectedLabels ?? true,

packages/flutter/test/material/bottom_navigation_bar_test.dart

@@ -140,8 +140,10 @@ void main() {
   });
 
   testWidgets('Custom selected and unselected font styles', (WidgetTester tester) async {
-    const TextStyle selectedTextStyle = TextStyle(fontWeight: FontWeight.w200, fontSize: 18.0);
-    const TextStyle unselectedTextStyle = TextStyle(fontWeight: FontWeight.w600, fontSize: 12.0);
+    const Color selectedTextColor = Color(0xff00ff00);
+    const Color unselectedTextColor = Color(0xff0000ff);
+    const TextStyle selectedTextStyle = TextStyle(color: selectedTextColor, fontWeight: FontWeight.w200, fontSize: 18.0);
+    const TextStyle unselectedTextStyle = TextStyle(color: unselectedTextColor, fontWeight: FontWeight.w600, fontSize: 12.0);
 
     await tester.pumpWidget(
         MaterialApp(
@@ -167,8 +169,10 @@ void main() {
 
     final TextStyle selectedFontStyle = tester.renderObject<RenderParagraph>(find.text('AC')).text.style!;
     final TextStyle unselectedFontStyle = tester.renderObject<RenderParagraph>(find.text('Alarm')).text.style!;
+    expect(selectedFontStyle.color, equals(selectedTextColor));
     expect(selectedFontStyle.fontSize, equals(selectedTextStyle.fontSize));
     expect(selectedFontStyle.fontWeight, equals(selectedTextStyle.fontWeight));
+    expect(unselectedFontStyle.color, equals(unselectedTextColor));
     expect(
       tester.firstWidget<Transform>(find.ancestor(of: find.text('Alarm'), matching: find.byType(Transform))).transform,
       equals(Matrix4.diagonal3(Vector3.all(unselectedTextStyle.fontSize! / selectedTextStyle.fontSize!))),