Skip to content

InputDecorator gap between suffixIcon and input field is not compliant #149409

@bleroux

Description

@bleroux

Steps to reproduce

  1. Run the given test

Expected results

The input text right position should at 52 pixels from the text field right border, per M3 spec.

image

Actual results

The input text right position is at 48 pixels from the text field right border.

Code sample

Code sample
  testWidgets('Input horizontal position when suffixIcon is set', (WidgetTester tester) async {
    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 text',
                suffixIcon: Icon(Icons.search),
              ),
              //style: const TextStyle(height: 3.0),
            ),
          ),
        ),
      ),
    );

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

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

Screenshots or Video

No response

Logs

Logs
══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════
The following TestFailure was thrown running a test:
Expected: <748.0>
  Actual: <752.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:96: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 96
The test description was:
  Input horizontal position when suffixIcon is set
════════════════════════════════════════════════════════════════════════════════════════════════════

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