Dart 如何制作文本框的背景矩形框形状？

我尝试在

TextField

中制作矩形的

Container

小部件。它不会在容器中显示我的文本。相反，方框形状位于

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,

              ),
            ),
            ),

---

只需删除容器的

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,

        ),
      ),
    )

或者只需指定

InputDecoration

的

border

属性

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

希望有帮助

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

输出：

TextField(
装饰：输入装饰(
填充：正确，//您可以通过

  buildEmailTextField() {
    return TextFormField(
        controller: loginController.emailController,
        focusNode: loginController.emailFocusNode,
        cursorColor: colorWhite,
        style: CustomTextStyle.textField(),
        decoration: InputDecoration(
            hintText: "hintText",
            fillColor: colorWhite.withOpacity(0.20),
            filled: true,
            border: new OutlineInputBorder(
                borderRadius: new BorderRadius.circular(25.7),
                borderSide: new BorderSide(width: 0.0, style: BorderStyle.none)),
            focusedBorder: OutlineInputBorder(
                borderRadius: new BorderRadius.circular(25.7),
                borderSide: new BorderSide(width: 0.0, style: BorderStyle.none)),
            contentPadding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0.0),
            prefixIcon: Padding(
              padding:
              const EdgeInsets.only(right: 15.0, left: 15, top: 15, bottom: 15),
              child: Image.asset(
                icon,
                height: 25,
                width: 25,
              ),
            ),
            errorStyle: CustomTextStyle.textRegular().copyWith(color: Colors.red));,
        );
  }

像这样使用它

Column(
  children: [
     buildEmailTextField(),        
   ],
)

没有高度-宽度的容器不工作。可能是因为它在
行中
。后来有一个工作了。但是
TextField
显示了内部的额外填充。我如何删除它？试着指定容器的
宽度
。或者只是将
TextField
包装在
灵活的
或
扩展的
小部件中。你能是否有一些代码或至少是你试图实现的视觉参考？如果答案回答了你的问题，一定要接受。一个矩形背景的输入字段，如goo.gl/noQYjF我将
文本字段
放在一个宽度和高度相同的
容器内。对于宽度，它的测量非常完美，但对于他来说好吧，它没有显示完美的测量。你说不进行完美测量是什么意思？我可以知道你指定了什么高度和宽度值吗？而且，为什么只有一个
文本字段
小部件使用
行
？让我们来看看。
Column(
  children: [
     buildEmailTextField(),        
   ],
)