Flutter how to make a TextField with HintText but no Underline

Question

This is what I m trying to make     In the Flutter docs for Text Fields  https   flutter io text-input   it says you can remove the underline by passing null to the decoration  However  that also gets rid of the hint text    I do not want any underline whether the text field is focused or not    UPDATE  updated accepted answer to reflect changes in Flutter SDK as of April 2020

User · Answer

I was using the TextField flutter control I got the user typed input using below methods   onChanged  value

User · Answer

Container           height  50               margin  EdgeInsets only top  20             decoration  BoxDecoration                color  Colors tealAccent                borderRadius  BorderRadius circular 32              child  TextFormField              cursorColor  Colors black                 keyboardType  TextInputType               decoration  InputDecoration                hintStyle  TextStyle fontSize  17                 hintText   Search your trips                 suffixIcon  Icon Icons search                 border  InputBorder none                contentPadding  EdgeInsets all 18

User · Answer

TextField widget has a property  decoration  which has a sub property  border  InputBorder none This property would Remove TextField Text Input Bottom Underline in Flutter app  So you can set the  border  property of the  decoration  of the TextField to  InputBorder none  see here for an example  border  InputBorder none    Hide bottom underline from Text Input widget   Container          width  280          padding  EdgeInsets all 8 0           child   TextField                  autocorrect  true                  decoration  InputDecoration                  border  InputBorder none                  hintText   Enter Some Text Here

User · Answer

You can use TextFormField widget of Flutter Form as your requirement  TextFormField       maxLines  1       decoration  InputDecoration            prefixIcon  const Icon                Icons search                color  Colors grey                     hintText   Search your trips         border  OutlineInputBorder           borderRadius  BorderRadius all Radius circular 10 0

User · Answer

decoration  InputDecoration   border OutLineInputBorder   borderSide BorderSide none  bordeRadius  BordeRadius circular 20 0

User · Answer

I found no other answer gives a border radius  you can simply do it like this  no nested Container    TextField      decoration  InputDecoration        border  OutlineInputBorder          borderSide  BorderSide none          borderRadius  BorderRadius circular 20

User · Answer

Here is a supplemental answer that shows some fuller code       Container      decoration  BoxDecoration        color  Colors tealAccent        borderRadius   BorderRadius circular 32              child  TextField        decoration  InputDecoration          hintStyle  TextStyle fontSize  17           hintText   Search your trips           suffixIcon  Icon Icons search           border  InputBorder none          contentPadding  EdgeInsets all 20                          Notes    The dark background  code not shown  is Colors teal  InputDecoration also has a filled and fillColor property  but I couldn t get them to have a corner radius  so I used a container instead

User · Answer

change the focused border to none  TextField        decoration  new InputDecoration            border  InputBorder none            focusedBorder  InputBorder none            contentPadding  EdgeInsets only left  15  bottom  11  top  11  right  15             hintText   Subject

User · Answer

new flutter sdk since after integration of web and desktop support you need to specify individually like this TextFormField      cursorColor  Colors black      keyboardType  inputType      decoration  new InputDecoration          border  InputBorder none          focusedBorder  InputBorder none          enabledBorder  InputBorder none          errorBorder  InputBorder none          disabledBorder  InputBorder none          contentPadding              EdgeInsets only left  15  bottom  11  top  11  right  15           hintText   quot Hint here quot

User · Answer

Do it like this   TextField    decoration  new InputDecoration collapsed      hintText   Username            or if you need other stuff like icon  set the border with InputBorder none  InputDecoration      border  InputBorder none      hintText   Username

[flutter] Flutter: how to make a TextField with HintText but no Underline?

Examples related to flutter

Examples related to dart

Examples related to textfield

Examples related to underline

Examples related to hint