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.
You can also change its color by following ways.
Wrap your TextField in Theme and provide accentColor
Theme( data: Theme.of(context).copyWith(accentColor: Colors.red), child: TextField(), ) Using inputDecoration property.
TextField( decoration: InputDecoration( focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.red), ), ), ) 
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.
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 :)
TextField in a Theme. Especially in alpha where everything iterates pretty quickly (a month ago inputDecorationTheme didn't even exists).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.
TextField internally overrides borderSide property of inputDecorationTheme and builds it from the primary color.
inputDecorationTheme has worked for me. ``` inputDecorationTheme: InputDecorationTheme( labelStyle: TextStyle(color: Colors.white), helperStyle: TextStyle(color: Colors.white), hintStyle: TextStyle(color: Colors.grey), focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.white), ) ), ```
hintColorof your app theme,return ThemeData.light().copyWith( hintColor: Colors.blueAccent,)