如何使TextField的背景为矩形框形状？

Question

我尝试在中制作Container具有矩形形状的小部件TextField。它不会在容器内显示我的文本。相反，盒子的形状在上方TextField。

这是我的代码：

 new Container(
            height: 10.0,
            width: 20.0,
              decoration: new BoxDecoration(
                shape: BoxShape.rectangle,
                border: new Border.all(
                  color: Colors.black,
                  width: 1.0,
                ),
              ),
            child: new TextField(
              textAlign: TextAlign.center,
              decoration: new InputDecoration(
                hintText: '1',
                border: InputBorder.none,

              ),
            ),
            ),

Answer 1

只需删除容器的height和width属性。

例：

   new Container(
      decoration: new BoxDecoration(
        shape: BoxShape.rectangle,
        border: new Border.all(
          color: Colors.black,
          width: 1.0,
        ),
      ),
      child: new TextField(
        textAlign: TextAlign.center,
        decoration: new InputDecoration(
          hintText: '1',
          border: InputBorder.none,

        ),
      ),
    )

否则只需指定like 的border属性InputDecoration

new TextField(
      textAlign: TextAlign.center,
      decoration: new InputDecoration(
        hintText: '1',
        border: new OutlineInputBorder(
          borderRadius: const BorderRadius.all(
            const Radius.circular(0.0),
          ),
          borderSide: new BorderSide(
            color: Colors.black,
            width: 1.0,
          ),
        ),
      ),
    )

希望能有所帮助

Answer 2

         TextField(
                  decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey, width: 2.0),
                  ),
                  hintText: 'Email',
                  prefixIcon: Icon(Icons.mail_outline),
                ),
              ),

输出：