Home > Mobile >  How to reduce Space between textfield and the input text in flutter
How to reduce Space between textfield and the input text in flutter

Time:09-16

I am developing this textfield and for some reason the text is having some space below it. Please let me know the solution to this.

This is my code for textfield.

Expanded(
              child: Container(
                height: 40,
                child: TextField(
                  keyboardType: TextInputType.number,
                  controller: textEditingController,
                  style: TextStyle(
                      fontSize: 14, height: 0, color: Colors.white),
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.digitsOnly
                  ],
                  decoration: InputDecoration(

                      // isDense: true,
                      // errorText: validateQtyTxt.toString(),
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10)),
                      labelText: 'QTY > '
                      // hintText: 'Enter a search term',
                      ),
                  onChanged: (String newValue) {
                    (text) => setState(() => _text);
                    print(newValue);
                    int qty;
                    derivativeScanController.buttonClick(newValue, qty);
                  },
                ),
              ),
            ),

This is the image for reference enter image description here

CodePudding user response:

There is a property called contentPadding which takes EdgeInsetsGeometry type value with that you can reduce the spacing between textfield and actual text sample code .

contentPadding: EdgeInsets.zero,

if you want to remove all the spacing change the isDense property to true also

 isDense: true,

all the space will be removed

CodePudding user response:

You can use the contentPadding in the decoration property of the TextField to edit its padding. https://api.flutter.dev/flutter/material/InputDecoration-class.html

TextField(
  decoration: InputDecoration(
    contentPadding: EdgeInsets.only(...),
  ),
)

Which you can fill with whatever values you want. You can use things like EdgeInsets.zero or EdgeInsets.symmetric too: https://api.flutter.dev/flutter/painting/EdgeInsets-class.html

CodePudding user response:

Change the textStyle from 0 to 1 and adjust the text using padding.

  • Related