How To Change Flutter Textfield Color [Easy Examples]

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

The code is specified below:

TextField(
            decoration: InputDecoration(
                filled: true,
                border: InputBorder.none,
                hintText: 'I am a textfield...',
                hintStyle: TextStyle(color: Colors.grey.shade400)),
          )

We have decorated the Flutter textfield so it won’t look too bad. We can see in the above image that the background color of Flutter textfield is light grey.

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)

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.