How to set background color for TextFormField Widget in Flutter?

Question

This is the following code where I tried setting TextFormField Widget Color. I tried changing the color of the Container Widget and the Card Widget, but I couldn't alter the color of the TextFormField Widget in particular.

child: Container(
                  height: MediaQuery.of(context).size.height,
                  color: Colors.white,
                  child: Card(
                      color: Colors.blue,
                      child: Form(
                          key: _formKey,
                          child: Column(children: [
    Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(30, 50, 30, 20),
                                  child: TextFormField(
                                      keyboardType: TextInputType.emailAddress,
                                      decoration: InputDecoration(
                                          border: OutlineInputBorder(
                                          borderSide:
                                              const BorderSide(color: Colors.white),
                                          borderRadius: BorderRadius.circular(25.0),
                                        ),
                                        prefixIcon: Icon(
                                          Icons.email,
                                          color: Colors.blue,
                                        ),
                                        labelText: "Email",
                                        labelStyle: TextStyle(
                                            color: Colors.black,
                                            fontSize: 18,
                                            fontWeight: FontWeight.w300),
                                      ),
        

                        ),

Trass

Use fillColor: Colors.orange and filled: true inside your InputDecoration(). – Viceregent

Answer 1

Use fillColor and filled attributes of InputDecoration

decoration: InputDecoration(
                                filled: true,

          labelText: "Resevior Name",
          fillColor: Colors.black,
          
        ),

Fantinlatour

Answer 2

I tried a few different approaches to changing the color of the TextFormField Widget. Finally, I discovered how to change the background color of the TextFormField Widget.

Set the filled property of the TextFormField Widget to true and the fillColor property to the desired color. i.e.,

fillColor: Colors.white,
filled: true,

Code

child: Container(
                  height: MediaQuery.of(context).size.height,
                  color: Colors.white,
                  child: Card(
                      color: Colors.blue,
                      child: Form(
                          key: _formKey,
                          child: Column(children: [
    Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(30, 50, 30, 20),
                                  child: TextFormField(
                                      keyboardType: TextInputType.emailAddress,
                                      decoration: InputDecoration(
                                          fillColor: Colors.white,
                                          filled: true,
                                          border: OutlineInputBorder(
                                          borderSide:
                                              const BorderSide(color: Colors.white),
                                          borderRadius: BorderRadius.circular(25.0),
                                        ),
                                        prefixIcon: Icon(
                                          Icons.email,
                                          color: Colors.blue,
                                        ),
                                        labelText: "Email",
                                        labelStyle: TextStyle(
                                            color: Colors.black,
                                            fontSize: 18,
                                            fontWeight: FontWeight.w300),
                                      ),
        

                        ),

Trass

Answer 3

TextFormField(
    decoration: InputDecoration(
        labelText: "title",
        fillColor: Colors.white,
        filled: true, // dont forget this line
        ...
    )
    ...
)

Quechua