CODEWITHSUNDEEP
fluttertextformfield
Kavya S
Kavya S

Reputation: 551

How to set background color for TextFormField Widget in Flutter?

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),
                                      ),
        

                        ),

Upvotes: 16

Views: 15198

Answers (3)

Diksha Pruthi
Diksha Pruthi

Reputation: 354

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

Upvotes: 5

Kavya S
Kavya S

Reputation: 551

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),
                                      ),
        

                        ),

Upvotes: 4

Nabin Dhakal
Nabin Dhakal

Reputation: 2182

Use fillColor and filled attributes of InputDecoration

decoration: InputDecoration(
                                filled: true,

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

Upvotes: 26

Related Questions