Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter, content padding for TextFormField not working as expected

Flutter app, android: I am trying to reduce the bottom padding of a TextFormField (I need to fit quite a few fields onto fairly small screens [mobile android data collectors]).

I have tried using the contentPadding InputDecoration, but it does not work as I had expected it to.

Here is with a bottom-padding of 10:

decoration: InputDecoration(
...
  contentPadding: new EdgeInsets.fromLTRB(10, 10, 10, 10):

With bottom padding of 10

Here is with a bottom-padding of 4:

decoration: InputDecoration(
...
  contentPadding: new EdgeInsets.fromLTRB(10, 10, 10, 4):

With bottom padding of 4

As you can see, the bottom padding of the text inside the TextFormFields did not change much and there is still too much wasted space; also, for some reason the top padding also changed, making the content text get too close to the label text. I do not want the top padding to change.

How can I reduce the bottom padding (between the text and the border)?

Edit 11/18/2019, full TextFormField per request:

TextFormField(
  initialValue: widget.initialValue,
  textInputAction: TextInputAction.next,
  enabled: widget.enabled,
  minLines: widget.lines,
  maxLines: widget.lines,
  autofocus: widget.autoFocus,
  focusNode: widget.focusNode,
  keyboardType: widget.keyboardType,
  maxLength: widget.maxLength,
  maxLengthEnforced: true,
  readOnly: widget.readonly,
  inputFormatters: widget.inputFormatters,
  controller: widget.controller,
  style: TextStyle(
    fontSize: 17,
    color: widget.textColor != null ? widget.textColor : null,
  ),
  onFieldSubmitted: widget.onFieldSubmitted,
  onEditingComplete: widget.onEditingComplete,
  decoration: InputDecoration(
    labelText: widget.labelText,
    labelStyle: TextStyle(color: widget.enabled ? Colors.grey[600] : Colors.grey[500]),
    hintText: widget.hintText != null ? widget.hintText : widget.labelText,
    counterText: '',
    errorText: widget.errorText,
    filled: true,
    fillColor: widget.fillColor != null ? widget.fillColor : widget.enabled ? Colors.white : Colors.grey[100],
    contentPadding: new EdgeInsets.fromLTRB(10, 10, 10, 10),
    border: OutlineInputBorder(),
  ),
),
like image 846
Lars335 Avatar asked Oct 24 '25 02:10

Lars335


1 Answers

Try adding isDense:true in the inputDecoration for padding that is smaller than the default.That helped me


decoration: InputDecoration(
         isDense: true,


        // contentPadding: new EdgeInsets.fromLTRB(0, 0, 0, 0),

         contentPadding: EdgeInsets.only(top: 4,bottom: 4,left: 6,right: 6),
         hintText: "Enter name",

         hintStyle: TextStyle(color: Colors.grey),
         border: InputBorder.none,
       ),
like image 124
itachi sasuke Avatar answered Oct 25 '25 18:10

itachi sasuke