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.
// : 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),
),
);
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.