Fix: Gap between prefix and suffix icon and input field in input deco… (#152069)

Adjust the gap between TextField prefix/suffix and its content. Results in a small visual change for TextFields that use prefix and/or suffix.

Author: rkishan516

packages/flutter/lib/src/material/dropdown_menu.dart

@@ -47,6 +47,8 @@ const double _kMinimumWidth = 112.0;
 
 const double _kDefaultHorizontalPadding = 12.0;
 
+const double _kLeadingIconToInputPadding = 4.0;
+
 /// Defines a [DropdownMenu] menu button that represents one item view in the menu.
 ///
 /// See also:
@@ -610,7 +612,12 @@ class _DropdownMenuState<T> extends State<DropdownMenu<T>> {
         return;
       }
       setState(() {
-        leadingPadding = getWidth(_leadingKey);
+        final double? leadingWidgetWidth = getWidth(_leadingKey);
+        if (leadingWidgetWidth != null) {
+          leadingPadding = leadingWidgetWidth + _kLeadingIconToInputPadding;
+        } else {
+          leadingPadding = leadingWidgetWidth;
+        }
       });
     }, debugLabel: 'DropdownMenu.refreshLeadingPadding');
   }
@@ -686,7 +693,7 @@ class _DropdownMenuState<T> extends State<DropdownMenu<T>> {
       // menu entry have leading icons, the menu entry should remove the extra
       // paddings so its leading icon will be aligned with the leading icon of
       // the text field.
-      final double padding = entry.leadingIcon == null ? (leadingPadding ?? _kDefaultHorizontalPadding) : _kDefaultHorizontalPadding;
+      final double padding = entry.leadingIcon == null ? (leadingPadding ?? _kDefaultHorizontalPadding) : (_kDefaultHorizontalPadding + _kLeadingIconToInputPadding);
       ButtonStyle effectiveStyle = entry.style ?? switch (textDirection) {
         TextDirection.rtl => MenuItemButton.styleFrom(padding: EdgeInsets.only(left: _kDefaultHorizontalPadding, right: padding)),
         TextDirection.ltr => MenuItemButton.styleFrom(padding: EdgeInsets.only(left: padding, right: _kDefaultHorizontalPadding)),

packages/flutter/lib/src/material/input_decorator.dart

@@ -740,6 +740,8 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin
   // TODO(bleroux): consider defining this value as a Material token and making it
   // configurable by InputDecorationTheme.
   double get subtextGap => material3 ? 4.0 : 8.0;
+  double get prefixToInputGap => material3 ? 4.0 : 0.0;
+  double get inputToSuffixGap => material3 ? 4.0 : 0.0;
 
   RenderBox? get icon => childForSlot(_DecorationSlot.icon);
   RenderBox? get input => childForSlot(_DecorationSlot.input);
@@ -997,8 +999,8 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin
     final Size suffixSize = suffix == null ? Size.zero : layoutChild(suffix, contentConstraints);
 
     final EdgeInsetsDirectional accessoryHorizontalInsets = EdgeInsetsDirectional.only(
-      start: iconWidth + prefixSize.width + (prefixIcon == null ? contentPadding.start : prefixIconSize.width),
-      end: suffixSize.width + (suffixIcon == null ? contentPadding.end : suffixIconSize.width),
+      start: iconWidth + prefixSize.width + (prefixIcon == null ? contentPadding.start : prefixIconSize.width + prefixToInputGap),
+      end: suffixSize.width + (suffixIcon == null ? contentPadding.end : suffixIconSize.width + inputToSuffixGap),
     );
 
     final double inputWidth = math.max(0.0, constraints.maxWidth - accessoryHorizontalInsets.horizontal);
@@ -1165,25 +1167,25 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin
   @override
   double computeMinIntrinsicWidth(double height) {
     return _minWidth(icon, height)
-      + (prefixIcon != null ? 0.0 : contentPadding.start)
+      + (prefixIcon != null ? prefixToInputGap : contentPadding.start)
       + _minWidth(prefixIcon, height)
       + _minWidth(prefix, height)
       + math.max(_minWidth(input, height), _minWidth(hint, height))
       + _minWidth(suffix, height)
       + _minWidth(suffixIcon, height)
-      + (suffixIcon != null ? 0.0 : contentPadding.end);
+      + (suffixIcon != null ? inputToSuffixGap : contentPadding.end);
   }
 
   @override
   double computeMaxIntrinsicWidth(double height) {
     return _maxWidth(icon, height)
-      + (prefixIcon != null ? 0.0 : contentPadding.start)
+      + (prefixIcon != null ? prefixToInputGap : contentPadding.start)
       + _maxWidth(prefixIcon, height)
       + _maxWidth(prefix, height)
       + math.max(_maxWidth(input, height), _maxWidth(hint, height))
       + _maxWidth(suffix, height)
       + _maxWidth(suffixIcon, height)
-      + (suffixIcon != null ? 0.0 : contentPadding.end);
+      + (suffixIcon != null ? inputToSuffixGap : contentPadding.end);
   }
 
   double _lineHeight(double width, List<RenderBox?> boxes) {
@@ -1371,6 +1373,7 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin
         if (prefixIcon != null) {
           start += contentPadding.start;
           start -= centerLayout(prefixIcon!, start - prefixIcon!.size.width);
+          start -= prefixToInputGap;
         }
         if (label != null) {
           if (decoration.alignLabelWithHint) {
@@ -1391,6 +1394,7 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin
         if (suffixIcon != null) {
           end -= contentPadding.end;
           end += centerLayout(suffixIcon!, end);
+          end += inputToSuffixGap;
         }
         if (suffix != null) {
           end += baselineLayout(suffix!, end);
@@ -1401,6 +1405,7 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin
         if (prefixIcon != null) {
           start -= contentPadding.start;
           start += centerLayout(prefixIcon!, start);
+          start += prefixToInputGap;
         }
         if (label != null) {
           if (decoration.alignLabelWithHint) {
@@ -1421,6 +1426,7 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin
         if (suffixIcon != null) {
           end += contentPadding.end;
           end -= centerLayout(suffixIcon!, end - suffixIcon!.size.width);
+          end -= inputToSuffixGap;
         }
         if (suffix != null) {
           end -= baselineLayout(suffix!, end - suffix!.size.width);

packages/flutter/test/material/dropdown_menu_test.dart

@@ -14,6 +14,7 @@ void main() {
   const String longText = 'one two three four five six seven eight nine ten eleven twelve';
   final List<DropdownMenuEntry<TestMenu>> menuChildren = <DropdownMenuEntry<TestMenu>>[];
   final List<DropdownMenuEntry<TestMenu>> menuChildrenWithIcons = <DropdownMenuEntry<TestMenu>>[];
+  const double leadingIconToInputPadding = 4.0;
 
   for (final TestMenu value in TestMenu.values) {
     final DropdownMenuEntry<TestMenu> entry = DropdownMenuEntry<TestMenu>(value: value, label: value.label);
@@ -921,7 +922,7 @@ void main() {
     final Offset updatedItemTextTopLeft = tester.getTopLeft(updatedItemText);
 
     expect(updatedLabelTopLeft.dx, equals(updatedItemTextTopLeft.dx));
-    expect(updatedLabelTopLeft.dx, equals(iconWidth));
+    expect(updatedLabelTopLeft.dx, equals(iconWidth + leadingIconToInputPadding));
 
     // Test when then leading icon is a widget with a bigger size.
     await tester.pumpWidget(Container());
@@ -943,7 +944,7 @@ void main() {
     final Offset updatedItemTextTopLeft1 = tester.getTopLeft(updatedItemText1);
 
     expect(updatedLabelTopLeft1.dx, equals(updatedItemTextTopLeft1.dx));
-    expect(updatedLabelTopLeft1.dx, equals(largeIconWidth));
+    expect(updatedLabelTopLeft1.dx, equals(largeIconWidth + leadingIconToInputPadding));
   });
 
   testWidgets('The text in the menu button should be aligned with the text of '
@@ -1002,7 +1003,7 @@ void main() {
     final Offset updatedItemTextTopRight = tester.getTopRight(updatedItemText);
 
     expect(updatedLabelTopRight.dx, equals(updatedItemTextTopRight.dx));
-    expect(updatedLabelTopRight.dx, equals(dropdownMenuTopRight.dx - iconWidth));
+    expect(updatedLabelTopRight.dx, equals(dropdownMenuTopRight.dx - iconWidth - leadingIconToInputPadding));
 
     // Test when then leading icon is a widget with a bigger size.
     await tester.pumpWidget(Container());
@@ -1033,7 +1034,7 @@ void main() {
     final Offset updatedItemTextTopRight1 = tester.getTopRight(updatedItemText1);
 
     expect(updatedLabelTopRight1.dx, equals(updatedItemTextTopRight1.dx));
-    expect(updatedLabelTopRight1.dx, equals(updatedDropdownMenuTopRight.dx - largeIconWidth));
+    expect(updatedLabelTopRight1.dx, equals(updatedDropdownMenuTopRight.dx - largeIconWidth - leadingIconToInputPadding));
   });
 
   testWidgets('DropdownMenu has default trailing icon button', (WidgetTester tester) async {
@@ -2712,14 +2713,14 @@ void main() {
     await tester.pumpAndSettle();
 
     // Check text location in text field.
-    expect(tester.getTopLeft(find.text('Hint')).dx, 48.0);
+    expect(tester.getTopLeft(find.text('Hint')).dx, 52.0);
 
     // By default, the text of item 0 should be aligned with the text of the text field.
-    expect(tester.getTopLeft(find.text('Item 0').last).dx, 48.0);
+    expect(tester.getTopLeft(find.text('Item 0').last).dx, 52.0);
 
     // By default, the text of item 1 should be aligned with the text of the text field,
     // so there are some extra padding before "Item 1".
-    expect(tester.getTopLeft(find.text('Item 1').last).dx, 48.0);
+    expect(tester.getTopLeft(find.text('Item 1').last).dx, 52.0);
   });
 
   testWidgets('DropdownMenu can have customized search algorithm', (WidgetTester tester) async {