Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to adjust Flutter TextField height?

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

like image 209
krishnakeshan Avatar asked Nov 28 '22 21:11

krishnakeshan


1 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)),
                  ),
                ),
              ),
like image 166
Jewel Rana Avatar answered Dec 05 '22 03:12

Jewel Rana