How to change Flutter textfield underline color. In this article, I will be going through step by step on how to change Flutter textfield underline color. Let’s start implementing the customization of Flutter textfield underline color in our Flutter textfield.
Step By Step Implementation
Let’s change the Flutter textfield underline color in our Flutter textfield through step by step explanation. I will be using a proper Flutter example code to implement the customization of Flutter textfield underline color in our Flutter textfield.
Default Flutter Textfield Underline Color
Flutter textfield underline color is the underline border color of the Flutter textfield. When we implement a simple Flutter textfield then it comes with a default underline border having a black color. Let’s code it.
TextField()
You can see in the above image that by implementing a simple Flutter textfield, we have our Flutter textfield with a default underline border.
Change Flutter Textfield Underline Color
Now to change the Flutter textfield underline color, you have to change it for both enabled and focused Flutter textfield. Enabled means that when our textfield is not focuses or tapped and focuses means that when our Flutter textfield is tapped or focused.
Change Flutter Textfield Underline Color Enabled Border
decoration: InputDecoration( enabledBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.red)), )
I have used the enabled border constructor of the input decoration class of the Flutter textfield. I have passed the underline input border class and by using its border side constructor, I can change the color, style and width of the Flutter textfield underline border. But for now, I am only changing the Flutter textfield underline color. It is implemented in the above code and you can see in the above image that it is implemented means the Flutter textfield underline color is now red as specified in the above code.
Change Flutter Textfield Underline Color Focused Border
decoration: InputDecoration( focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.red)), )
Like the enabled border, I have used the focused border constructor of the input decoration class and have passed the underline input border class to that constructor. Using the border side constructor of the underline input border class, you can change the focused border Flutter textfield underline color.
This is how to change the Flutter textfield underline color. Be sure that you have to change the Flutter textfield underline color for both the enabled and focused border.
Congrats for making it to the end. Now you have a complete understanding of how to change the Flutter textfield underline color of our Flutter textfield. I have created a beautiful custom Flutter textfield design for you. I would love to see you use this design in your Flutter app projects. Source code is given in the next section.
Beautiful Flutter Textfield Design Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
style: TextStyle(color: Colors.red),
cursorColor: Colors.red,
decoration: InputDecoration(
border: InputBorder.none,
filled: true,
fillColor: Colors.red.withOpacity(.08),
prefixIcon: Icon(
Icons.email,
color: Colors.red,
),
suffixIcon: Icon(
Icons.visibility,
color: Colors.red,
),
labelText: 'Enter your email',
labelStyle:
TextStyle(color: Colors.red.withOpacity(.8)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0))),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0)))),
)
],
))),
));
}
}Conclusion
In conclusion, now you have a detailed understanding on how to change Flutter textfield underline color. I would love to have your feedback on this post and would also want you to visit my other articles. Thanks for reading.
