Flutter- How to change TextField Background Color in Flutter (2023)

In flutter app development TextField is the most usable widget which is used to take various inputs from the user. Sometimes we need to change color according to UI design. So in this article, I am going to share with you How to change TextField  Background Color in a flutter.

 

Change the Background Color of TextField:

We can easily change the background color of TextFiled using InputDecoration. When we use InputDecoration to change the background color of TextField we need to use two properties of InputDecoration such as filled: true, and fillColor. You can see below 

 

TextField(
  decoration: InputDecoration(
  filled: true,
  fillColor: Colors.red,),
),

 

The above code is applied only for a particular TextField, So we need to set the background color of each TextFiled.

 

Globally Set Background Color of TextField:

We can set the Textfiled background globally (App level) using the theme. If we apply the background color globally this applies on each Textfiled of the app.

 


class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Errorgram,',
      theme: ThemeData(
        inputDecorationTheme:
            const InputDecorationTheme(filled: true, fillColor: Colors.yellow),
      ),
    );
  }
}

 

If we want to set the configuration globally we need to set it in MaterialApp.

 

Full Code:

import 'package:flutter/material.dart';

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key}) : super(key: key);

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        bottom: false,
        child: Scaffold(
            appBar: AppBar(
              title: Text("Errorgram"),
            ),
            body: Center(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextField(
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.red,
                  ),
                ),
              ),
            )));
  }
}

 

Output:

 

Conclusion:

In this post, we learned. How to change TextField  Background Color in Flutter step by step and also saw the set background color of TextField globally. I hope this post may help you.

 

Tags: