Flutter textformfield border color customization. In this article, we will be discussing and implementing the customization of Flutter textformfield border color. How to change Flutter textformfield border color and step by step explanation to change Flutter textformfield border color so you don’t have any queries left after this post. So let’s get right into changing Flutter textformfield border color using proper Flutter code example.
What is Flutter Textformfield Border Color?
Flutter textformfield border color, as the name suggests, it is the color of the border of Flutter textformfield. By default, you will see a Flutter textformfield underline border, we will change it’s color and also make a four dimension full box border and change its color as well to make you understand how you can change Flutter textformfield border color for all of them. So let’s now leave the boring part and jump into step by step implementation of the customization of Flutter textformfield border color.
Change Flutter Textformfield Underline Border Color
To change the Flutter textformfield border color of underline, let’s first see what the default Flutter textformfield underline border color is. See the below code for this:
TextFormField()
decoration: InputDecoration( enabledBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.blue)), focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.red))),
In the first image, enabled border underline color is shown and in the second image focused border color is shown.
Change Outline Border Color
Now let’s change the Flutter textformfield border color of the whole Flutter textformfield border. For that we have to use the same enabled and focused border constructor of the input decoration class. Just we have to pass the outline input border class for both and like the above example, I have set blue color for the enabled border and red for the focused border to demonstrate Flutter textformfield border color is working here as well. Let’s see the below code for this:
decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.blue)), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.red))),
Custom 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.orange),
cursorColor: Colors.purple,
decoration: InputDecoration(
hintText: 'This is hint text',
hintStyle: TextStyle(color: Colors.orange.shade500),
prefixIcon: Icon(Icons.person, color: Colors.orange),
suffixIcon: Icon(Icons.edit, color: Colors.orange),
border: InputBorder.none,
contentPadding: EdgeInsets.all(26),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.orange),
borderRadius: BorderRadius.circular(30).copyWith(
topRight: Radius.circular(0),
bottomLeft: Radius.circular(0))),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.orange),
borderRadius: BorderRadius.circular(30).copyWith(
topRight: Radius.circular(0),
bottomLeft: Radius.circular(0)))),
))),
));
}
}Conclusion
In conclusion, now you have a practical knowledge of how to change Flutter textformfield border color for both underline and outline border of Flutter textformfield. I would love to have your feedback on this post. I have prepared other amazing articles on Flutter app development, Flutter widgets, Flutter animations, Flutter widgets, beautiful Flutter templates and many more. Thanks for reading this post.
