Add InputDecoration.suffixIconGap #167558
Conversation
69cf830 to
bd8f87c
Compare
|
@justinmc I did not consider a similar parameter for the prefix in this PR. |
There was a problem hiding this comment.
Can you explain why DropdownButtonFormField would need to use this to match the Material spec but TextField would not? E.g. why this needs to be a public API.
I thought that I had seen one or more issues that mentioned wanting control over this kinds of gap spacing, but I couldn't find any with a quick search. My opinion is that it's probably useful to let people control this gap spacing, but there will be a maintenance burden and InputDecorator's _layout method is already super complex, so we should be sure that the upsides are worth the downsides.
I am ok with leaving out prefixIconGap for now.
DropdownMenuFormField is currently using a Row to position the selected item label and the arrow down/up icon. Doing so there is no gap between the label and the icon (this is the root cause of the issue described in #157074). #163205 removes the icon from the Row and passes it to InputDecorator.suffixIcon. This fixes the vertical alignment issue as it leverages the existing InputDecoration positioning logic.
The fix in #163205 relies on configuring the InputDecorator used by DropdownButtonFormField. I don't think this can be done without making this parameter public. In summary, the question is does fixing #157074 is worth adding a new parameter to InputDecoration which is already complex (and if we add this parameter for the suffix icon, someone will probably ask for something similar for the prefix icon). |
bd8f87c to
df29661
Compare
df29661 to
02ada41
Compare
|
I think this is worth fixing even if we have to add the suffixGap parameter, but I want to make sure there's not a better way. I notice that the horizontal position of the suffix of DropdownButtonFormField (top) is off compared to TextField (middle) and raw InputDecorator (bottom). Is that something that could/should be fixed to avoid needing suffixGap? (This screenshot is from master so the vertical position is still off, but ignore that.)
Codeimport 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: SizedBox(
width: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DropdownButtonFormField<String>(
onChanged: (_) {},
decoration: InputDecoration(
labelText: 'Label text',
),
padding: EdgeInsets.only(right: 34.0),
items: [
DropdownMenuItem(
value: 'selected',
child: Text('Selected item'),
),
],
),
InputDecorator(
decoration: InputDecoration(
labelText: 'Label text',
suffixIcon: Icon(Icons.arrow_drop_down),
),
),
TextField(
decoration: InputDecoration(
labelText: 'Label text',
suffixIcon: Icon(Icons.arrow_drop_down),
),
),
],
),
),
),
),
);
}
} |
|
Yes, the suffix icon horizontal position is also different in DropdownButtonFormField.
Code sample without the 34 right paddingimport 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: SizedBox(
width: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DropdownButtonFormField<String>(
onChanged: (_) {},
decoration: InputDecoration(labelText: 'Label text'),
//padding: EdgeInsets.only(right: 34.0),
items: [DropdownMenuItem(value: 'selected', child: Text('Selected item'))],
),
InputDecorator(
decoration: InputDecoration(
labelText: 'Label text',
suffixIcon: Icon(Icons.arrow_drop_down),
),
),
TextField(
decoration: InputDecoration(
labelText: 'Label text',
suffixIcon: Icon(Icons.arrow_drop_down),
),
),
],
),
),
),
),
);
}
}
The reason why the horizontal position is not the same is that DropdownButtonFormField put the suffix in a Row after the content and does not add any padding or constraints to the icon. So the icon is 24x24 and the content expands on all the remaining width.
With a default InputDecorator, the suffixIcon constraints are set to 48x48 (default tap target size on mobile) or 40x40 (default target size on desktop). There is also this 4 pixels gap before the suffixIcon:
Code sample updated to make InputDecorator content visibleimport 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: SizedBox(
width: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DropdownButtonFormField<String>(
onChanged: (_) {},
decoration: InputDecoration(labelText: 'Label text'),
//padding: EdgeInsets.only(right: 34.0),
items: [DropdownMenuItem(value: 'selected', child: Text('Selected item'))],
),
InputDecorator(
decoration: InputDecoration(
labelText: 'Label text',
suffixIcon: Icon(Icons.arrow_drop_down),
),
child: Container(height: 24, color: Colors.amber),
),
TextField(
decoration: InputDecoration(
labelText: 'Label text',
suffixIcon: Icon(Icons.arrow_drop_down),
),
),
],
),
),
),
),
);
}
}
#163205 fix will mimics existing DroddownButtonFormField horizontal positioning by setting InputDecoration.suffixIconConstraints to 24. Without the ability to remove the 4 pixels gap there will be a small difference which results in the content width losing 4 pixels. Based on #163205 (comment), it seems to break several Google tests. But maybe the breakages where related to some width missing for another reason. Let me update #163205 as it currently contains experimentation and part of the fix was missing. That way you will be able to see what are the remaining Google testing failures and see if removing the gap is really needed. |
|
Marking as WIP as it might not be needed, see #163205 (comment). |
Description
This PR introduces
InputDecoration.suffixIconGapandInputDecoration.suffixIconGap.Those parameters make it possible to configure the gap between the input decoration content and the suffix icon (defaults are 4 pixels for M3 and 0 for M2). This gap was already implemented in InputDecoration but not configurable.
Related Issue
Needed to make progress on #163205.
Tests
Adds 1 test.