In this tutorial, we’ll learn how to properly customize Flutter textfield background color by using practical Flutter code examples.
Introduction: Flutter Textfield Background Color
Flutter textfield background color is as the names suggests, it is the background color of our Flutter textfield. In this post, I will be explaining how to change it in Flutter textfield.
Default Flutter Textfield Background Color
To see the default Flutter textfield background color in our Flutter textfield. We have to set true the Boolean constructor named filled of the input decoration class. Let’s implement it using code:
TextField(
decoration: InputDecoration(
filled: true
),
)
Change Flutter Textfield Background Color
Let’s see how to change Flutter textfield background color in our Flutter textfield. 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 textfield background color in our Flutter textfield.
TextField( decoration: InputDecoration( filled: true, fillColor: Colors.red.shade100 ), )
Custom Flutter Textfield Background Color 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(
decoration: InputDecoration(
filled: true,
fillColor: Colors.green.shade100),
)
],
))),
));
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textfield background color. I’d love to have your feedback on this post.
I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.
