如何去除 Flutter Widget 上 TextField 的背景颜色？

Question

我无法删除 TextField 的阴影和背景，这是我的代码：

TextFormField(
                            decoration: InputDecoration.collapsed(),
                            validator: (input) =>
                                input == "" ? 'The task is empty' : null,
                            onSaved: (input) => task = input,
                          )

这就是我想要的结果

我总是尝试 BoxDecoration 但没有成功，因为它与 TextFormField 不兼容。

Answer 1

将您的 TextFormField 包裹在 Container 中并更改其 color 属性以匹配您的背景颜色（根据您的图片，我假设它是 white):

     Container(
        color: Colors.white, // or any color that matches your background
        child: TextFormField(
                 decoration: InputDecoration.collapsed(),
                 validator: (input) => input == "" ? 'The task is empty' : null,
                 onSaved: (input) => task = input,
               )
     ),

Answer 2

您应该将 filled 设置为 true。

TextField(decoration: InputDecoration( fillColor: Colors.red, filled: true)),

Answer 3

您可以通过将 TextField 包装在 Theme 小部件中并将 splashColor 设置为透明

来使其透明

Theme(
  data: Theme.of(context).copyWith(splashColor: Colors.transparent),
  child: TextField(
    autofocus: false,
    style: TextStyle(fontSize: 22.0, color: Color(0xFFbdc6cf)),
    decoration: InputDecoration(
      filled: true,
      fillColor: Colors.white,
      hintText: 'Search',
    ),
  ),
);

如何去除 Flutter Widget 上 TextField 的背景颜色？

How to remove background color of TextField on Flutter Widget?

textfield

dart

flutter