Change TextField's Underline in Flutter

Question

I'm working on an application using Flutter SDK. When I use a TextField 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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Looking at the TextField class you can set an InputDecoration, which in turn has an InputBorder. Setting that to an UnderlineInputBorder with your own BorderSide should do the trick I guess. You can set the color of the BorderSide.

You can also set an InputBorder in the global InputDecorationTheme if you want all textfields to have the same style.