Change TextField's Underline in Flutter

I'm working on an application using Flutter SDK. When I use a [`TextField`][text] widget, and I focus it, the underline becomes blue. I need to change this color to red, how can I do it?

Screenshot of what I need to change. I want just the underline to change, **, not the label color.**

![Screenshot of what I need to change. (I want the underline to change, not the label color)][1]



[text]:

[To see links please register here]

[1]:

I haven't tried it yet, but I had a look at the docs for you.

Looking at the [TextField](

[To see links please register here]

) class you can set an [InputDecoration](

[To see links please register here]

), which in turn has an [InputBorder](

[To see links please register here]

). Setting that to an [UnderlineInputBorder](

[To see links please register here]

) with your own [BorderSide](

[To see links please register here]

) should do the trick I guess. You can set the color of the BorderSide.

You can also set an InputBorder in the global [InputDecorationTheme](

[To see links please register here]

) if you want all textfields to have the same style.

I have used **InputDecoration.collapsed** to remove the divider and I am changing the color of the bottom border.

If you enter a name the bottom border color is **blue** and if you enter a number or other special characters then the bottom border color is **red**

[![demo][1]][1]


[1]:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
static const EdgeInsets _padding = const EdgeInsets.symmetric(horizontal: 20.0, vertical: 8.0);
Color borderColor = Colors.blue;
bool nameFlag = false;

@override
void initState() {
super.initState();
}

void validateName(String value) {
final RegExp nameExp = new RegExp(r'^[A-Za-z ]+$');
if (!nameExp.hasMatch(value) || value.isEmpty)
borderColor = Colors.red;
else
borderColor = Colors.blue;
}

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Column(children: <Widget>[
new Flexible(
child: new Container(
margin: _padding,
padding: _padding,
child: new TextField(
decoration: new InputDecoration.collapsed(
hintText: "Enter Name",
),
onChanged: (s) {
setState(() => validateName(s));
},
),
decoration: new BoxDecoration(
color: Colors.white,
border: new Border(
bottom: new BorderSide(color: borderColor, style: BorderStyle.solid),
),
),
),
)
]),
);
}
}

Let me know if this answers your question :)

While these other answers may somehow work, you should definitely **not** use it.
That's not the proper way to get a custom theme in Flutter.


A much more elegant solution is as followed :

final theme = Theme.of(context);

return new Theme(
data: theme.copyWith(primaryColor: Colors.red),
child: new TextField(
decoration: new InputDecoration(
labelText: "Hello",
labelStyle: theme.textTheme.caption.copyWith(color: theme.primaryColor),
),
),
);



At the same time, if you just want to show an error (Red), use `errorText` of `InputDecoration` instead. It will automatically set the color to red.

You can also change its color by following ways.

1. Wrap your `TextField` in `Theme` and provide `accentColor`

Theme(
data: Theme.of(context).copyWith(accentColor: Colors.red),
child: TextField(),
)

2. Using `inputDecoration` property.

TextField(
decoration: InputDecoration(
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red),
),
),
)