Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate TextField to Material 3 #108366

Merged
merged 3 commits into from
Jul 28, 2022

Conversation

hangyujin
Copy link
Contributor

@hangyujin hangyujin commented Jul 26, 2022

fixed: #103537

Migrate TextField to Material 3.

The inputDecorator is already migrated to M3 with fillColor, boderColor, iconColor, label text style, supporting text style.

So this PR is just to migrate input text style because it's in TextField, not the InputDecorator.

Pre-launch Checklist

  • I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
  • I read the [Tree Hygiene] wiki page, which explains my responsibilities.
  • I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
  • I signed the [CLA].
  • I listed at least one issue that this PR fixes in the description above.
  • I updated/added relevant documentation (doc comments with ///).
  • I added new tests to check the change I am making, or this PR is [test-exempt].
  • All existing and new tests are passing.

@flutter-dashboard flutter-dashboard bot added a: text input Entering text in a text field or keyboard related problems f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Jul 26, 2022
@hangyujin hangyujin changed the title Update input style [WIP] Update input style Jul 26, 2022
@flutter-dashboard flutter-dashboard bot added the team Infra upgrades, team productivity, code health, technical debt. See also team: labels. label Jul 27, 2022
@hangyujin hangyujin changed the title [WIP] Update input style Migrate TextField to Material 3 Jul 27, 2022
@flutter flutter deleted a comment from flutter-dashboard bot Jul 27, 2022
Copy link
Contributor

@HansMuller HansMuller left a comment

Choose a reason for hiding this comment

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

LGTM

editableText = tester.widget(find.byType(EditableText));
expect(editableText.style.color, setColor);

// inherit: false causes nothing to be merged in from theme
Copy link
Contributor

Choose a reason for hiding this comment

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

NICE

String generate() => '''
// Generated version ${tokens["version"]}

TextStyle _m3InputStyle(BuildContext context) => ${textStyle("md.comp.filled-text-field.label-text")}!;
Copy link
Contributor

Choose a reason for hiding this comment

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

Filled text fields and outlined text fields use the same text style? Same color?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes they are the same

@hangyujin hangyujin merged commit dd4154b into flutter:master Jul 28, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Jul 28, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 28, 2022
@hangyujin hangyujin deleted the M3-text-field-input-style branch August 1, 2022 14:42
camsim99 pushed a commit to camsim99/flutter that referenced this pull request Aug 10, 2022
* Update input style

* generate M3 text style

* Add test
@amorenew
Copy link

amorenew commented Nov 8, 2022

@hangyujin I tried the useMaterial3: true flag to enable the new Text Field but I can't see the new effect
Do I need to use the master channel?

Affected widgets: (not including TextField)
https://api.flutter.dev/flutter/material/ThemeData/useMaterial3.html

@nidegen
Copy link

nidegen commented Jun 6, 2023

How do I get the "filled" text field style in material 3?

Example on the left (Image from #103537)

Edit: Nevermind, use UnderlineInputBorder

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a: text input Entering text in a text field or keyboard related problems f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. team Infra upgrades, team productivity, code health, technical debt. See also team: labels.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update text fields to support Material 3
4 participants