How to change Flutter textformfield background color. In this post, I will be explaining how to change Flutter textformfield background color in our Flutter textformfield. Step by step explanation and a proper implementation through example code for Flutter textformfield background color customization in our Flutter textformfield.
What is Flutter Textformfield Background Color?
Flutter textformfield background color is as the names suggests, it is the background color of our Flutter textformfield. In this post, I will be explaining how to change it in Flutter textformfield.
Default Flutter Textformfield Background Color
To see the default Flutter textformfield background color in our Flutter textformfield. We have to set true the boolean constructor named filled of the input decoration class. Let’s implement it using code:
TextFormField(
decoration: InputDecoration(
filled: true
),
)
Change Flutter Textformfield Background Color
Let’s see how to change Flutter textformfield background color in our Flutter textformfield. For that, you have to use the fill color constructor of the input decoration class and also as mentioned above, making the filled constructor set to true is necessary to see the default or custom Flutter textformfield background color in our Flutter textformfield.
TextFormField( decoration: InputDecoration( filled: true, fillColor: Colors.red.shade100 ), )
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.purple),
cursorColor: Colors.purple,
decoration: InputDecoration(
border: InputBorder.none,
filled: true,
fillColor: Colors.purple.withOpacity(.08),
prefixIcon: Icon(
Icons.person,
color: Colors.purple,
),
suffixIcon: Icon(
Icons.visibility,
color: Colors.purple,
),
labelText: 'Enter your name',
labelStyle:
TextStyle(color: Colors.purple.withOpacity(.8)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.purple.withOpacity(.05)),
borderRadius: BorderRadius.circular(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0))),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.purple.withOpacity(.05)),
borderRadius: BorderRadius.circular(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0)))),
)
],
))),
));
}
}Conclusion
In conclusion, hope you don’t have any queries left on how to change change Flutter textformfield background color in Flutter textformfield. I would love to see you in my other posts on Flutter app development, Flutter widgets, Flutter templates, Flutter animations and many more. That’s all for this blog post. Thank you for reading.
