如何更改 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),
    ),
  ),
),