In this article, we will discuss how to properly change Flutter textfield color. We’ll first see the default color of Flutter textfield and then we’ll learn its customization using proper Flutter code examples.
So let’s not waste anymore of your precious time and start understanding the customization of Flutter textfield color.
Introduction: Flutter Textfield Color
It specified the background color of textfield widget.
In this post, we will only cover the background color customization of Flutter textfield widget. If you want to learn other properties of Flutter textfield, then click here.
Let’s now understand Flutter textfield color customization with the help of practical code examples.
Default Color Of Textfield
By default, the background color of Flutter textfield is light grey.
For that, we’ve to pass input decoration to the decoration constructor of textfield. Then we’ve to use the filled constructor of input decoration. It takes a Boolean(true/false) value. By default, its false. Let’s set it to true. See below:
filled: true
TextField( decoration: InputDecoration( filled: true, border: InputBorder.none, hintText: 'I am a textfield...', hintStyle: TextStyle(color: Colors.grey.shade400)), )
![How To Change Flutter Textfield Color [Easy Examples] 3 flutter text field filled](https://letmeflutter.com/wp-content/uploads/2022/05/IMG_20220525_010906-300x97.jpg)
Change Flutter Textfield Color
Let’s now change the color of textfield which is the main reason why you are reading this post. For that, we have to use the filled color constructor of the input decoration class. It takes a color. For demonstration, we’ve passed it a blue color with some opacity(optional). See below:
fillColor: Colors.blue.withOpacity(.5)
![How To Change Flutter Textfield Color [Easy Examples] 4 flutter textfield color change](https://letmeflutter.com/wp-content/uploads/2022/05/IMG_20220525_015156-300x96.jpg)
We can see that by using the filled color constructor, we’ve given it a blue color. You can specify any color of your choice.
Important Note
Please keep one thing in mind that if you want the filled color to make the desired color changes then always set the filled constructor to true.
Feel free to ask if you still have any questions regarding the background color customization of Flutter textfield widget. We’ll be super glad to help you.
The complete source code of beautifully customized textfield design is provided in the below section.
Beautiful Flutter Textfield 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: 30), child: TextField( style: TextStyle(fontSize: 13, color: Colors.grey.shade700), decoration: InputDecoration( filled: true, fillColor: Colors.blue.shade100, focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(50), borderSide: BorderSide(color: Colors.blue), ), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(color: Colors.blue.shade600), ), prefixIcon: Icon( Icons.person, color: Colors.white.withOpacity(.9), ), suffixIcon: Icon( Icons.visibility, color: Colors.white.withOpacity(.9), ), border: InputBorder.none, hintText: 'I am a Flutter Textfield...', hintStyle: TextStyle( fontSize: 13, color: Colors.white.withOpacity(.9), fontWeight: FontWeight.w400)), ), ), )), ); } }
Conclusion
In conclusion, hope you now have a complete understanding of how to easily customize Flutter textfield color. We would love to have your amazing feedback on this post.
We’d be very delighted to see you pay a visit to other posts on Flutter app development and Python programming. Thank you for reading this one.