Apply ListTile colors to leading and trailing text widgets (#73925)

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

@@ -1076,6 +1076,12 @@ class ListTile extends StatelessWidget {
       : style.copyWith(color: color);
   }
 
+  TextStyle _trailingAndLeadingTextStyle(ThemeData theme, ListTileTheme? tileTheme) {
+    final TextStyle style = theme.textTheme.bodyText2!;
+    final Color? color = _textColor(theme, tileTheme, style.color);
+    return style.copyWith(color: color);
+  }
+
   Color _tileBackgroundColor(ListTileTheme? tileTheme) {
     if (!selected) {
       if (tileColor != null)
@@ -1101,14 +1107,21 @@ class ListTile extends StatelessWidget {
     final ListTileTheme tileTheme = ListTileTheme.of(context);
 
     IconThemeData? iconThemeData;
-    if (leading != null || trailing != null)
+    TextStyle? leadingAndTrailingTextStyle;
+    if (leading != null || trailing != null) {
       iconThemeData = IconThemeData(color: _iconColor(theme, tileTheme));
+      leadingAndTrailingTextStyle = _trailingAndLeadingTextStyle(theme, tileTheme);
+    }
 
     Widget? leadingIcon;
     if (leading != null) {
-      leadingIcon = IconTheme.merge(
-        data: iconThemeData!,
-        child: leading!,
+      leadingIcon = AnimatedDefaultTextStyle(
+        style: leadingAndTrailingTextStyle!,
+        duration: kThemeChangeDuration,
+        child: IconTheme.merge(
+          data: iconThemeData!,
+          child: leading!,
+        ),
       );
     }
 
@@ -1132,9 +1145,13 @@ class ListTile extends StatelessWidget {
 
     Widget? trailingIcon;
     if (trailing != null) {
-      trailingIcon = IconTheme.merge(
-        data: iconThemeData!,
-        child: trailing!,
+      trailingIcon = AnimatedDefaultTextStyle(
+        style: leadingAndTrailingTextStyle!,
+        duration: kThemeChangeDuration,
+        child: IconTheme.merge(
+          data: iconThemeData!,
+          child: trailing!,
+        ),
       );
     }
 

packages/flutter/test/material/list_tile_test.dart

@@ -2083,4 +2083,113 @@ void main() {
     expect(tester.getSize(find.byType(ListTile)), const Size(800.0, 56.0));
     expect(right('title'), 708.0);
   });
+
+  testWidgets('colors are applied to leading and trailing text widgets', (WidgetTester tester) async {
+    final Key leadingKey = UniqueKey();
+    final Key trailingKey = UniqueKey();
+
+    late ThemeData theme;
+    Widget buildFrame({
+      bool enabled = true,
+      bool selected = false,
+    }) {
+      return MaterialApp(
+        home: Material(
+          child: Center(
+            child: Builder(
+              builder: (BuildContext context) {
+                theme = Theme.of(context);
+                return ListTile(
+                  enabled: enabled,
+                  selected: selected,
+                  leading: TestText('leading', key: leadingKey),
+                  title: const TestText('title'),
+                  trailing: TestText('trailing', key: trailingKey),
+                );
+              },
+            ),
+          ),
+        ),
+      );
+    }
+
+    Color textColor(Key key) => tester.state<TestTextState>(find.byKey(key)).textStyle.color!;
+
+    await tester.pumpWidget(buildFrame());
+    // Enabled color should be default bodyText2 color.
+    expect(textColor(leadingKey), theme.textTheme.bodyText2!.color);
+    expect(textColor(trailingKey), theme.textTheme.bodyText2!.color);
+
+    await tester.pumpWidget(buildFrame(selected: true));
+    // Wait for text color to animate.
+    await tester.pumpAndSettle();
+    // Selected color should be ThemeData.primaryColor by default.
+    expect(textColor(leadingKey), theme.primaryColor);
+    expect(textColor(trailingKey), theme.primaryColor);
+
+    await tester.pumpWidget(buildFrame(enabled: false));
+    // Wait for text color to animate.
+    await tester.pumpAndSettle();
+    // Disabled color should be ThemeData.disabledColor by default.
+    expect(textColor(leadingKey), theme.disabledColor);
+    expect(textColor(trailingKey), theme.disabledColor);
+  });
+
+  testWidgets('ListTileTheme colors are applied to leading and trailing text widgets', (WidgetTester tester) async {
+    final Key leadingKey = UniqueKey();
+    final Key trailingKey = UniqueKey();
+
+    const Color selectedColor = Colors.orange;
+    const Color defaultColor = Colors.black;
+
+    late ThemeData theme;
+    Widget buildFrame({
+      bool enabled = true,
+      bool selected = false,
+    }) {
+      return MaterialApp(
+        home: Material(
+          child: Center(
+            child: ListTileTheme(
+              selectedColor: selectedColor,
+              textColor: defaultColor,
+              child: Builder(
+                builder: (BuildContext context) {
+                  theme = Theme.of(context);
+                  return ListTile(
+                    enabled: enabled,
+                    selected: selected,
+                    leading: TestText('leading', key: leadingKey),
+                    title: const TestText('title'),
+                    trailing: TestText('trailing', key: trailingKey),
+                  );
+                },
+              ),
+            ),
+          ),
+        ),
+      );
+    }
+
+    Color textColor(Key key) => tester.state<TestTextState>(find.byKey(key)).textStyle.color!;
+
+    await tester.pumpWidget(buildFrame());
+    // Enabled color should use ListTileTheme.textColor.
+    expect(textColor(leadingKey), defaultColor);
+    expect(textColor(trailingKey), defaultColor);
+
+    await tester.pumpWidget(buildFrame(selected: true));
+    // Wait for text color to animate.
+    await tester.pumpAndSettle();
+    // Selected color should use ListTileTheme.selectedColor.
+    expect(textColor(leadingKey), selectedColor);
+    expect(textColor(trailingKey), selectedColor);
+
+    await tester.pumpWidget(buildFrame(enabled: false));
+    // Wait for text color to animate.
+    await tester.pumpAndSettle();
+    // Disabled color should be ThemeData.disabledColor.
+    expect(textColor(leadingKey), theme.disabledColor);
+    expect(textColor(trailingKey), theme.disabledColor);
+  });
 }