如何使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,

        ),
      ),
    )

或者只需指定border的{​​{1}}属性，如

InputDecoration

希望有所帮助

Answer 2

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

输出：

Answer 3

TextField(
  decoration: InputDecoration(
    filled: true, // <- this is required.
    border: const OutlineInputBorder(
      borderRadius: kStadiumBorderRadius,
      borderSide: BorderSide.none,
    ),
  ),
);

Answer 4

你可以通过

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