Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change textField underline color?

Tags:

flutter

dart

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.

like image 615
Suresh Avatar asked Apr 01 '18 16:04

Suresh


People also ask

How do you change the color of the TextField Flutter in underline?

You can change the TextField underline color globally by defining the inputDecorationTheme and then adding the UnderlineInputBorder widget. Inside the UnderlineInputBorder widget, you can specify which type of border you want to change. for example, enabledBorder , focusedBorder , and so on, and then assign the color.

How do I change the color of TextField?

Here is the step by step instructions: Step 1: Locate the file where you have placed the TextField widget. Step 2: Inside the TextField widget, add the style parameter and assign the TextField widget. Step 3: Inside the TextField widget, add the color parameter and set the color of your choice.

How do I change the color of a TextField hint?

Step 2: Inside the TextField widget, add the decoration parameter and assign the InputDecoration widget. Step 3: Inside the InputDecoration widget, add the hintStyle parameter and assign the TextStyle widget. Step 4: Inside the TextStyle , add color parameter and set the color of your choice.


2 Answers

Just used -:

decoration: InputDecoration(                       enabledBorder: UnderlineInputBorder(                             borderSide: BorderSide(color: Colors.cyan),                          ),                 focusedBorder: UnderlineInputBorder(                       borderSide: BorderSide(color: Colors.cyan),                    ),                ), 

it works for me :)

like image 92
GJJ2019 Avatar answered Oct 07 '22 05:10

GJJ2019


** See update below or see the answer by @GJJ2019 **

The logical answer would be to use an InputBorder, particularly an UnderlineInputDecorator, and pass it in to the inputdecorator as the border. However, all this does is tell the InputDecorator whether is should use an underline or whatever else you specify.

The actual color is based on the theme - from the source:

Color _getActiveColor(ThemeData themeData) {   if (isFocused) {     switch (themeData.brightness) {       case Brightness.dark:         return themeData.accentColor;       case Brightness.light:         return themeData.primaryColor;     }   }   return themeData.hintColor; } 

So to change the colour do something like this (or specify the theme for your entire application):

new Theme(   data: new ThemeData(     primaryColor: Colors.red,     accentColor: Colors.orange,     hintColor: Colors.green   ),   child: new TextField(     decoration: new InputDecoration(       hintText: "Enter your email",       labelText: "Email",       labelStyle: new TextStyle(color: const Color(0xFF424242)),       border: new UnderlineInputBorder(         borderSide: new BorderSide(           color: Colors.red         )       )     ),   ), ), 

UPDATE:

This is now possible to do in the way you'd expect it to work.

decoration: InputDecoration(           enabledBorder: UnderlineInputBorder(           borderSide: BorderSide(color: theColor),      ),     focusedBorder: UnderlineInputBorder(     borderSide: BorderSide(color: theColor),   ),   border: UnderlineInputBorder(     borderSide: BorderSide(color: theColor),   ), ) 
like image 25
rmtmckenzie Avatar answered Oct 07 '22 07:10

rmtmckenzie