Flutter textformfield color customization. In this article, I will be discussing and implementing how to change Flutter textformfield color in Flutter textformfield. I will be using step by step explanation for the implementation of Flutter textformfield color customization so in the end of this post, you don’t have any queries left regarding the customization of Flutter textformfield color in Flutter textformfield.
What is Flutter Textformfield Color?
Flutter textformfield color is the background color of the Flutter textformfield. In this post, let’s start implementing the customization of Flutter textformfield color in Flutter textformfield.
Default Flutter Textformfield Color
Before changing the Flutter textformfield color, let’s first see what the default Flutter textformfield color is. To see that, we have to use the decoration constructor of the Flutter textformfield and then passing the input decoration class to that constructor. Now using the filled constructor of the input decoration class, we have to set it to true because it takes a boolean value and by default, it is false. See the below code for this:
TextFormField(
decoration: InputDecoration(
filled: true
),
)
Change Flutter Textformfield Color
Now in order to change Flutter textformfield color, you have to use the fill color constructor of the input decoration class. See the below code:
decoration: InputDecoration( filled: true, fillColor: Colors.green.shade100 ),
As you can see in the above imager, by giving the green color to the fill color constructor of the input decoration class. We now have a Flutter textformfield with a greenish background color.
Congrats, now you know how to customize Flutter textformfield color in Flutter textformfield. If you still have doubts then you can comment down your queries.
As a treat, a custom Flutter textformfield design with complete source code is provided for you in the next section in which Flutter textformfield color is also implemented. Hope you will love it and would use it in your Flutter app projects.
Custom Flutter Textformfield 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: [
TextFormField(
style: TextStyle(color: Colors.blue),
cursorColor: Colors.blue,
decoration: InputDecoration(
border: InputBorder.none,
filled: true,
fillColor: Colors.blue.withOpacity(.08),
prefixIcon: Icon(
Icons.person,
color: Colors.blue,
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue.withOpacity(.05)),
borderRadius: BorderRadius.circular(30).copyWith(
topRight: Radius.circular(0),
topLeft: Radius.circular(0))),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue.withOpacity(.05)),
borderRadius: BorderRadius.circular(30).copyWith(
topRight: Radius.circular(0),
topLeft: Radius.circular(0)))),
)
],
))),
));
}
}Conclusion
In conclusion, hope you now have learned the customization of background Flutter textformfield color in Flutter textformfield. I would love to see you pay a visit at my other articles on Flutter app development, Flutter widgets, Flutter animations, Flutter templates and many more. Thanks you for reading this blog post.
