Add Material 3 support for `ListTile` - Part 1 (#116194)

* Add Material 3 support for `ListTile` - Part 1

* minor refactor

* Add `useMaterial3: false` to M2 tests

dev/tools/gen_defaults/bin/gen_defaults.dart

@@ -35,6 +35,7 @@ import 'package:gen_defaults/filter_chip_template.dart';
 import 'package:gen_defaults/icon_button_template.dart';
 import 'package:gen_defaults/input_chip_template.dart';
 import 'package:gen_defaults/input_decorator_template.dart';
+import 'package:gen_defaults/list_tile_template.dart';
 import 'package:gen_defaults/menu_template.dart';
 import 'package:gen_defaults/navigation_bar_template.dart';
 import 'package:gen_defaults/navigation_drawer_template.dart';
@@ -154,6 +155,7 @@ Future<void> main(List<String> args) async {
   FilterChipTemplate('FilterChip', '$materialLib/filter_chip.dart', tokens).updateFile();
   IconButtonTemplate('IconButton', '$materialLib/icon_button.dart', tokens).updateFile();
   InputChipTemplate('InputChip', '$materialLib/input_chip.dart', tokens).updateFile();
+  ListTileTemplate('LisTile', '$materialLib/list_tile.dart', tokens).updateFile();
   InputDecoratorTemplate('InputDecorator', '$materialLib/input_decorator.dart', tokens).updateFile();
   MenuTemplate('Menu', '$materialLib/menu_anchor.dart', tokens).updateFile();
   NavigationBarTemplate('NavigationBar', '$materialLib/navigation_bar.dart', tokens).updateFile();

dev/tools/gen_defaults/lib/list_tile_template.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'template.dart';
+
+class ListTileTemplate extends TokenTemplate {
+  const ListTileTemplate(super.blockName, super.fileName, super.tokens);
+
+  @override
+  String generate() => '''
+class _${blockName}DefaultsM3 extends ListTileThemeData {
+  const _${blockName}DefaultsM3(this.context)
+    : super(shape: ${shape("md.comp.list.list-item.container")});
+
+  final BuildContext context;
+
+  @override
+  Color? get tileColor => ${componentColor("md.comp.list.list-item.container")};
+
+  @override
+  TextStyle? get titleTextStyle => ${textStyle("md.comp.list.list-item.label-text")};
+
+  @override
+  TextStyle? get subtitleTextStyle => ${textStyle("md.comp.list.list-item.supporting-text")};
+
+  @override
+  TextStyle? get leadingAndTrailingTextStyle => ${textStyle("md.comp.list.list-item.trailing-supporting-text")};
+
+  @override
+  Color? get selectedColor => ${componentColor('md.comp.list.list-item.selected.trailing-icon')};
+
+  @override
+  Color? get iconColor => ${componentColor('md.comp.list.list-item.unselected.trailing-icon')};
+}
+''';
+}

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

@@ -51,6 +51,9 @@ class ListTileThemeData with Diagnosticable {
     this.selectedColor,
     this.iconColor,
     this.textColor,
+    this.titleTextStyle,
+    this.subtitleTextStyle,
+    this.leadingAndTrailingTextStyle,
     this.contentPadding,
     this.tileColor,
     this.selectedTileColor,
@@ -80,6 +83,15 @@ class ListTileThemeData with Diagnosticable {
   /// Overrides the default value of [ListTile.textColor].
   final Color? textColor;
 
+  /// Overrides the default value of [ListTile.titleTextStyle].
+  final TextStyle? titleTextStyle;
+
+  /// Overrides the default value of [ListTile.subtitleTextStyle].
+  final TextStyle? subtitleTextStyle;
+
+  /// Overrides the default value of [ListTile.leadingAndTrailingTextStyle].
+  final TextStyle? leadingAndTrailingTextStyle;
+
   /// Overrides the default value of [ListTile.contentPadding].
   final EdgeInsetsGeometry? contentPadding;
 
@@ -116,6 +128,9 @@ class ListTileThemeData with Diagnosticable {
     Color? selectedColor,
     Color? iconColor,
     Color? textColor,
+    TextStyle? titleTextStyle,
+    TextStyle? subtitleTextStyle,
+    TextStyle? leadingAndTrailingTextStyle,
     EdgeInsetsGeometry? contentPadding,
     Color? tileColor,
     Color? selectedTileColor,
@@ -134,6 +149,9 @@ class ListTileThemeData with Diagnosticable {
       selectedColor: selectedColor ?? this.selectedColor,
       iconColor: iconColor ?? this.iconColor,
       textColor: textColor ?? this.textColor,
+      titleTextStyle: titleTextStyle ?? this.titleTextStyle,
+      subtitleTextStyle: titleTextStyle ?? this.subtitleTextStyle,
+      leadingAndTrailingTextStyle: titleTextStyle ?? this.leadingAndTrailingTextStyle,
       contentPadding: contentPadding ?? this.contentPadding,
       tileColor: tileColor ?? this.tileColor,
       selectedTileColor: selectedTileColor ?? this.selectedTileColor,
@@ -159,6 +177,9 @@ class ListTileThemeData with Diagnosticable {
       selectedColor: Color.lerp(a?.selectedColor, b?.selectedColor, t),
       iconColor: Color.lerp(a?.iconColor, b?.iconColor, t),
       textColor: Color.lerp(a?.textColor, b?.textColor, t),
+      titleTextStyle: TextStyle.lerp(a?.titleTextStyle, b?.titleTextStyle, t),
+      subtitleTextStyle: TextStyle.lerp(a?.subtitleTextStyle, b?.subtitleTextStyle, t),
+      leadingAndTrailingTextStyle: TextStyle.lerp(a?.leadingAndTrailingTextStyle, b?.leadingAndTrailingTextStyle, t),
       contentPadding: EdgeInsetsGeometry.lerp(a?.contentPadding, b?.contentPadding, t),
       tileColor: Color.lerp(a?.tileColor, b?.tileColor, t),
       selectedTileColor: Color.lerp(a?.selectedTileColor, b?.selectedTileColor, t),
@@ -179,6 +200,9 @@ class ListTileThemeData with Diagnosticable {
     selectedColor,
     iconColor,
     textColor,
+    titleTextStyle,
+    subtitleTextStyle,
+    leadingAndTrailingTextStyle,
     contentPadding,
     tileColor,
     selectedTileColor,
@@ -204,6 +228,9 @@ class ListTileThemeData with Diagnosticable {
       && other.style == style
       && other.selectedColor == selectedColor
       && other.iconColor == iconColor
+      && other.titleTextStyle == titleTextStyle
+      && other.subtitleTextStyle == subtitleTextStyle
+      && other.leadingAndTrailingTextStyle == leadingAndTrailingTextStyle
       && other.textColor == textColor
       && other.contentPadding == contentPadding
       && other.tileColor == tileColor
@@ -225,6 +252,9 @@ class ListTileThemeData with Diagnosticable {
     properties.add(ColorProperty('selectedColor', selectedColor, defaultValue: null));
     properties.add(ColorProperty('iconColor', iconColor, defaultValue: null));
     properties.add(ColorProperty('textColor', textColor, defaultValue: null));
+    properties.add(DiagnosticsProperty<TextStyle>('titleTextStyle', titleTextStyle, defaultValue: null));
+    properties.add(DiagnosticsProperty<TextStyle>('subtitleTextStyle', subtitleTextStyle, defaultValue: null));
+    properties.add(DiagnosticsProperty<TextStyle>('leadingAndTrailingTextStyle', leadingAndTrailingTextStyle, defaultValue: null));
     properties.add(DiagnosticsProperty<EdgeInsetsGeometry>('contentPadding', contentPadding, defaultValue: null));
     properties.add(ColorProperty('tileColor', tileColor, defaultValue: null));
     properties.add(ColorProperty('selectedTileColor', selectedTileColor, defaultValue: null));

packages/flutter/test/material/list_tile_theme_test.dart

@@ -59,6 +59,9 @@ void main() {
     expect(themeData.selectedColor, null);
     expect(themeData.iconColor, null);
     expect(themeData.textColor, null);
+    expect(themeData.titleTextStyle, null);
+    expect(themeData.subtitleTextStyle, null);
+    expect(themeData.leadingAndTrailingTextStyle, null);
     expect(themeData.contentPadding, null);
     expect(themeData.tileColor, null);
     expect(themeData.selectedTileColor, null);
@@ -91,9 +94,12 @@ void main() {
       selectedColor: Color(0x00000001),
       iconColor: Color(0x00000002),
       textColor: Color(0x00000003),
+      titleTextStyle: TextStyle(color: Color(0x00000004)),
+      subtitleTextStyle: TextStyle(color: Color(0x00000005)),
+      leadingAndTrailingTextStyle: TextStyle(color: Color(0x00000006)),
       contentPadding: EdgeInsets.all(100),
-      tileColor: Color(0x00000004),
-      selectedTileColor: Color(0x00000005),
+      tileColor: Color(0x00000007),
+      selectedTileColor: Color(0x00000008),
       horizontalTitleGap: 200,
       minVerticalPadding: 300,
       minLeadingWidth: 400,
@@ -116,9 +122,12 @@ void main() {
         'selectedColor: Color(0x00000001)',
         'iconColor: Color(0x00000002)',
         'textColor: Color(0x00000003)',
+        'titleTextStyle: TextStyle(inherit: true, color: Color(0x00000004))',
+        'subtitleTextStyle: TextStyle(inherit: true, color: Color(0x00000005))',
+        'leadingAndTrailingTextStyle: TextStyle(inherit: true, color: Color(0x00000006))',
         'contentPadding: EdgeInsets.all(100.0)',
-        'tileColor: Color(0x00000004)',
-        'selectedTileColor: Color(0x00000005)',
+        'tileColor: Color(0x00000007)',
+        'selectedTileColor: Color(0x00000008)',
         'horizontalTitleGap: 200.0',
         'minVerticalPadding: 300.0',
         'minLeadingWidth: 400.0',
@@ -365,6 +374,99 @@ void main() {
     expect(textColor(trailingKey), theme.disabledColor);
   });
 
+  testWidgets(
+    "ListTile respects ListTileTheme's titleTextStyle, subtitleTextStyle & leadingAndTrailingTextStyle",
+    (WidgetTester tester) async {
+    final ThemeData theme = ThemeData(
+      useMaterial3: true,
+      listTileTheme: const ListTileThemeData(
+        titleTextStyle: TextStyle(fontSize: 20.0),
+        subtitleTextStyle: TextStyle(fontSize: 17.5),
+        leadingAndTrailingTextStyle: TextStyle(fontSize: 15.0),
+      ),
+    );
+
+    Widget buildFrame() {
+      return MaterialApp(
+        theme: theme,
+        home: Material(
+          child: Center(
+            child: Builder(
+              builder: (BuildContext context) {
+                return const ListTile(
+                  leading: TestText('leading'),
+                  title: TestText('title'),
+                  subtitle: TestText('subtitle') ,
+                  trailing: TestText('trailing'),
+                );
+              },
+            ),
+          ),
+        ),
+      );
+    }
+
+    await tester.pumpWidget(buildFrame());
+    final RenderParagraph leading = _getTextRenderObject(tester, 'leading');
+    expect(leading.text.style!.fontSize, 15.0);
+    final RenderParagraph title = _getTextRenderObject(tester, 'title');
+    expect(title.text.style!.fontSize, 20.0);
+    final RenderParagraph subtitle = _getTextRenderObject(tester, 'subtitle');
+    expect(subtitle.text.style!.fontSize, 17.5);
+    final RenderParagraph trailing = _getTextRenderObject(tester, 'trailing');
+    expect(trailing.text.style!.fontSize, 15.0);
+  });
+
+  testWidgets(
+    "ListTile's titleTextStyle, subtitleTextStyle & leadingAndTrailingTextStyle are overridden by ListTile properties",
+    (WidgetTester tester) async {
+    final ThemeData theme = ThemeData(
+      useMaterial3: true,
+      listTileTheme: const ListTileThemeData(
+        titleTextStyle: TextStyle(fontSize: 20.0),
+        subtitleTextStyle: TextStyle(fontSize: 17.5),
+        leadingAndTrailingTextStyle: TextStyle(fontSize: 15.0),
+      ),
+    );
+
+    const TextStyle titleTextStyle = TextStyle(fontSize: 23.0);
+    const TextStyle subtitleTextStyle = TextStyle(fontSize: 20.0);
+    const TextStyle leadingAndTrailingTextStyle = TextStyle(fontSize: 18.0);
+
+    Widget buildFrame() {
+      return MaterialApp(
+        theme: theme,
+        home: Material(
+          child: Center(
+            child: Builder(
+              builder: (BuildContext context) {
+                return const ListTile(
+                  titleTextStyle: titleTextStyle,
+                  subtitleTextStyle: subtitleTextStyle,
+                  leadingAndTrailingTextStyle: leadingAndTrailingTextStyle,
+                  leading: TestText('leading'),
+                  title: TestText('title'),
+                  subtitle: TestText('subtitle') ,
+                  trailing: TestText('trailing'),
+                );
+              },
+            ),
+          ),
+        ),
+      );
+    }
+
+    await tester.pumpWidget(buildFrame());
+    final RenderParagraph leading = _getTextRenderObject(tester, 'leading');
+    expect(leading.text.style!.fontSize, 18.0);
+    final RenderParagraph title = _getTextRenderObject(tester, 'title');
+    expect(title.text.style!.fontSize, 23.0);
+    final RenderParagraph subtitle = _getTextRenderObject(tester, 'subtitle');
+    expect(subtitle.text.style!.fontSize, 20.0);
+    final RenderParagraph trailing = _getTextRenderObject(tester, 'trailing');
+    expect(trailing.text.style!.fontSize, 18.0);
+  });
+
   testWidgets("ListTile respects ListTileTheme's tileColor & selectedTileColor", (WidgetTester tester) async {
     late ListTileThemeData theme;
     bool isSelected = false;
@@ -479,4 +581,134 @@ void main() {
     // Test shape.
     expect(inkWellBorder, shapeBorder);
   });
+
+  testWidgets('ListTile respects MaterialStateColor LisTileTheme.textColor', (WidgetTester tester) async {
+    bool enabled = false;
+    bool selected = false;
+    const Color defaultColor = Colors.blue;
+    const Color selectedColor = Colors.green;
+    const Color disabledColor = Colors.red;
+
+    final ThemeData theme = ThemeData(
+      listTileTheme: ListTileThemeData(
+        textColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
+          if (states.contains(MaterialState.disabled)) {
+            return disabledColor;
+          }
+
+          if (states.contains(MaterialState.selected)) {
+            return selectedColor;
+          }
+
+          return defaultColor;
+        }),
+      ),
+    );
+    Widget buildFrame() {
+      return MaterialApp(
+        theme: theme,
+        home: Material(
+          child: Center(
+            child: Builder(
+              builder: (BuildContext context) {
+                return ListTile(
+                  enabled: enabled,
+                  selected: selected,
+                  title: const TestText('title'),
+                  subtitle: const TestText('subtitle') ,
+                );
+              },
+            ),
+          ),
+        ),
+      );
+    }
+
+    // Test disabled state.
+    await tester.pumpWidget(buildFrame());
+    RenderParagraph title = _getTextRenderObject(tester, 'title');
+    expect(title.text.style!.color, disabledColor);
+
+    // Test enabled state.
+    enabled = true;
+    await tester.pumpWidget(buildFrame());
+    await tester.pumpAndSettle();
+    title = _getTextRenderObject(tester, 'title');
+    expect(title.text.style!.color, defaultColor);
+
+    // Test selected state.
+    selected = true;
+    await tester.pumpWidget(buildFrame());
+    await tester.pumpAndSettle();
+    title = _getTextRenderObject(tester, 'title');
+    expect(title.text.style!.color, selectedColor);
+  });
+
+  testWidgets('ListTile respects MaterialStateColor LisTileTheme.iconColor', (WidgetTester tester) async {
+    bool enabled = false;
+    bool selected = false;
+    const Color defaultColor = Colors.blue;
+    const Color selectedColor = Colors.green;
+    const Color disabledColor = Colors.red;
+    final Key leadingKey = UniqueKey();
+
+    final ThemeData theme = ThemeData(
+      listTileTheme: ListTileThemeData(
+        iconColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
+          if (states.contains(MaterialState.disabled)) {
+            return disabledColor;
+          }
+
+          if (states.contains(MaterialState.selected)) {
+            return selectedColor;
+          }
+
+          return defaultColor;
+        }),
+      ),
+    );
+    Widget buildFrame() {
+      return MaterialApp(
+        theme: theme,
+        home: Material(
+          child: Center(
+            child: Builder(
+              builder: (BuildContext context) {
+                return ListTile(
+                  enabled: enabled,
+                  selected: selected,
+                  leading: TestIcon(key: leadingKey),
+                );
+              },
+            ),
+          ),
+        ),
+      );
+    }
+
+    Color iconColor(Key key) => tester.state<TestIconState>(find.byKey(key)).iconTheme.color!;
+
+    // Test disabled state.
+    await tester.pumpWidget(buildFrame());
+    expect(iconColor(leadingKey), disabledColor);
+
+    // Test enabled state.
+    enabled = true;
+    await tester.pumpWidget(buildFrame());
+    await tester.pumpAndSettle();
+    expect(iconColor(leadingKey), defaultColor);
+
+    // Test selected state.
+    selected = true;
+    await tester.pumpWidget(buildFrame());
+    await tester.pumpAndSettle();
+    expect(iconColor(leadingKey), selectedColor);
+  });
+}
+
+RenderParagraph _getTextRenderObject(WidgetTester tester, String text) {
+  return tester.renderObject(find.descendant(
+    of: find.byType(ListTile),
+    matching: find.text(text),
+  ));
 }