如何在Flutter中为TextFormField小部件设置背景颜色？

Question

这是我尝试设置TextFormField Widget颜色的代码。

我尝试更改Container Widget和Card Widget的颜色，但是我无法单独改变TextFormField Widget的颜色。

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

                        ),

- Kavya S

---

еңЁдҪ зҡ„InputDecoration()дёӯдҪҝз”ЁfillColor: Colors.orangeе’Ңfilled: trueгҖӮ - Chirag Bargoojar

Answer 1

使用InputDecoration的fillColor和filled属性。

decoration: InputDecoration(
                                filled: true,

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

- Nabin Dhakal

Answer 2

我尝试了几种不同的方法来改变TextFormField小部件的颜色。最终，我发现如何改变TextFormField小部件的背景颜色。

将TextFormField小部件的filled属性设置为true，并将fillColor属性设置为所需的颜色。 例如：

fillColor: Colors.white,
filled: true,

代码

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

                        ),

- Kavya S

Answer 3

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

- Diksha Pruthi