How to change the color of the bottom border in text form Field Flutter

Question

 TextFormField(
                decoration: InputDecoration(
                  hintText: "Name",
                  hintStyle: TextStyle(color: Colors.white),
                  border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.teal)
                  ),
                ),
              ),

this make the whole text field I don't want that , only the bottom side

Answer 1

Try using this code:

TextFormField(
            decoration: InputDecoration(
          hintText: "Name",
          hintStyle: TextStyle(color: Colors.white),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.teal),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.teal),
          ),
          border: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.teal),
          ),
        )),

Answer 2

TextFormField(
  decoration: InputDecoration(
    hintText: "Name",
    hintStyle: TextStyle(color: Colors.white),
    //When the TextFormField is NOT on focus
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.black),
    ),
    //When the TextFormField is ON focus
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.teal),
    ),
  ),
)