Skip to content

InputDecorator gap between prefixIcon and input field is not compliant #149408

@bleroux

Description

@bleroux

Steps to reproduce

  1. Run the given test

Expected results

The label and input text left position should be 52 pixels, per M3 spec.

image

Actual results

The label and input text left position is 48 pixels.

Code sample

Code sample
  testWidgets('Input text horizontal position when prefixIcon is set', (WidgetTester tester) async {
    const String label = "label";
    const String content = "Flutter";
    final TextEditingController controller = TextEditingController(text: content);
    addTearDown(controller.dispose);

    await tester.pumpWidget(
      MaterialApp(
        home: Material(
          child: Align(
            alignment: Alignment.topLeft,
            child: TextField(
              controller: controller,
              autofocus: true,
              decoration: const InputDecoration(
                filled: true,
                labelText: label,
                prefixIcon: Icon(Icons.search),
              ),
            ),
          ),
        ),
      ),
    );

    expect(find.text(label), findsOne);
    expect(find.text(content), findsOne);

    expect(tester.getSize(find.byType(TextField)), const Size(800.0, 56.0));
    expect(tester.getTopLeft(find.text(label)).dx, 52.0);
    expect(tester.getTopLeft(find.text(content)).dx, 52.0);
  });

Screenshots or Video

No response

Logs

Error logs
══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════
The following TestFailure was thrown running a test:
Expected: <52>
  Actual: <48.0>

When the exception was thrown, this was the stack:
#4      main.<anonymous closure> (file:///home/bruno/Nevercode/Investigation/investigationapp/test/useM3Migration/input_decorator/input_decorator_basic_test.dart:98:5)
<asynchronous suspension>
#5      testWidgets.<anonymous closure>.<anonymous closure> (package:flutter_test/src/widget_tester.dart:183:15)
<asynchronous suspension>
#6      TestWidgetsFlutterBinding._runTestBody (package:flutter_test/src/binding.dart:1025:5)
<asynchronous suspension>
<asynchronous suspension>
(elided one frame from package:stack_trace)

This was caught by the test expectation on the following line:
  file:///home/bruno/Nevercode/Investigation/investigationapp/test/useM3Migration/input_decorator/input_decorator_basic_test.dart line 98
The test description was:
  TextField height
════════════════════════════════════════════════════════════════════════════════════════════════════

Flutter Doctor output

Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel [user-branch], 3.22.0-18.0.pre.572, on Ubuntu 24.04 LTS

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemsf: material designflutter/packages/flutter/material repository.found in release: 3.22Found to occur in 3.22found in release: 3.23Found to occur in 3.23frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-text-inputOwned by Text Input team

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions