How to change textField underline color

0 votes

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

enter image description here

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.

Mar 30, 2023 in Flutter by Ashwini
• 5,430 points
10,653 views

1 answer to this question.

0 votes

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.

answered Mar 30, 2023 by venky

Related Questions In Flutter

0 votes
1 answer

How to make a TextField with HintText but no Underline?

You can achieve this by using the ...READ MORE

answered Mar 21, 2023 in Flutter by Anushi
1,658 views
0 votes
1 answer

How to change flutter project name and id?

Yes, it is possible to change the ...READ MORE

answered Mar 20, 2023 in Flutter by pooja
2,815 views
0 votes
1 answer

How to change Android minSdkVersion in Flutter Project?

Yes, you can change the minSdkVersion in ...READ MORE

answered Mar 21, 2023 in Flutter by Tej
7,743 views
0 votes
1 answer

How do you change the value inside of a textfield flutter?

To change the value inside a TextField ...READ MORE

answered Mar 26, 2023 in Flutter by Tej
6,649 views
0 votes
1 answer

How can I change the app display name build with Flutter?

Yes, you can change the app display ...READ MORE

answered Mar 21, 2023 in Flutter by venky
1,954 views
0 votes
1 answer

Dart_LoadScriptFromKernel: The binary program does not contain 'main'.

Hi@akhtar, You need to add the main() function ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
3,220 views
0 votes
1 answer

How to install Dart in Windows system?

Hi@akhtar, Dart is the programming language used to code Flutter apps. ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
788 views
0 votes
1 answer

flutter run: No connected devices

Hi@akhtar, To prepare to run and test your ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
3,839 views
0 votes
1 answer

How to create a function in Dart language?

Hi@akhtar, There are many function types available in ...READ MORE

answered Jul 22, 2020 in Others by MD
• 95,440 points
514 views
0 votes
1 answer

Flutter Outline Shows "Nothing to show" in android studio

There are a few possible solutions for ...READ MORE

answered Mar 30, 2023 in Flutter by vishalini
2,167 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP