Change TextField's Underline in Flutter
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.
Wrap your
TextField
inTheme
and provideaccentColor
Theme( data: Theme.of(context).copyWith(accentColor: Colors.red), child: TextField(), )
Using
inputDecoration
property.TextField( decoration: InputDecoration( focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.red), ), ), )
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
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 :)