Skip to content

Label padding is wrong for InputDecorator with prefixIcon and/or suffixIcon #173341

@bleroux

Description

@bleroux

Steps to reproduce

  1. Run the code sample
  2. Observe the width differences

Expected results

For InputDecorator, when the label (yellow box) appears within the input, its width should be the same as the content width (green box).
For TextField (which relies on InputDecorator), the label text (second TextField) and the content text (first TextField) should have the same width.

Image

Actual results

The label width is smaller than the content width because some extra padding is added.

Image

Code sample

Code sample
import 'package:flutter/material.dart';

void main() => runApp(const InputDecorationLabelPaddingIssue());

class InputDecorationLabelPaddingIssue extends StatelessWidget {
  const InputDecorationLabelPaddingIssue({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(visualDensity: VisualDensity.standard),
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 250,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              spacing: 4.0,
              children: <Widget>[
                const Text('InputDecorator'),
                InputDecorator(
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    suffixIcon: Icon(Icons.align_horizontal_left_sharp),
                    prefixIcon: Icon(Icons.align_horizontal_right_sharp),
                  ),
                  child: Container(width: 200, height: 24, color: Colors.green),
                ),
                InputDecorator(
                  isEmpty: true,
                  decoration: InputDecoration(
                    // The InputDecorator is empty so the label is used as hint.
                    label: Container(width: 200, height: 24, color: Colors.amber),
                    border: const OutlineInputBorder(),
                    suffixIcon: const Icon(Icons.align_horizontal_left_sharp),
                    prefixIcon: const Icon(Icons.align_horizontal_right_sharp),
                  ),
                ),
                const SizedBox(height: 4.0),
                const Text('TextField'),
                TextField(
                  controller: TextEditingController(text: '012345678901234'),
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    suffixIcon: Icon(Icons.align_horizontal_left_sharp),
                    prefixIcon: Icon(Icons.align_horizontal_right_sharp),
                  ),
                ),
                const TextField(
                  decoration: InputDecoration(
                    // The InputDecorator is empty so the label is used as hint.
                    labelText: '012345678901234',
                    border: OutlineInputBorder(),
                    suffixIcon: Icon(Icons.align_horizontal_left_sharp),
                    prefixIcon: Icon(Icons.align_horizontal_right_sharp),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Logs

No response

Flutter Doctor output

Doctor output
Flutter (Channel master, 3.33.0-1.0.pre-1299, on Ubuntu 24.04.2 LTS 6.8.0-71-generic, locale fr_FR.UTF-8)

Metadata

Metadata

Assignees

Labels

a: text inputEntering text in a text field or keyboard related problemsf: material designflutter/packages/flutter/material repository.found in release: 3.32Found to occur in 3.32found in release: 3.33Found to occur in 3.33frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-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