-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Closed
Closed
Copy link
Labels
a: text inputEntering text in a text field or keyboard related problemsEntering text in a text field or keyboard related problemsf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.found in release: 3.32Found to occur in 3.32Found to occur in 3.32found in release: 3.33Found to occur in 3.33Found to occur in 3.33frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-text-inputOwned by Text Input teamOwned by Text Input team
Description
Steps to reproduce
- Run the code sample
- 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.
Actual results
The label width is smaller than the content width because some extra padding is added.
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 problemsEntering text in a text field or keyboard related problemsf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.found in release: 3.32Found to occur in 3.32Found to occur in 3.32found in release: 3.33Found to occur in 3.33Found to occur in 3.33frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-text-inputOwned by Text Input teamOwned by Text Input team
Type
Projects
Status
Done (PR merged)