mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
Update ListTile to support Material 3 (#117965)
* Update `ListTile` to support Material 3 * Update `Default ListTile debugFillProperties` * Add #99933 HTML workaround.
This commit is contained in:
Taha Tesser
GitHub
parent
31da712121
commit
fa1a4eebf3
@ -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();
|
||||
|
||||
48
dev/tools/gen_defaults/lib/list_tile_template.dart
Normal file
48
dev/tools/gen_defaults/lib/list_tile_template.dart
Normal file
@ -0,0 +1,48 @@
|
||||
// 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')};
|
||||
}
|
||||
''';
|
||||
}
|
||||
@ -7,6 +7,7 @@ import 'dart:math' as math;
|
||||
import 'package:flutter/rendering.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
import 'color_scheme.dart';
|
||||
import 'colors.dart';
|
||||
import 'constants.dart';
|
||||
import 'debug.dart';
|
||||
@ -15,6 +16,7 @@ import 'ink_decoration.dart';
|
||||
import 'ink_well.dart';
|
||||
import 'list_tile_theme.dart';
|
||||
import 'material_state.dart';
|
||||
import 'text_theme.dart';
|
||||
import 'theme.dart';
|
||||
import 'theme_data.dart';
|
||||
|
||||
@ -254,10 +256,10 @@ enum ListTileControlAffinity {
|
||||
/// * [ListTile.divideTiles], a utility for inserting [Divider]s in between [ListTile]s.
|
||||
/// * [CheckboxListTile], [RadioListTile], and [SwitchListTile], widgets
|
||||
/// that combine [ListTile] with other controls.
|
||||
/// * <https://material.io/design/components/lists.html>
|
||||
/// * Material 3 [ListTile] specifications are referenced from <https://m3.material.io/components/lists/specs>
|
||||
/// and Material 2 [ListTile] specifications are referenced from <https://material.io/design/components/lists.html>
|
||||
/// * Cookbook: [Use lists](https://flutter.dev/docs/cookbook/lists/basic-list)
|
||||
/// * Cookbook: [Implement swipe to dismiss](https://flutter.dev/docs/cookbook/gestures/dismissible)
|
||||
// TODO(plg): Add link to m3 spec below m2 spec link when available
|
||||
class ListTile extends StatelessWidget {
|
||||
/// Creates a list tile.
|
||||
///
|
||||
@ -278,6 +280,9 @@ class ListTile extends StatelessWidget {
|
||||
this.selectedColor,
|
||||
this.iconColor,
|
||||
this.textColor,
|
||||
this.titleTextStyle,
|
||||
this.subtitleTextStyle,
|
||||
this.leadingAndTrailingTextStyle,
|
||||
this.contentPadding,
|
||||
this.enabled = true,
|
||||
this.onTap,
|
||||
@ -364,6 +369,8 @@ class ListTile extends StatelessWidget {
|
||||
/// If this property is null then its value is based on [ListTileTheme.dense].
|
||||
///
|
||||
/// Dense list tiles default to a smaller height.
|
||||
///
|
||||
/// It is not recommended to set [dense] to true when [ThemeData.useMaterial3] is true.
|
||||
final bool? dense;
|
||||
|
||||
/// Defines how compact the list tile's layout will be.
|
||||
@ -421,6 +428,28 @@ class ListTile extends StatelessWidget {
|
||||
/// [ListTileThemeData].
|
||||
final Color? textColor;
|
||||
|
||||
/// The text style for ListTile's [title].
|
||||
///
|
||||
/// If this property is null, then [ListTileThemeData.titleTextStyle] is used.
|
||||
/// If that is also null and [ThemeData.useMaterial3] is true, [TextTheme.bodyLarge]
|
||||
/// will be used. Otherwise, If ListTile style is [ListTileStyle.list],
|
||||
/// [TextTheme.titleMedium] will be used and if ListTile style is [ListTileStyle.drawer],
|
||||
/// [TextTheme.bodyLarge] will be used.
|
||||
final TextStyle? titleTextStyle;
|
||||
|
||||
/// The text style for ListTile's [subtitle].
|
||||
///
|
||||
/// If this property is null, then [ListTileThemeData.subtitleTextStyle] is used.
|
||||
/// If that is also null, [TextTheme.bodyMedium] will be used.
|
||||
final TextStyle? subtitleTextStyle;
|
||||
|
||||
/// The text style for ListTile's [leading] and [trailing].
|
||||
///
|
||||
/// If this property is null, then [ListTileThemeData.leadingAndTrailingTextStyle] is used.
|
||||
/// If that is also null and [ThemeData.useMaterial3] is true, [TextTheme.labelSmall]
|
||||
/// will be used, otherwise [TextTheme.bodyMedium] will be used.
|
||||
final TextStyle? leadingAndTrailingTextStyle;
|
||||
|
||||
/// Defines the font used for the [title].
|
||||
///
|
||||
/// If this property is null then [ListTileThemeData.style] is used. If that
|
||||
@ -588,91 +617,15 @@ class ListTile extends StatelessWidget {
|
||||
];
|
||||
}
|
||||
|
||||
Color? _iconColor(ThemeData theme, ListTileThemeData tileTheme) {
|
||||
if (!enabled) {
|
||||
return theme.disabledColor;
|
||||
}
|
||||
|
||||
if (selected) {
|
||||
return selectedColor ?? tileTheme.selectedColor ?? theme.listTileTheme.selectedColor ?? theme.colorScheme.primary;
|
||||
}
|
||||
|
||||
final Color? color = iconColor
|
||||
?? tileTheme.iconColor
|
||||
?? theme.listTileTheme.iconColor
|
||||
// If [ThemeData.useMaterial3] is set to true the disabled icon color
|
||||
// will be set to Theme.colorScheme.onSurface(0.38), if false, defaults to null,
|
||||
// as described in: https://m3.material.io/components/icon-buttons/specs.
|
||||
?? (theme.useMaterial3 ? theme.colorScheme.onSurface.withOpacity(0.38) : null);
|
||||
if (color != null) {
|
||||
return color;
|
||||
}
|
||||
|
||||
switch (theme.brightness) {
|
||||
case Brightness.light:
|
||||
// For the sake of backwards compatibility, the default for unselected
|
||||
// tiles is Colors.black45 rather than colorScheme.onSurface.withAlpha(0x73).
|
||||
return Colors.black45;
|
||||
case Brightness.dark:
|
||||
return null; // null - use current icon theme color
|
||||
}
|
||||
}
|
||||
|
||||
Color? _textColor(ThemeData theme, ListTileThemeData tileTheme, Color? defaultColor) {
|
||||
if (!enabled) {
|
||||
return theme.disabledColor;
|
||||
}
|
||||
|
||||
if (selected) {
|
||||
return selectedColor ?? tileTheme.selectedColor ?? theme.listTileTheme.selectedColor ?? theme.colorScheme.primary;
|
||||
}
|
||||
|
||||
return textColor ?? tileTheme.textColor ?? theme.listTileTheme.textColor ?? defaultColor;
|
||||
}
|
||||
|
||||
bool _isDenseLayout(ThemeData theme, ListTileThemeData tileTheme) {
|
||||
return dense ?? tileTheme.dense ?? theme.listTileTheme.dense ?? false;
|
||||
}
|
||||
|
||||
TextStyle _titleTextStyle(ThemeData theme, ListTileThemeData tileTheme) {
|
||||
final TextStyle textStyle;
|
||||
switch(style ?? tileTheme.style ?? theme.listTileTheme.style ?? ListTileStyle.list) {
|
||||
case ListTileStyle.drawer:
|
||||
textStyle = theme.useMaterial3 ? theme.textTheme.bodyMedium! : theme.textTheme.bodyLarge!;
|
||||
break;
|
||||
case ListTileStyle.list:
|
||||
textStyle = theme.useMaterial3 ? theme.textTheme.titleMedium! : theme.textTheme.titleMedium!;
|
||||
break;
|
||||
}
|
||||
final Color? color = _textColor(theme, tileTheme, textStyle.color);
|
||||
return _isDenseLayout(theme, tileTheme)
|
||||
? textStyle.copyWith(fontSize: 13.0, color: color)
|
||||
: textStyle.copyWith(color: color);
|
||||
}
|
||||
|
||||
TextStyle _subtitleTextStyle(ThemeData theme, ListTileThemeData tileTheme) {
|
||||
final TextStyle textStyle = theme.useMaterial3 ? theme.textTheme.bodyMedium! : theme.textTheme.bodyMedium!;
|
||||
final Color? color = _textColor(
|
||||
theme,
|
||||
tileTheme,
|
||||
theme.useMaterial3 ? theme.textTheme.bodySmall!.color : theme.textTheme.bodySmall!.color,
|
||||
);
|
||||
return _isDenseLayout(theme, tileTheme)
|
||||
? textStyle.copyWith(color: color, fontSize: 12.0)
|
||||
: textStyle.copyWith(color: color);
|
||||
}
|
||||
|
||||
TextStyle _trailingAndLeadingTextStyle(ThemeData theme, ListTileThemeData tileTheme) {
|
||||
final TextStyle textStyle = theme.useMaterial3 ? theme.textTheme.bodyMedium! : theme.textTheme.bodyMedium!;
|
||||
final Color? color = _textColor(theme, tileTheme, textStyle.color);
|
||||
return textStyle.copyWith(color: color);
|
||||
}
|
||||
|
||||
Color _tileBackgroundColor(ThemeData theme, ListTileThemeData tileTheme) {
|
||||
Color _tileBackgroundColor(ThemeData theme, ListTileThemeData tileTheme, ListTileThemeData defaults) {
|
||||
final Color? color = selected
|
||||
? selectedTileColor ?? tileTheme.selectedTileColor ?? theme.listTileTheme.selectedTileColor
|
||||
: tileColor ?? tileTheme.tileColor ?? theme.listTileTheme.tileColor;
|
||||
return color ?? Colors.transparent;
|
||||
return color ?? defaults.tileColor!;
|
||||
}
|
||||
|
||||
@override
|
||||
@ -680,23 +633,63 @@ class ListTile extends StatelessWidget {
|
||||
assert(debugCheckHasMaterial(context));
|
||||
final ThemeData theme = Theme.of(context);
|
||||
final ListTileThemeData tileTheme = ListTileTheme.of(context);
|
||||
final IconThemeData iconThemeData = IconThemeData(color: _iconColor(theme, tileTheme));
|
||||
final ListTileStyle listTileStyle = style
|
||||
?? tileTheme.style
|
||||
?? theme.listTileTheme.style
|
||||
?? ListTileStyle.list;
|
||||
final ListTileThemeData defaults = theme.useMaterial3
|
||||
? _LisTileDefaultsM3(context)
|
||||
: _LisTileDefaultsM2(context, listTileStyle);
|
||||
final Set<MaterialState> states = <MaterialState>{
|
||||
if (!enabled) MaterialState.disabled,
|
||||
if (selected) MaterialState.selected,
|
||||
};
|
||||
|
||||
TextStyle? leadingAndTrailingTextStyle;
|
||||
Color? resolveColor(Color? explicitColor, Color? selectedColor, Color? enabledColor, [Color? disabledColor]) {
|
||||
return _IndividualOverrides(
|
||||
explicitColor: explicitColor,
|
||||
selectedColor: selectedColor,
|
||||
enabledColor: enabledColor,
|
||||
disabledColor: disabledColor,
|
||||
).resolve(states);
|
||||
}
|
||||
|
||||
final Color? effectiveIconColor = resolveColor(iconColor, selectedColor, iconColor)
|
||||
?? resolveColor(tileTheme.iconColor, tileTheme.selectedColor, tileTheme.iconColor)
|
||||
?? resolveColor(theme.listTileTheme.iconColor, theme.listTileTheme.selectedColor, theme.listTileTheme.iconColor)
|
||||
?? resolveColor(defaults.iconColor, defaults.selectedColor, defaults.iconColor, theme.disabledColor);
|
||||
final Color? effectiveColor = resolveColor(textColor, selectedColor, textColor)
|
||||
?? resolveColor(tileTheme.textColor, tileTheme.selectedColor, tileTheme.textColor)
|
||||
?? resolveColor(theme.listTileTheme.textColor, theme.listTileTheme.selectedColor, theme.listTileTheme.textColor)
|
||||
?? resolveColor(defaults.textColor, defaults.selectedColor, defaults.textColor, theme.disabledColor);
|
||||
final IconThemeData iconThemeData = IconThemeData(color: effectiveIconColor);
|
||||
|
||||
TextStyle? leadingAndTrailingStyle;
|
||||
if (leading != null || trailing != null) {
|
||||
leadingAndTrailingTextStyle = _trailingAndLeadingTextStyle(theme, tileTheme);
|
||||
leadingAndTrailingStyle = leadingAndTrailingTextStyle
|
||||
?? tileTheme.leadingAndTrailingTextStyle
|
||||
?? defaults.leadingAndTrailingTextStyle!;
|
||||
final Color? leadingAndTrailingTextColor = effectiveColor;
|
||||
leadingAndTrailingStyle = leadingAndTrailingStyle.copyWith(color: leadingAndTrailingTextColor);
|
||||
}
|
||||
|
||||
Widget? leadingIcon;
|
||||
if (leading != null) {
|
||||
leadingIcon = AnimatedDefaultTextStyle(
|
||||
style: leadingAndTrailingTextStyle!,
|
||||
style: leadingAndTrailingStyle!,
|
||||
duration: kThemeChangeDuration,
|
||||
child: leading!,
|
||||
);
|
||||
}
|
||||
|
||||
final TextStyle titleStyle = _titleTextStyle(theme, tileTheme);
|
||||
TextStyle titleStyle = titleTextStyle
|
||||
?? tileTheme.titleTextStyle
|
||||
?? defaults.titleTextStyle!;
|
||||
final Color? titleColor = effectiveColor;
|
||||
titleStyle = titleStyle.copyWith(
|
||||
color: titleColor,
|
||||
fontSize: _isDenseLayout(theme, tileTheme) ? 13.0 : null,
|
||||
);
|
||||
final Widget titleText = AnimatedDefaultTextStyle(
|
||||
style: titleStyle,
|
||||
duration: kThemeChangeDuration,
|
||||
@ -706,7 +699,14 @@ class ListTile extends StatelessWidget {
|
||||
Widget? subtitleText;
|
||||
TextStyle? subtitleStyle;
|
||||
if (subtitle != null) {
|
||||
subtitleStyle = _subtitleTextStyle(theme, tileTheme);
|
||||
subtitleStyle = subtitleTextStyle
|
||||
?? tileTheme.subtitleTextStyle
|
||||
?? defaults.subtitleTextStyle!;
|
||||
final Color? subtitleColor = effectiveColor ?? theme.textTheme.bodySmall!.color;
|
||||
subtitleStyle = subtitleStyle.copyWith(
|
||||
color: subtitleColor,
|
||||
fontSize: _isDenseLayout(theme, tileTheme) ? 12.0 : null,
|
||||
);
|
||||
subtitleText = AnimatedDefaultTextStyle(
|
||||
style: subtitleStyle,
|
||||
duration: kThemeChangeDuration,
|
||||
@ -717,26 +717,23 @@ class ListTile extends StatelessWidget {
|
||||
Widget? trailingIcon;
|
||||
if (trailing != null) {
|
||||
trailingIcon = AnimatedDefaultTextStyle(
|
||||
style: leadingAndTrailingTextStyle!,
|
||||
style: leadingAndTrailingStyle!,
|
||||
duration: kThemeChangeDuration,
|
||||
child: trailing!,
|
||||
);
|
||||
}
|
||||
|
||||
const EdgeInsets defaultContentPadding = EdgeInsets.symmetric(horizontal: 16.0);
|
||||
final TextDirection textDirection = Directionality.of(context);
|
||||
final EdgeInsets resolvedContentPadding = contentPadding?.resolve(textDirection)
|
||||
?? tileTheme.contentPadding?.resolve(textDirection)
|
||||
?? defaultContentPadding;
|
||||
|
||||
final Set<MaterialState> states = <MaterialState>{
|
||||
?? defaults.contentPadding!.resolve(textDirection);
|
||||
// Show basic cursor when ListTile isn't enabled or gesture callbacks are null.
|
||||
final Set<MaterialState> mouseStates = <MaterialState>{
|
||||
if (!enabled || (onTap == null && onLongPress == null)) MaterialState.disabled,
|
||||
if (selected) MaterialState.selected,
|
||||
};
|
||||
|
||||
final MouseCursor effectiveMouseCursor = MaterialStateProperty.resolveAs<MouseCursor?>(mouseCursor, states)
|
||||
?? tileTheme.mouseCursor?.resolve(states)
|
||||
?? MaterialStateMouseCursor.clickable.resolve(states);
|
||||
final MouseCursor effectiveMouseCursor = MaterialStateProperty.resolveAs<MouseCursor?>(mouseCursor, mouseStates)
|
||||
?? tileTheme.mouseCursor?.resolve(mouseStates)
|
||||
?? MaterialStateMouseCursor.clickable.resolve(mouseStates);
|
||||
|
||||
return InkWell(
|
||||
customBorder: shape ?? tileTheme.shape,
|
||||
@ -757,7 +754,7 @@ class ListTile extends StatelessWidget {
|
||||
child: Ink(
|
||||
decoration: ShapeDecoration(
|
||||
shape: shape ?? tileTheme.shape ?? const Border(),
|
||||
color: _tileBackgroundColor(theme, tileTheme),
|
||||
color: _tileBackgroundColor(theme, tileTheme, defaults),
|
||||
),
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
@ -774,15 +771,16 @@ class ListTile extends StatelessWidget {
|
||||
visualDensity: visualDensity ?? tileTheme.visualDensity ?? theme.visualDensity,
|
||||
isThreeLine: isThreeLine,
|
||||
textDirection: textDirection,
|
||||
titleBaselineType: titleStyle.textBaseline!,
|
||||
subtitleBaselineType: subtitleStyle?.textBaseline,
|
||||
titleBaselineType: titleStyle.textBaseline ?? defaults.titleTextStyle!.textBaseline!,
|
||||
subtitleBaselineType: subtitleStyle?.textBaseline ?? defaults.subtitleTextStyle!.textBaseline!,
|
||||
horizontalTitleGap: horizontalTitleGap ?? tileTheme.horizontalTitleGap ?? 16,
|
||||
minVerticalPadding: minVerticalPadding ?? tileTheme.minVerticalPadding ?? 4,
|
||||
minLeadingWidth: minLeadingWidth ?? tileTheme.minLeadingWidth ?? 40,
|
||||
minVerticalPadding: minVerticalPadding ?? tileTheme.minVerticalPadding ?? defaults.minVerticalPadding!,
|
||||
minLeadingWidth: minLeadingWidth ?? tileTheme.minLeadingWidth ?? defaults.minLeadingWidth!,
|
||||
material3: theme.useMaterial3,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
@ -802,6 +800,9 @@ class ListTile extends StatelessWidget {
|
||||
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(FlagProperty('enabled', value: enabled, ifTrue: 'true', ifFalse: 'false', showName: true, defaultValue: true));
|
||||
properties.add(DiagnosticsProperty<Function>('onTap', onTap, defaultValue: null));
|
||||
@ -821,6 +822,34 @@ class ListTile extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
class _IndividualOverrides extends MaterialStateProperty<Color?> {
|
||||
_IndividualOverrides({
|
||||
this.explicitColor,
|
||||
this.enabledColor,
|
||||
this.selectedColor,
|
||||
this.disabledColor,
|
||||
});
|
||||
|
||||
final Color? explicitColor;
|
||||
final Color? enabledColor;
|
||||
final Color? selectedColor;
|
||||
final Color? disabledColor;
|
||||
|
||||
@override
|
||||
Color? resolve(Set<MaterialState> states) {
|
||||
if (explicitColor is MaterialStateColor) {
|
||||
return MaterialStateProperty.resolveAs<Color?>(explicitColor, states);
|
||||
}
|
||||
if (states.contains(MaterialState.disabled)) {
|
||||
return disabledColor;
|
||||
}
|
||||
if (states.contains(MaterialState.selected)) {
|
||||
return selectedColor;
|
||||
}
|
||||
return enabledColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Identifies the children of a _ListTileElement.
|
||||
enum _ListTileSlot {
|
||||
leading,
|
||||
@ -844,6 +873,7 @@ class _ListTile extends RenderObjectWidget with SlottedMultiChildRenderObjectWid
|
||||
required this.minVerticalPadding,
|
||||
required this.minLeadingWidth,
|
||||
this.subtitleBaselineType,
|
||||
required this.material3,
|
||||
}) : assert(isThreeLine != null),
|
||||
assert(isDense != null),
|
||||
assert(visualDensity != null),
|
||||
@ -851,7 +881,8 @@ class _ListTile extends RenderObjectWidget with SlottedMultiChildRenderObjectWid
|
||||
assert(titleBaselineType != null),
|
||||
assert(horizontalTitleGap != null),
|
||||
assert(minVerticalPadding != null),
|
||||
assert(minLeadingWidth != null);
|
||||
assert(minLeadingWidth != null),
|
||||
assert(material3 != null);
|
||||
|
||||
final Widget? leading;
|
||||
final Widget title;
|
||||
@ -866,6 +897,7 @@ class _ListTile extends RenderObjectWidget with SlottedMultiChildRenderObjectWid
|
||||
final double horizontalTitleGap;
|
||||
final double minVerticalPadding;
|
||||
final double minLeadingWidth;
|
||||
final bool material3;
|
||||
|
||||
@override
|
||||
Iterable<_ListTileSlot> get slots => _ListTileSlot.values;
|
||||
@ -896,6 +928,7 @@ class _ListTile extends RenderObjectWidget with SlottedMultiChildRenderObjectWid
|
||||
horizontalTitleGap: horizontalTitleGap,
|
||||
minVerticalPadding: minVerticalPadding,
|
||||
minLeadingWidth: minLeadingWidth,
|
||||
material3: material3,
|
||||
);
|
||||
}
|
||||
|
||||
@ -910,7 +943,8 @@ class _ListTile extends RenderObjectWidget with SlottedMultiChildRenderObjectWid
|
||||
..subtitleBaselineType = subtitleBaselineType
|
||||
..horizontalTitleGap = horizontalTitleGap
|
||||
..minLeadingWidth = minLeadingWidth
|
||||
..minVerticalPadding = minVerticalPadding;
|
||||
..minVerticalPadding = minVerticalPadding
|
||||
..material3 = material3;
|
||||
}
|
||||
}
|
||||
|
||||
@ -925,6 +959,7 @@ class _RenderListTile extends RenderBox with SlottedContainerRenderObjectMixin<_
|
||||
required double horizontalTitleGap,
|
||||
required double minVerticalPadding,
|
||||
required double minLeadingWidth,
|
||||
required bool material3,
|
||||
}) : assert(isDense != null),
|
||||
assert(visualDensity != null),
|
||||
assert(isThreeLine != null),
|
||||
@ -933,6 +968,7 @@ class _RenderListTile extends RenderBox with SlottedContainerRenderObjectMixin<_
|
||||
assert(horizontalTitleGap != null),
|
||||
assert(minVerticalPadding != null),
|
||||
assert(minLeadingWidth != null),
|
||||
assert(material3 != null),
|
||||
_isDense = isDense,
|
||||
_visualDensity = visualDensity,
|
||||
_isThreeLine = isThreeLine,
|
||||
@ -941,7 +977,8 @@ class _RenderListTile extends RenderBox with SlottedContainerRenderObjectMixin<_
|
||||
_subtitleBaselineType = subtitleBaselineType,
|
||||
_horizontalTitleGap = horizontalTitleGap,
|
||||
_minVerticalPadding = minVerticalPadding,
|
||||
_minLeadingWidth = minLeadingWidth;
|
||||
_minLeadingWidth = minLeadingWidth,
|
||||
_material3 = material3;
|
||||
|
||||
RenderBox? get leading => childForSlot(_ListTileSlot.leading);
|
||||
RenderBox? get title => childForSlot(_ListTileSlot.title);
|
||||
@ -1065,6 +1102,17 @@ class _RenderListTile extends RenderBox with SlottedContainerRenderObjectMixin<_
|
||||
markNeedsLayout();
|
||||
}
|
||||
|
||||
bool get material3 => _material3;
|
||||
bool _material3;
|
||||
set material3(bool value) {
|
||||
assert(value != null);
|
||||
if (_material3 == value) {
|
||||
return;
|
||||
}
|
||||
_material3 = value;
|
||||
markNeedsLayout();
|
||||
}
|
||||
|
||||
@override
|
||||
bool get sizedByParent => false;
|
||||
|
||||
@ -1253,23 +1301,33 @@ class _RenderListTile extends RenderBox with SlottedContainerRenderObjectMixin<_
|
||||
}
|
||||
}
|
||||
|
||||
// This attempts to implement the redlines for the vertical position of the
|
||||
// leading and trailing icons on the spec page:
|
||||
// https://material.io/design/components/lists.html#specs
|
||||
// The interpretation for these redlines is as follows:
|
||||
// - For large tiles (> 72dp), both leading and trailing controls should be
|
||||
// a fixed distance from top. As per guidelines this is set to 16dp.
|
||||
// - For smaller tiles, trailing should always be centered. Leading can be
|
||||
// centered or closer to the top. It should never be further than 16dp
|
||||
// to the top.
|
||||
final double leadingY;
|
||||
final double trailingY;
|
||||
if (tileHeight > 72.0) {
|
||||
leadingY = 16.0;
|
||||
trailingY = 16.0;
|
||||
if (material3) {
|
||||
if (isThreeLine) {
|
||||
leadingY = _minVerticalPadding;
|
||||
trailingY = _minVerticalPadding;
|
||||
} else {
|
||||
leadingY = (tileHeight - leadingSize.height) / 2.0;
|
||||
trailingY = (tileHeight - trailingSize.height) / 2.0;
|
||||
}
|
||||
} else {
|
||||
leadingY = math.min((tileHeight - leadingSize.height) / 2.0, 16.0);
|
||||
trailingY = (tileHeight - trailingSize.height) / 2.0;
|
||||
// This attempts to implement the redlines for the vertical position of the
|
||||
// leading and trailing icons on the spec page:
|
||||
// https://material.io/design/components/lists.html#specs
|
||||
// The interpretation for these redlines is as follows:
|
||||
// - For large tiles (> 72dp), both leading and trailing controls should be
|
||||
// a fixed distance from top. As per guidelines this is set to 16dp.
|
||||
// - For smaller tiles, trailing should always be centered. Leading can be
|
||||
// centered or closer to the top. It should never be further than 16dp
|
||||
// to the top.
|
||||
if (tileHeight > 72.0) {
|
||||
leadingY = 16.0;
|
||||
trailingY = 16.0;
|
||||
} else {
|
||||
leadingY = math.min((tileHeight - leadingSize.height) / 2.0, 16.0);
|
||||
trailingY = (tileHeight - trailingSize.height) / 2.0;
|
||||
}
|
||||
}
|
||||
|
||||
switch (textDirection) {
|
||||
@ -1343,3 +1401,96 @@ class _RenderListTile extends RenderBox with SlottedContainerRenderObjectMixin<_
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
class _LisTileDefaultsM2 extends ListTileThemeData {
|
||||
_LisTileDefaultsM2(this.context, ListTileStyle style)
|
||||
: super(
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
minLeadingWidth: 40,
|
||||
minVerticalPadding: 4,
|
||||
shape: const Border(),
|
||||
style: style,
|
||||
);
|
||||
|
||||
final BuildContext context;
|
||||
late final ThemeData _theme = Theme.of(context);
|
||||
late final TextTheme _textTheme = _theme.textTheme;
|
||||
|
||||
@override
|
||||
Color? get tileColor => Colors.transparent;
|
||||
|
||||
@override
|
||||
TextStyle? get titleTextStyle {
|
||||
switch (style!) {
|
||||
case ListTileStyle.drawer:
|
||||
return _textTheme.bodyLarge;
|
||||
case ListTileStyle.list:
|
||||
return _textTheme.titleMedium;
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
TextStyle? get subtitleTextStyle => _textTheme.bodyMedium;
|
||||
|
||||
@override
|
||||
TextStyle? get leadingAndTrailingTextStyle => _textTheme.bodyMedium;
|
||||
|
||||
@override
|
||||
Color? get selectedColor => _theme.colorScheme.primary;
|
||||
|
||||
@override
|
||||
Color? get iconColor {
|
||||
switch (_theme.brightness) {
|
||||
case Brightness.light:
|
||||
// For the sake of backwards compatibility, the default for unselected
|
||||
// tiles is Colors.black45 rather than colorScheme.onSurface.withAlpha(0x73).
|
||||
return Colors.black45;
|
||||
case Brightness.dark:
|
||||
return null; // null, Use current icon theme color
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// BEGIN GENERATED TOKEN PROPERTIES - LisTile
|
||||
|
||||
// Do not edit by hand. The code between the "BEGIN GENERATED" and
|
||||
// "END GENERATED" comments are generated from data in the Material
|
||||
// Design token database by the script:
|
||||
// dev/tools/gen_defaults/bin/gen_defaults.dart.
|
||||
|
||||
// Token database version: v0_150
|
||||
|
||||
class _LisTileDefaultsM3 extends ListTileThemeData {
|
||||
_LisTileDefaultsM3(this.context)
|
||||
: super(
|
||||
contentPadding: const EdgeInsetsDirectional.only(start: 16.0, end: 24.0),
|
||||
minLeadingWidth: 24,
|
||||
minVerticalPadding: 8,
|
||||
shape: const RoundedRectangleBorder(),
|
||||
);
|
||||
|
||||
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 => _textTheme.bodyLarge;
|
||||
|
||||
@override
|
||||
TextStyle? get subtitleTextStyle => _textTheme.bodyMedium;
|
||||
|
||||
@override
|
||||
TextStyle? get leadingAndTrailingTextStyle => _textTheme.labelSmall;
|
||||
|
||||
@override
|
||||
Color? get selectedColor => _colors.primary;
|
||||
|
||||
@override
|
||||
Color? get iconColor => _colors.onSurface;
|
||||
}
|
||||
|
||||
// END GENERATED TOKEN PROPERTIES - LisTile
|
||||
|
||||
@ -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));
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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),
|
||||
));
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user