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.

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),    ),  ),)

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 :)