Flutter set the text box background

Flutter set the text box background

---

First look at the final effect:

Normal text box style settings

Set an ordinary text box style as follows:

new TextField(
  controller: _titleTxt,
  keyboardType: TextInputType.text,//键盘类型
  decoration: InputDecoration(//文本框样式设置
    contentPadding: EdgeInsets.all(10.0),//内容边距
    labelText: '标题',//输入框的描述文本
    border: OutlineInputBorder(//边框
    ),
  ),
  style: TextStyle(fontSize: 14),//字体样式
  autofocus: false,
  maxLines: 1,//单行文本框
),

Set input box with background color

new TextField(
  controller: _titleTxt,
  keyboardType: TextInputType.text,
  decoration: InputDecoration(
    //是否填充背景色
    filled: true,
    //设置背景色，filled 为 true 时生效
    fillColor: Color(0xfff2f2f2),
    contentPadding: EdgeInsets.all(10.0),
    //边框样式设置
    border: _outlineInputBorder,
    focusedBorder: _outlineInputBorder,
    enabledBorder: _outlineInputBorder,
    disabledBorder: _outlineInputBorder,
    focusedErrorBorder: _outlineInputBorder,
    errorBorder: _outlineInputBorder,
  ),
  style: TextStyle(fontSize: 14),
  autofocus: false,
  maxLines: 1,
),

The most important thing here is the filled attribute, which must be set to true. Only in this way can the color set by fillColor take effect.

---

**PS: For more exciting content, please check --> "Flutter Development"
**PS: For more exciting content, please check --> "Flutter Development"
**PS: For more exciting content, please check --> "Flutter Development"