+- 0Day Forums (https://0day.red)
+-- Forum: Coding (https://0day.red/Forum-Coding)
+--- Forum: Flutter & Dart (https://0day.red/Forum-Flutter-Dart)
+--- Thread: Change TextField's Underline in Flutter (/Thread-Change-TextField-39-s-Underline-in-Flutter)
Change TextField's Underline in Flutter - Mrgregoryxvkk - 07-21-2023
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]:RE: Change TextField's Underline in Flutter - emlynnqzkyigj - 07-21-2023
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.RE: Change TextField's Underline in Flutter - surroyals878329 - 07-21-2023
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 :)
RE: Change TextField's Underline in Flutter - aranluh - 07-21-2023
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.
RE: Change TextField's Underline in Flutter - respoke565364 - 07-21-2023
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),
),
),
)