How to reduce padding on prefixIcon on TextField?

user_13142325 0
Viewed 5876

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),
    ),
  );
flutter-layout flutter
2 Answers

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.

user_134526400

My way is to custom my own textfield component using Row > Icon + TextField, just forget there is a prefixIcon in TextField.

like:


Container(
  width: 200.0,
  height: 40.0,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(3.0),
  ),
  child: Row(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(
          left: 13.0,
          right: 6.0,
        ),
        child: Icon(
          Icons.search,
          size: 16.0,
        ),
      ),
      TextField(
        // ...
      ),
    ],
  ),
),
user_122425140
Related