mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
Follow up of https://github.com/flutter/flutter/pull/174323 This pull request updates the usage of state sets in theme and widget property resolution logic throughout the codebase, replacing all instances of `MaterialState` with `WidgetState`. This change ensures consistency with the newer `WidgetState` API and prepares the code for future enhancements or compatibility. The update affects component themes, button styles, property generators, and related tests. ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [ ] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. **Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
274 lines
9.1 KiB
Dart
274 lines
9.1 KiB
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 MenuTemplate extends TokenTemplate {
|
|
const MenuTemplate(
|
|
super.blockName,
|
|
super.fileName,
|
|
super.tokens, {
|
|
super.colorSchemePrefix = '_colors.',
|
|
});
|
|
|
|
@override
|
|
String generate() =>
|
|
'''
|
|
class _MenuBarDefaultsM3 extends MenuStyle {
|
|
_MenuBarDefaultsM3(this.context)
|
|
: super(
|
|
elevation: const MaterialStatePropertyAll<double?>(${elevation('md.comp.menu.container')}),
|
|
shape: const MaterialStatePropertyAll<OutlinedBorder>(_defaultMenuBorder),
|
|
alignment: AlignmentDirectional.bottomStart,
|
|
);
|
|
|
|
static const RoundedRectangleBorder _defaultMenuBorder =
|
|
${shape('md.comp.menu.container', '')};
|
|
|
|
final BuildContext context;
|
|
|
|
late final ColorScheme _colors = Theme.of(context).colorScheme;
|
|
|
|
@override
|
|
WidgetStateProperty<Color?> get backgroundColor {
|
|
return MaterialStatePropertyAll<Color?>(${componentColor('md.comp.menu.container')});
|
|
}
|
|
|
|
@override
|
|
WidgetStateProperty<Color?>? get shadowColor {
|
|
return MaterialStatePropertyAll<Color?>(${color('md.comp.menu.container.shadow-color')});
|
|
}
|
|
|
|
@override
|
|
WidgetStateProperty<Color?>? get surfaceTintColor {
|
|
return const MaterialStatePropertyAll<Color?>(${colorOrTransparent('md.comp.menu.container.surface-tint-layer')});
|
|
}
|
|
|
|
@override
|
|
WidgetStateProperty<EdgeInsetsGeometry?>? get padding {
|
|
return const MaterialStatePropertyAll<EdgeInsetsGeometry>(
|
|
EdgeInsetsDirectional.symmetric(
|
|
horizontal: _kTopLevelMenuHorizontalMinPadding
|
|
),
|
|
);
|
|
}
|
|
|
|
@override
|
|
VisualDensity get visualDensity => Theme.of(context).visualDensity;
|
|
}
|
|
|
|
class _MenuButtonDefaultsM3 extends ButtonStyle {
|
|
_MenuButtonDefaultsM3(this.context)
|
|
: super(
|
|
animationDuration: kThemeChangeDuration,
|
|
enableFeedback: true,
|
|
alignment: AlignmentDirectional.centerStart,
|
|
);
|
|
|
|
final BuildContext context;
|
|
|
|
late final ColorScheme _colors = Theme.of(context).colorScheme;
|
|
late final TextTheme _textTheme = Theme.of(context).textTheme;
|
|
|
|
@override
|
|
WidgetStateProperty<Color?>? get backgroundColor {
|
|
return ButtonStyleButton.allOrNull<Color>(Colors.transparent);
|
|
}
|
|
|
|
// No default shadow color
|
|
|
|
// No default surface tint color
|
|
|
|
@override
|
|
WidgetStateProperty<double>? get elevation {
|
|
return ButtonStyleButton.allOrNull<double>(0.0);
|
|
}
|
|
|
|
@override
|
|
WidgetStateProperty<Color?>? get foregroundColor {
|
|
return WidgetStateProperty.resolveWith((Set<WidgetState> states) {
|
|
if (states.contains(WidgetState.disabled)) {
|
|
return ${componentColor('md.comp.list.list-item.disabled.label-text')};
|
|
}
|
|
if (states.contains(WidgetState.pressed)) {
|
|
return ${componentColor('md.comp.list.list-item.pressed.label-text')};
|
|
}
|
|
if (states.contains(WidgetState.hovered)) {
|
|
return ${componentColor('md.comp.list.list-item.hover.label-text')};
|
|
}
|
|
if (states.contains(WidgetState.focused)) {
|
|
return ${componentColor('md.comp.list.list-item.focus.label-text')};
|
|
}
|
|
return ${componentColor('md.comp.list.list-item.label-text')};
|
|
});
|
|
}
|
|
|
|
@override
|
|
WidgetStateProperty<Color?>? get iconColor {
|
|
return WidgetStateProperty.resolveWith((Set<WidgetState> states) {
|
|
if (states.contains(WidgetState.disabled)) {
|
|
return ${componentColor('md.comp.list.list-item.disabled.leading-icon')};
|
|
}
|
|
if (states.contains(WidgetState.pressed)) {
|
|
return ${componentColor('md.comp.list.list-item.pressed.leading-icon.icon')};
|
|
}
|
|
if (states.contains(WidgetState.hovered)) {
|
|
return ${componentColor('md.comp.list.list-item.hover.leading-icon.icon')};
|
|
}
|
|
if (states.contains(WidgetState.focused)) {
|
|
return ${componentColor('md.comp.list.list-item.focus.leading-icon.icon')};
|
|
}
|
|
return ${componentColor('md.comp.list.list-item.leading-icon')};
|
|
});
|
|
}
|
|
|
|
// No default fixedSize
|
|
|
|
@override
|
|
WidgetStateProperty<double>? get iconSize {
|
|
return const MaterialStatePropertyAll<double>(${getToken("md.comp.list.list-item.leading-icon.size")});
|
|
}
|
|
|
|
@override
|
|
WidgetStateProperty<Size>? get maximumSize {
|
|
return ButtonStyleButton.allOrNull<Size>(Size.infinite);
|
|
}
|
|
|
|
@override
|
|
WidgetStateProperty<Size>? get minimumSize {
|
|
return ButtonStyleButton.allOrNull<Size>(const Size(64.0, 48.0));
|
|
}
|
|
|
|
@override
|
|
WidgetStateProperty<MouseCursor?>? get mouseCursor {
|
|
return WidgetStateProperty.resolveWith(
|
|
(Set<WidgetState> states) {
|
|
if (states.contains(WidgetState.disabled)) {
|
|
return SystemMouseCursors.basic;
|
|
}
|
|
return SystemMouseCursors.click;
|
|
},
|
|
);
|
|
}
|
|
|
|
@override
|
|
WidgetStateProperty<Color?>? get overlayColor {
|
|
return WidgetStateProperty.resolveWith(
|
|
(Set<WidgetState> states) {
|
|
if (states.contains(WidgetState.pressed)) {
|
|
return ${componentColor('md.comp.list.list-item.pressed.state-layer')};
|
|
}
|
|
if (states.contains(WidgetState.hovered)) {
|
|
return ${componentColor('md.comp.list.list-item.hover.state-layer')};
|
|
}
|
|
if (states.contains(WidgetState.focused)) {
|
|
return ${componentColor('md.comp.list.list-item.focus.state-layer')};
|
|
}
|
|
return Colors.transparent;
|
|
},
|
|
);
|
|
}
|
|
|
|
@override
|
|
WidgetStateProperty<EdgeInsetsGeometry>? get padding {
|
|
return ButtonStyleButton.allOrNull<EdgeInsetsGeometry>(_scaledPadding(context));
|
|
}
|
|
|
|
// No default side
|
|
|
|
@override
|
|
WidgetStateProperty<OutlinedBorder>? get shape {
|
|
return ButtonStyleButton.allOrNull<OutlinedBorder>(const RoundedRectangleBorder());
|
|
}
|
|
|
|
@override
|
|
InteractiveInkFeatureFactory? get splashFactory => Theme.of(context).splashFactory;
|
|
|
|
@override
|
|
MaterialTapTargetSize? get tapTargetSize => Theme.of(context).materialTapTargetSize;
|
|
|
|
@override
|
|
WidgetStateProperty<TextStyle?> get textStyle {
|
|
// TODO(tahatesser): This is taken from https://m3.material.io/components/menus/specs
|
|
// Update this when the token is available.
|
|
return MaterialStatePropertyAll<TextStyle?>(_textTheme.labelLarge);
|
|
}
|
|
|
|
@override
|
|
VisualDensity? get visualDensity => Theme.of(context).visualDensity;
|
|
|
|
// The horizontal padding number comes from the spec.
|
|
EdgeInsetsGeometry _scaledPadding(BuildContext context) {
|
|
VisualDensity visualDensity = Theme.of(context).visualDensity;
|
|
// When horizontal VisualDensity is greater than zero, set it to zero
|
|
// because the [ButtonStyleButton] has already handle the padding based on the density.
|
|
// However, the [ButtonStyleButton] doesn't allow the [VisualDensity] adjustment
|
|
// to reduce the width of the left/right padding, so we need to handle it here if
|
|
// the density is less than zero, such as on desktop platforms.
|
|
if (visualDensity.horizontal > 0) {
|
|
visualDensity = VisualDensity(vertical: visualDensity.vertical);
|
|
}
|
|
// Since the threshold paddings used below are empirical values determined
|
|
// at a font size of 14.0, 14.0 is used as the base value for scaling the
|
|
// padding.
|
|
final double fontSize = Theme.of(context).textTheme.labelLarge?.fontSize ?? 14.0;
|
|
final double fontSizeRatio = MediaQuery.textScalerOf(context).scale(fontSize) / 14.0;
|
|
return ButtonStyleButton.scaledPadding(
|
|
EdgeInsets.symmetric(horizontal: math.max(
|
|
_kMenuViewPadding,
|
|
_kLabelItemDefaultSpacing + visualDensity.baseSizeAdjustment.dx,
|
|
)),
|
|
EdgeInsets.symmetric(horizontal: math.max(
|
|
_kMenuViewPadding,
|
|
8 + visualDensity.baseSizeAdjustment.dx,
|
|
)),
|
|
const EdgeInsets.symmetric(horizontal: _kMenuViewPadding),
|
|
fontSizeRatio,
|
|
);
|
|
}
|
|
}
|
|
|
|
class _MenuDefaultsM3 extends MenuStyle {
|
|
_MenuDefaultsM3(this.context)
|
|
: super(
|
|
elevation: const MaterialStatePropertyAll<double?>(${elevation('md.comp.menu.container')}),
|
|
shape: const MaterialStatePropertyAll<OutlinedBorder>(_defaultMenuBorder),
|
|
alignment: AlignmentDirectional.topEnd,
|
|
);
|
|
|
|
static const RoundedRectangleBorder _defaultMenuBorder =
|
|
${shape('md.comp.menu.container', '')};
|
|
|
|
final BuildContext context;
|
|
|
|
late final ColorScheme _colors = Theme.of(context).colorScheme;
|
|
|
|
@override
|
|
WidgetStateProperty<Color?> get backgroundColor {
|
|
return MaterialStatePropertyAll<Color?>(${componentColor('md.comp.menu.container')});
|
|
}
|
|
|
|
@override
|
|
WidgetStateProperty<Color?>? get surfaceTintColor {
|
|
return ${componentColor('md.comp.menu.container.surface-tint-layer') == 'null' ? 'const MaterialStatePropertyAll<Color?>(Colors.transparent)' : 'MaterialStatePropertyAll<Color?>(${componentColor('md.comp.menu.container.surface-tint-layer')})'};
|
|
}
|
|
|
|
@override
|
|
WidgetStateProperty<Color?>? get shadowColor {
|
|
return MaterialStatePropertyAll<Color?>(${color('md.comp.menu.container.shadow-color')});
|
|
}
|
|
|
|
@override
|
|
WidgetStateProperty<EdgeInsetsGeometry?>? get padding {
|
|
return const MaterialStatePropertyAll<EdgeInsetsGeometry>(
|
|
EdgeInsetsDirectional.symmetric(vertical: _kMenuVerticalMinPadding),
|
|
);
|
|
}
|
|
|
|
@override
|
|
VisualDensity get visualDensity => Theme.of(context).visualDensity;
|
|
}
|
|
''';
|
|
}
|