Flutter textformfield underline color customization. In this article, I will be discussing and implementing the customization of Flutter textformfield underline color in Flutter textformfield. I will be using a very simple example so you can easily understand how to change Flutter textformfield underline color. Let’s not waste anymore time and start implementing the customization of Flutter textformfield underline color.
What is Flutter Textformfield Underline Color?
Flutter textformfield underline color is the color of the underline border of the Flutter textformfield. We will implement a simple Flutter textformfield and see what type of underline border would we get. Let’s now implement Flutter textformfield underline color using a proper Flutter code example.
Default Flutter Textformfield Underline Color
Let’s see the default color of the Flutter textformfield. For that let’s define a simple Flutter textformfield. See the code below:
TextFormField()
Change Flutter Textformfield Underline Color
Let’s now change the Flutter textformfield underline color because that is the reason you are reading this post. For that we have to use the decoration constructor of the Flutter textformfield and passing it the input decoration class. Now using the enabled border constructor of the input decoration class. Enabled border is shown when the textformfield is not focused. We have passed underline input border class to it and we have set the color to blue. See the below code:
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.blue)
)
focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.green) )
Beautiful Flutter Textformfield 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 StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: TextFormField(
style: TextStyle(color: Colors.grey),
cursorColor: Colors.purple,
decoration: InputDecoration(
filled: true,
fillColor: Colors.blue.withOpacity(.1),
hintText: 'This is hint text',
hintStyle: TextStyle(color: Colors.grey),
prefixIcon: Icon(
Icons.person,
color: Colors.grey,
),
border: InputBorder.none,
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.circular(30)
.copyWith(topRight: Radius.circular(0))),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.circular(30)
.copyWith(topRight: Radius.circular(0))),
contentPadding: EdgeInsets.all(23),
)))),
));
}
}Conclusion
As a final point, now you have a thorough understanding of how to customize and change your Flutter textformfield underline color. I would really appreciate your thoughts on this post. I would also encourage you to read my other articles on Flutter app development, Flutter widgets, Flutter animations Flutter templates and many more, links to some of these informative posts are listed below. That’s all for this post. Thanks for reading.
