Default TextField styles result in cursor overlapping labelText
#141354
Assignees
Labels
a: text input
Entering text in a text field or keyboard related problems
f: material design
flutter/packages/flutter/material repository.
found in release: 3.16
Found to occur in 3.16
found in release: 3.18
Found to occur in 3.18
framework
flutter/packages/flutter repository. See also f: labels.
has reproducible steps
The issue has been confirmed reproducible and is ready to work on
P1
High-priority issues at the top of the work list
r: fixed
Issue is closed as already fixed in a newer version
team-design
Owned by Design Languages team
triaged-design
Triaged by Design Languages team
Comments
25 tasks
|
Thanks for filing this!
✅ - Reproduces ❌ - Doesn't reproduce
stable, master flutter doctor -v
|
dam-ease
added
a: text input
justinmc
added
P1
|
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.
auto-submit bot
pushed a commit
that referenced
this issue
Feb 7, 2024
…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 | |--------|--------| |  |  | ## 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. |
auto-submit bot
pushed a commit
that referenced
this issue
Apr 9, 2024
## 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|  |  | |M2 macOs|  |  | </details> ## Related Issue Fixes #141354 ## Tests Adds 2 tests, updates 2 tests.
gilnobrega
pushed a commit
to gilnobrega/flutter
that referenced
this issue
Apr 22, 2024
## 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|  |  | |M2 macOs|  |  | </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 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Last update: #141354 (comment)
Steps to reproduce
TextFieldwith alabelTextspecifiedExpected results
When typing in a
TextFieldwithlabelText, 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: