-
Notifications
You must be signed in to change notification settings - Fork 27k
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
Default TextField
styles result in cursor overlapping labelText
#141354
Comments
FYI, since #141943 has landed, the rendering is a little less worse (not very visible but the cursor in no more inside the 'b' of 'label'): This is because the main problem was related to the label positioning not taking properly line height into account (the label text line height is 1.5 for M3, for M2 it was 1.0, with this recent PR label line height is forced to 1.0, which is not compliant with M3 spec, but gives a better result). I will see if it is possible to get a proper positioning for the label text without forcing line height to 1.0. A secondary problem is that the cursor height is too much. This is because it defaults to Updated code sample with cursor height sets to 18 :import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: SizedBox(
width: 300,
child: TextField(
cursorHeight: 18.0,
decoration: InputDecoration(
labelText: 'Label text',
filled: true,
),
),
),
),
),
);
}
} Which renders this way: @justinmc Do you know if there is some ongoing work related to adjusting the cursor position? |
This comment was marked as outdated.
This comment was marked as outdated.
…igration (#142981) ## Description This PR main purpose is to make progress on the M3 test migration for `InputDecorator` (see #139076). Before this PR more than 80 of the 156 tests defined in `input_decorator_test.dart` fail on M3. Migrating all those tests in one shot is not easy at all because many failures are related to wrong positionning due to M3 typography changes. Another reason is that several M3 specific changes are required in order to get a proper M3 compliant text field, for instance: - #142972 - #141354 Most of the tests were relying on an helper function (`buildInputDecorator`) which had a `useMaterial3` parameter. Unfortunately when `useMaterial3: true `was passed to this function it forced `useMaterial3: false` at the top level but overrided it at a lower level, which was very misleading because people could assume that the tests are ok with M3 (but in fact they were run using M2 typography but have some M3 logic in use). I considered various way to make this change and I finally decided to run all existing tests only on M2 for the moment. Next step will be to move most of those tests to M3. In this PR, I migrated two of these existing tests for illustration. Because many of the existing tests are checking input decorator height, I think it would also make sense to fix #142972 first. That's why I choosed to include a fix to #142972 in this PR. A M3 filled `TextField` on Android: | Before this PR | After this PR | |--------|--------| | ![image](https://github.com/flutter/flutter/assets/840911/403225b7-4c91-4aee-b19c-0490447ae7e3) | ![image](https://github.com/flutter/flutter/assets/840911/e96cf786-a9f5-4e15-bcdd-078350ff1608) | ## Related Issue Fixes #142972 Related to #139076 ## Tests Updates many existing tests + adds 2 tests related to the fix for #142972 + adds 1 tests for the M3 migration + move 1 tests related to M3
This comment was marked as outdated.
This comment was marked as outdated.
Unassigning myself for the moment as there is no consensus on a valid solution. Summary of this issue: on Apple platforms, the cursor height is 26 for a default Material 3 text field (font size is 16, text field height is 24, as specified on M3 spec). Why the current cursor height is 26 on Apple platforms? :
In order to make progress we should answer the following questions:
For reference, a video illustrating current default cursor height and default selection highlight height: Enregistrement.de.l.ecran.2024-02-29.a.17.32.43.mov |
While migrating InputDecorator tetss, I found that in addition to the cursor being too tall on Apple platforms, the label is wrongly posiitoned on desktop (Visual density is ignored). Filed #146488. |
## Description This PRs makes the label vertical position depend on visual density for filled text field. Previously, for M2 and M3, the label vertical offset was always the same (12 on M2, 8 and M3) despite different visual density configuration. This was noticable on desktop and can lead to weird rendering especially on M3 where line height makes the cursor taller. Screenshots for a filled text field: | | Before | After | |--------|--------|--------| |M3 macOs| ![image](https://github.com/flutter/flutter/assets/840911/bd9bdb6e-477c-4db0-ae8f-74e18d19f29e) | ![image](https://github.com/flutter/flutter/assets/840911/25e59c44-0139-4813-be28-472302d6970e) | |M2 macOs| ![image](https://github.com/flutter/flutter/assets/840911/1c52493b-b17b-407b-93cc-69120207b716) | ![image](https://github.com/flutter/flutter/assets/840911/1fc4a8b6-429b-476c-b5bf-ff2934bf5293) | </details> ## Related Issue Fixes #141354 ## Tests Adds 2 tests, updates 2 tests.
## Description This PRs makes the label vertical position depend on visual density for filled text field. Previously, for M2 and M3, the label vertical offset was always the same (12 on M2, 8 and M3) despite different visual density configuration. This was noticable on desktop and can lead to weird rendering especially on M3 where line height makes the cursor taller. Screenshots for a filled text field: | | Before | After | |--------|--------|--------| |M3 macOs| ![image](https://github.com/flutter/flutter/assets/840911/bd9bdb6e-477c-4db0-ae8f-74e18d19f29e) | ![image](https://github.com/flutter/flutter/assets/840911/25e59c44-0139-4813-be28-472302d6970e) | |M2 macOs| ![image](https://github.com/flutter/flutter/assets/840911/1c52493b-b17b-407b-93cc-69120207b716) | ![image](https://github.com/flutter/flutter/assets/840911/1fc4a8b6-429b-476c-b5bf-ff2934bf5293) | </details> ## Related Issue Fixes flutter#141354 ## Tests Adds 2 tests, updates 2 tests.
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of |
Last update: #141354 (comment)
Steps to reproduce
TextField
with alabelText
specifiedExpected results
When typing in a
TextField
withlabelText
, the default styling won't result in the cursor overlapping the label text.The M3 spec showcases the cursor as much thinner and shorter, preventing this from occurring.
Actual results
The cursor overlaps the label text, making it potentially harder to read.
Code sample
Code sample
Screenshots
Screenshot
Flutter version info
Version
The text was updated successfully, but these errors were encountered: