如何在 Flutter 中为 TextFormField Widget 设置背景颜色？答案

【问题标题】：How to set background color for TextFormField Widget in Flutter?如何在 Flutter 中为 TextFormField Widget 设置背景颜色？
【发布时间】：2021-08-17 12:18:54
【问题描述】：

这是我尝试设置 TextFormField 小部件颜色的以下代码。我尝试更改 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),
                                      ),
        

                        ),

【问题讨论】：

在您的InputDecoration() 中使用fillColor: Colors.orange 和filled: true。

标签： flutter textformfield

【解决方案1】：

使用InputDecoration的fillColor和fill属性

decoration: InputDecoration(
                                filled: true,

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

【讨论】：

【解决方案2】：

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

将 TextFormField 小部件的填充属性设置为 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),
                                      ),
        

                        ),

【讨论】：