How to set background color for TextFormField Widget in Flutter?

2,023

Solution 1

Use fillColor and filled attributes of InputDecoration

decoration: InputDecoration(
                                filled: true,

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

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

                        ),
Share:
2,023
Kavya S
Author by

Kavya S

Updated on December 30, 2022

Comments

  • Kavya S
    Kavya S over 1 year

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