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

Question

I want to change the Color of an textfield in flutter. Means the area within the InputBorder. I tried to wrap the textfield in container, and change the color of the container, but this seems a fool's step to solve the problem.

I tried the fillColor option, but nothing changed.

Here is my Code -->

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

Thanks in Advance:)

Answer 1

Try out this:-

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

Answer 2

If you want to set the color to your text field then there is one boolean variable which you need to set true so your color will be added to your text field

             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

Basically you can leave your code as you provided us. The important missing value is

filled: true

With this value applied you can style the background color easy. Reference to the doc: https://api.flutter.dev/flutter/material/TextField-class.html

Answer 4

don't use Container for TextField decoration, there are more property into TextField

TextField use

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