How to adjust Flutter TextField height?

user_7091867 0
Viewed 14490

I'm building a social networking app with Flutter and all the TextFields are very tall. I have tried adjusting the contentPadding parameter but it doesn't work. The problem goes away when I remove the inputDecoration (i.e. set it to null) but in that case I am unable to display any hint text.

I've also tried wrapping the TextField inside a Container and setting the height of the Container but that doesn't help either. It just distorts the entire TextField.

screenshot of app with extended TextField

flutter mobile android ios
3 Answers

enter image description here

Use these two lines to control TextFormField Height inside InputDecoration .

isDense: true, 
contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),

Full example

Material(
                elevation: 4,
                shadowColor: Colors.blue,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                child: Padding(
                  padding: const EdgeInsets.only(left: 12),
                  child: TextFormField(
                    controller: searchProvider.searchController,
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                        hintText: 'hintText',
                        isDense: true, // important line
                        contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),// control your hints text size
                        hintStyle: TextStyle(letterSpacing: 2, color: Colors.black54, fontWeight: FontWeight.bold),
                        fillColor:  Colors.white30 ,
                        filled: true,
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(30), borderSide: BorderSide.none)),
                  ),
                ),
              ),
user_71014820

Try this ! This will decrease slightly !

               TextField(
                      decoration: InputDecoration(
                        contentPadding:EdgeInsets.fromLTRB(10,0,10,0),
                        //The above line will help !
                        border: OutlineInputBorder(),
                        labelText: 'Name',
                        labelStyle:
                            TextStyle(color: Colors.white, fontSize: 17),
                      ),
                      style: TextStyle(color: Colors.white, fontSize: 17),
                    ),
user_55574790

Try this:

TextField(
    decoration: InputDecoration(
        isDense: true,
        contentPadding: EdgeInsets.zero,
        border: InputBorder.none,
        hintText: Strings.settingGoodsTitle
    )
)
user_130997320
Related