Skip to content

F
Front-End
Unverified Commit fa1a4eeb authored by Taha Tesser's avatar Taha Tesser Committed by GitHub
Browse files
Options

Update `ListTile` to support Material 3 (#117965) 

* Update `ListTile` to support Material 3

* Update `Default ListTile debugFillProperties`

* Add #99933 HTML workaround.
parent 31da7121
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2081 additions and 730 deletions
dev/tools/gen_defaults/bin/gen_defaults.dart
View file @ fa1a4eeb
......@@ -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';
......@@ -155,6 +156,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 0 → 100644
View file @ fa1a4eeb
// 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, {
super.colorSchemePrefix = '_colors.',
super.textThemePrefix = '_textTheme.',
});
@override
String generate() => '''
class _${blockName}DefaultsM3 extends ListTileThemeData {
_${blockName}DefaultsM3(this.context)
: super(
contentPadding: const EdgeInsetsDirectional.only(start: 16.0, end: 24.0),
minLeadingWidth: 24,
minVerticalPadding: 8,
shape: ${shape("md.comp.list.list-item.container")},
);
final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
late final TextTheme _textTheme = _theme.textTheme;
@override
Color? get tileColor => Colors.transparent;
@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
View file @ fa1a4eeb
......@@ -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_test.dart
View file @ fa1a4eeb
This source diff could not be displayed because it is too large. You can view the blob instead.
packages/flutter/test/material/list_tile_theme_test.dart
View file @ fa1a4eeb
......@@ -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,130 @@ 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),
));
}
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

HIAST - GitLab