How to change textField underline color

Question

I'm new to both flutter & dart. Currently, using this in one of my personal projects.

In all of my form, the underline of textField is showing in blue color. I want to change that to some other color. The piece of code which I'm using is like...

new TextField(
  controller: this._emailController,
  decoration: new InputDecoration(
      hintText: "Enter your email",
      labelText: "Email",
      labelStyle: new TextStyle(
          color: const Color(0xFF424242)
      )
  ),

),

Can't able to understand how to achieve this.

Note: I know there is a similar question at here Change TextField's Underline in Flutter. But, at there also it has not completely solved. Also, one more link which looks similar to mine at here Changing EditText bottom line color with appcompat v7 but, that actually belong to Android development by using JAVA not DART(flutter) which I'm using for my android app development. So, please don't get confused about those links.

Answer 1

You can change the color of the underline of a TextField in Flutter by using the border property of the InputDecoration class. You can set the border property to UnderlineInputBorder, and set the borderSide property to a BorderSide with the desired color.

Here's an example:

TextField(
  decoration: InputDecoration(
    labelText: 'Username',
    labelStyle: TextStyle(color: Colors.grey),
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.red),
    ),
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.blue),
    ),
  ),
)

In this example, we're setting the enabledBorder to a red BorderSide, and the focusedBorder to a blue BorderSide. You can customize the colors as per your requirement.