Skip to content

[material_ui] Migrate M3 buttons template to use new gen_defaults - #12744

Open
QuncCccccc wants to merge 1 commit into
flutter:mainfrom
QuncCccccc:button_m3_defaults_migration
Open

[material_ui] Migrate M3 buttons template to use new gen_defaults#12744
QuncCccccc wants to merge 1 commit into
flutter:mainfrom
QuncCccccc:button_m3_defaults_migration

Conversation

@QuncCccccc

Copy link
Copy Markdown
Contributor

Work towards flutter/flutter#187899

Fixes flutter/flutter#188405

Pre-Review Checklist

  • I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
  • I read the [AI contribution guidelines] and understand my responsibilities, or I am not using AI tools.
  • I read the [Tree Hygiene] page, which explains my responsibilities.
  • I read and followed the [relevant style guides] and ran [the auto-formatter].
  • I signed the [CLA].
  • The title of the PR starts with the name of the package surrounded by square brackets, e.g. [shared_preferences]
  • I [linked to at least one issue that this PR fixes] in the description above.
  • I followed [the version and CHANGELOG instructions], using [semantic versioning] and the [repository CHANGELOG style], or I have commented below to indicate which documented exception this PR falls under[^1].
  • I updated/added any relevant documentation (doc comments with ///).
  • I added new tests to check the change I am making, or I have commented below to indicate which [test exemption] this PR falls under[^1].
  • All existing and new tests are passing.

@github-actions github-actions Bot added p: material_ui triage-design Should be looked at in design triage labels Sep 3, 2026
@QuncCccccc
QuncCccccc force-pushed the button_m3_defaults_migration branch 2 times, most recently from c982306 to c3c6211 Compare September 3, 2026 23:56
@QuncCccccc QuncCccccc changed the title [material_ui] Migrate M3 buttons template to use new gen_defaults [material_ui] Migrate M3 ElevatedButton template to use new gen_defaults Sep 4, 2026
@QuncCccccc
QuncCccccc force-pushed the button_m3_defaults_migration branch 13 times, most recently from bc042ae to e5653f7 Compare September 4, 2026 02:13
@QuncCccccc
QuncCccccc force-pushed the button_m3_defaults_migration branch from e5653f7 to a5b9d6d Compare September 4, 2026 02:17
@QuncCccccc
QuncCccccc marked this pull request as ready for review September 4, 2026 02:17
@QuncCccccc
QuncCccccc requested a review from elliette September 4, 2026 02:18
@QuncCccccc QuncCccccc changed the title [material_ui] Migrate M3 ElevatedButton template to use new gen_defaults [material_ui] Migrate M3 buttons template to use new gen_defaults Sep 4, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request migrates Material 3 button defaults to be generated from tokens via a new ButtonTemplateM3 template, removing hardcoded default classes from the button implementation files and generating them as part files instead. The review feedback suggests modernizing the generated code by replacing deprecated MaterialStatePropertyAll references with WidgetStatePropertyAll in both the template and its associated tests.

Comment on lines +141 to +145
String get _backgroundColor {
final TokenColorRole? containerColor = _containerColor;
if (containerColor == null) {
return 'const MaterialStatePropertyAll<Color>(Colors.transparent)';
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Since this is a new template migration, we should use the modern WidgetStatePropertyAll instead of the legacy/deprecated MaterialStatePropertyAll to align with Flutter's ongoing migration from MaterialState to WidgetState.

Suggested change
String get _backgroundColor {
final TokenColorRole? containerColor = _containerColor;
if (containerColor == null) {
return 'const MaterialStatePropertyAll<Color>(Colors.transparent)';
}
String get _backgroundColor {
final TokenColorRole? containerColor = _containerColor;
if (containerColor == null) {
return 'const WidgetStatePropertyAll<Color>(Colors.transparent)';
}

Comment on lines +155 to +166
String get _shadowColor {
return switch (_variant) {
_ButtonVariant.elevated =>
'MaterialStatePropertyAll<Color>(${color(TokenButtonElevated.containerShadowColor, '_colors')})',
_ButtonVariant.filled =>
'MaterialStatePropertyAll<Color>(${color(TokenButtonFilled.containerShadowColor, '_colors')})',
_ButtonVariant.filledTonal =>
'MaterialStatePropertyAll<Color>(${color(TokenButtonTonal.containerShadowColor, '_colors')})',
_ButtonVariant.outlined ||
_ButtonVariant.text => 'const MaterialStatePropertyAll<Color>(Colors.transparent)',
};
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Use WidgetStatePropertyAll instead of MaterialStatePropertyAll for consistency and modernization.

Suggested change
String get _shadowColor {
return switch (_variant) {
_ButtonVariant.elevated =>
'MaterialStatePropertyAll<Color>(${color(TokenButtonElevated.containerShadowColor, '_colors')})',
_ButtonVariant.filled =>
'MaterialStatePropertyAll<Color>(${color(TokenButtonFilled.containerShadowColor, '_colors')})',
_ButtonVariant.filledTonal =>
'MaterialStatePropertyAll<Color>(${color(TokenButtonTonal.containerShadowColor, '_colors')})',
_ButtonVariant.outlined ||
_ButtonVariant.text => 'const MaterialStatePropertyAll<Color>(Colors.transparent)',
};
}
String get _shadowColor {
return switch (_variant) {
_ButtonVariant.elevated =>
'WidgetStatePropertyAll<Color>(${color(TokenButtonElevated.containerShadowColor, '_colors')})',
_ButtonVariant.filled =>
'WidgetStatePropertyAll<Color>(${color(TokenButtonFilled.containerShadowColor, '_colors')})',
_ButtonVariant.filledTonal =>
'WidgetStatePropertyAll<Color>(${color(TokenButtonTonal.containerShadowColor, '_colors')})',
_ButtonVariant.outlined ||
_ButtonVariant.text => 'const WidgetStatePropertyAll<Color>(Colors.transparent)',
};
}

Comment on lines +168 to +171
String get _elevation {
if (_variant == _ButtonVariant.outlined || _variant == _ButtonVariant.text) {
return 'const MaterialStatePropertyAll<double>(0.0)';
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Use WidgetStatePropertyAll instead of MaterialStatePropertyAll for the outlined and text button elevation defaults.

Suggested change
String get _elevation {
if (_variant == _ButtonVariant.outlined || _variant == _ButtonVariant.text) {
return 'const MaterialStatePropertyAll<double>(0.0)';
}
String get _elevation {
if (_variant == _ButtonVariant.outlined || _variant == _ButtonVariant.text) {
return 'const WidgetStatePropertyAll<double>(0.0)';
}

Comment on lines +222 to +224
@override
WidgetStateProperty<TextStyle?> get textStyle =>
MaterialStatePropertyAll<TextStyle?>($_buttonTextStyle);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Use WidgetStatePropertyAll to match the WidgetStateProperty return type.

Suggested change
@override
WidgetStateProperty<TextStyle?> get textStyle =>
MaterialStatePropertyAll<TextStyle?>($_buttonTextStyle);
@override
WidgetStateProperty<TextStyle?> get textStyle =>
WidgetStatePropertyAll<TextStyle?>($_buttonTextStyle);

Comment on lines +256 to +258
@override
WidgetStateProperty<Color>? get surfaceTintColor =>
const MaterialStatePropertyAll<Color>(Colors.transparent);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Use WidgetStatePropertyAll instead of MaterialStatePropertyAll for surfaceTintColor.

Suggested change
@override
WidgetStateProperty<Color>? get surfaceTintColor =>
const MaterialStatePropertyAll<Color>(Colors.transparent);
@override
WidgetStateProperty<Color>? get surfaceTintColor =>
const WidgetStatePropertyAll<Color>(Colors.transparent);

Comment on lines +267 to +269
@override
WidgetStateProperty<Size>? get minimumSize =>
const MaterialStatePropertyAll<Size>(Size(64.0, ${number(TokenButton.containerHeight)}));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Use WidgetStatePropertyAll instead of MaterialStatePropertyAll for minimumSize.

Suggested change
@override
WidgetStateProperty<Size>? get minimumSize =>
const MaterialStatePropertyAll<Size>(Size(64.0, ${number(TokenButton.containerHeight)}));
@override
WidgetStateProperty<Size>? get minimumSize =>
const WidgetStatePropertyAll<Size>(Size(64.0, ${number(TokenButton.containerHeight)}));

Comment on lines +273 to +274
@override
WidgetStateProperty<double>? get iconSize => const MaterialStatePropertyAll<double>($_legacyIconSize);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Use WidgetStatePropertyAll instead of MaterialStatePropertyAll for iconSize.

Suggested change
@override
WidgetStateProperty<double>? get iconSize => const MaterialStatePropertyAll<double>($_legacyIconSize);
@override
WidgetStateProperty<double>? get iconSize => const WidgetStatePropertyAll<double>($_legacyIconSize);

Comment on lines +295 to +296
@override
WidgetStateProperty<Size>? get maximumSize => const MaterialStatePropertyAll<Size>(Size.infinite);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Use WidgetStatePropertyAll instead of MaterialStatePropertyAll for maximumSize.

Suggested change
@override
WidgetStateProperty<Size>? get maximumSize => const MaterialStatePropertyAll<Size>(Size.infinite);
@override
WidgetStateProperty<Size>? get maximumSize => const WidgetStatePropertyAll<Size>(Size.infinite);

Comment on lines +300 to +302
@override
WidgetStateProperty<OutlinedBorder>? get shape =>
const MaterialStatePropertyAll<OutlinedBorder>(${shape(TokenButton.containerShapeRound, '')});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Use WidgetStatePropertyAll instead of MaterialStatePropertyAll for shape.

Suggested change
@override
WidgetStateProperty<OutlinedBorder>? get shape =>
const MaterialStatePropertyAll<OutlinedBorder>(${shape(TokenButton.containerShapeRound, '')});
@override
WidgetStateProperty<OutlinedBorder>? get shape =>
const WidgetStatePropertyAll<OutlinedBorder>(${shape(TokenButton.containerShapeRound, '')});

Comment on lines +271 to +274
expect(
contents,
contains('MaterialStatePropertyAll<TextStyle?>(Theme.of(context).textTheme.labelLarge)'),
);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Update the test expectation to expect WidgetStatePropertyAll instead of MaterialStatePropertyAll to match the updated template.

Suggested change
expect(
contents,
contains('MaterialStatePropertyAll<TextStyle?>(Theme.of(context).textTheme.labelLarge)'),
);
expect(
contents,
contains('WidgetStatePropertyAll<TextStyle?>(Theme.of(context).textTheme.labelLarge)'),
);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

p: material_ui triage-design Should be looked at in design triage

Projects

None yet

Development

Successfully merging this pull request may close these issues.

button_template.dart

1 participant