flutterflutter-layout

How to reduce padding on prefixIcon on TextField?


I can't figure out how to get past the 48px Material library default. I did a quick scan through the SDK and couldn't find anything. I know it's something to do with the prefixIcon parameter itself because it will always be 48px or whatever it is no matter what is placed inside.

I have a custom SDK so if anyone knows where it is I'd like to reduce it because it always just gets in the way.

enter image description here

  // : Searchbar Decoration
  static InputDecoration searchbarDecoration = InputDecoration(
    prefixIcon: Icon(
      Icons.search,
      color: DocumentColours.colour10,
    ),
    contentPadding: EdgeInsets.symmetric(
      vertical: 0.0,
      horizontal: 0.0,
    ),
    fillColor: DocumentColours.colour8,
    filled: true,
    labelText: 'Search',
    labelStyle: FontStyles.searchbarLabel,
    hasFloatingPlaceholder: false,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(5.0),
      borderSide: BorderSide(width: 0.0, style: BorderStyle.none),
    ),
  );


Solution

  • NOTE: To solve this, use the prefixIconConstraints property of the InputDecoration as of SDK version 1.17.0

    Below is what the documentation says (1.17.0) input_decorater.dart:

    BoxConstraints can be used to modify the surrounding of the prefixIcon. This property is particularly useful for getting the decoration's height less than 48px. This can be achieved by setting [isDense] to true and setting the constraints' minimum height and width to a value lower than 48px.

    Check the code below: It works perfectly:

    TextField(
        decoration: InputDecoration(
          // choose any icon of your choice here
          prefixIcon: Icon(Icons.person),
          // set the prefix icon constraints
          prefixIconConstraints: BoxConstraints(
            minWidth: 25,
            minHeight: 25,
          ),
        ),
      ),
    

    I hope this helps.