Flutter：在容器中垂直居中 TextField？

Question

正如您在图片上看到的那样，文本粘在容器的顶部。 如果它会在它的中心，我会更喜欢......

这是我的代码：

Padding(
      padding: EdgeInsets.symmetric(horizontal: 8),
      child: Container(
        decoration: BoxDecoration(
            border: Border.all(color: Colors.black, width: 1),
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: Colors.green),
        child: Center(
          child: Padding(
            padding: EdgeInsets.only(left: 20),
            child: TextField(
              textAlignVertical: TextAlignVertical.bottom,
              textAlign: TextAlign.start,
              cursorColor: Colors.black,
              maxLength: 1,
              decoration: new InputDecoration.collapsed(hintText: ""),
              keyboardType: TextInputType.text,
              autocorrect: false,
              maxLines: 1,
              enableSuggestions: false,
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
        ),
      ),
    );

我想要中间的文字（对不起我的绘画技巧）：

如果可能的话，我还想为右下角的字母计数器设置一个填充？

提前致谢。

Answer 1

decoration: InputDecoration.collapsed() ， TextField 和计数器正在谈论空间并像那样定位文本。 您可以在InputDecoration中使用counterText: "", 。

Container(
  decoration: BoxDecoration(
      border: Border.all(color: Colors.black, width: 1),
      borderRadius: BorderRadius.all(Radius.circular(20)),
      color: Colors.green),
  child: TextField(
    controller: TextEditingController()..text = "A",
    textAlignVertical: TextAlignVertical.center,
    textAlign: TextAlign.start,
    cursorColor: Colors.black,
    maxLength: 1,
    decoration: InputDecoration(
        counterText: "",
        hintText: "",
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(20)),
        )),
    keyboardType: TextInputType.text,
    autocorrect: false,
    maxLines: 1,
    enableSuggestions: false,
    style: TextStyle(
      color: Colors.white,
      fontSize: 24,
    ),
  ),
),

如果需要，添加填充和其他装饰