如何更改 flutter 中文本字段的内部颜色？

Question

我想更改 flutter 中文本字段的颜色。 表示 InputBorder 内的区域。 我试图将文本字段包装在容器中，并更改容器的颜色，但这似乎是解决问题的愚蠢步骤。

我尝试了 fillColor 选项，但没有任何改变。

这是我的代码-->

Container(
  padding: EdgeInsets.fromLTRB(
    10,
    screenHeight * 0.016415869,
    10,
    0,
  ),
  height: screenHeight * 0.082079343,
  child: TextField(
    cursorColor: Color(0xFF7675E0),
    textAlign: TextAlign.left,
    decoration: InputDecoration(
      fillColor: Colors.black, //Nothing Worked
      contentPadding: EdgeInsets.fromLTRB(
        15,
        screenHeight * 0.002735978,
        2,
        screenHeight * 0.002735978,
      ),
      hintText: "Search",
      hintStyle: GoogleFonts.sniglet(
        fontSize: screenHeight * 0.020519836,
        color: Color(0xFFC6C8CA),
      ),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(5.0),
        borderSide: BorderSide(
          color: Colors.grey[200].withOpacity(0.2),
        ),
      ),
      prefixIcon: Icon(Icons.search),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.grey[200].withOpacity(1),
        ),
      ),
    ),
  ),
),

提前致谢：）

Answer 1

Try out this:-

decoration: InputDecoration(
                  filled: true,
                  fillColor: Colors.grey,

Answer 2

如果要将颜色设置为文本字段，则需要将一个 boolean 变量设置为 true，以便将颜色添加到文本字段中

             Container(
              child: TextField(
                cursorColor: Color(0xFF7675E0),
                textAlign: TextAlign.left,
                decoration: InputDecoration(
                  fillColor: Colors.black, // you can change color of textfield 
                  filled: true, // this should be true if you want to set color to textfield
                  hintText: "Search",
                  prefixIcon: Icon(Icons.search),
                ),
              ),
            ),

Answer 3

基本上你可以留下你提供给我们的代码。 重要的缺失值是

filled: true

应用此值后，您可以轻松设置背景颜色的样式。 参考文档： https://api.flutter.dev/flutter/material/TextField-class.html

Answer 4

不要使用 Container 进行 TextField 装饰，TextField 中有更多属性

文本字段使用

decoration: InputDecoration(
    filled: true,
    fillColor: Colors.white10,
    border: new OutlineInputBorder(
      borderRadius: new BorderRadius.all(
        new Radius.circular(14.0),
      ),
    ),

TextField(
  controller: usernameController,
  keyboardType: TextInputType.emailAddress,
  style: TextStyle(color: Colors.white),
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.white10,
    border: new OutlineInputBorder(
      borderRadius: new BorderRadius.all(
        new Radius.circular(14.0),
      ),
    ),
    hintText: 'Username',
    hintStyle: TextStyle(color: Colors.white),
    contentPadding: const EdgeInsets.all(24),
    prefixIcon: Icon(Icons.person, color: Colors.white),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.white10),
      borderRadius: BorderRadius.circular(14),
    ),
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.white10),
      borderRadius: BorderRadius.circular(14),
    ),
  ),
),