如何在同一个容器中拥有标签和输入文本

Question

我正在尝试重新创建此文本字段设计

如您所见，标签/提示文本在未获得焦点时居中，一旦获得焦点，输入文本和标签/提示文本也会在边框内居中。

我尝试重新创建此设计的是首先创建文本字段，删除所有边框，并用容器包装它，最后使用内容填充，但我要么让文本输入文本偏离中心，要么得到标签/提示文本偏离中心。

下面的图片显示了标签/提示是如何偏离中心的

但是在对焦时

这里是示例代码

              Container(
                height: 60,
                padding: EdgeInsetsDirectional.only(
                  start: width * 0.038,
                  end: width * 0.038,
                ),
                decoration: BoxDecoration(
                  border: Border.all(
                      color: state.hasError
                          ? Constant.errorColor
                          : Constant.greyColor,
                      width: 1),
                  borderRadius: const BorderRadius.all(Radius.circular(10)),
                ),
                child: TextField(
                  inputFormatters: inputFormatter,
                  controller: controller,
                  onSubmitted: onSubmitted,
                  onChanged: state.didChange,
                  focusNode: focusNode,
                  textInputAction: textInputAction,
                  keyboardType: keyboard,
                  obscureText: obscure,
                  decoration: InputDecoration(
                    labelText: label,
                    alignLabelWithHint: true,
                    labelStyle: Constant.hintText.copyWith(
                      color: state.hasError
                          ? Constant.errorColor
                          : Constant.greyColor,
                      fontSize: 14,
                    ),
                    hintText: hint,
                    hintStyle: Constant.hintText.copyWith(fontSize: 14),
                    contentPadding: null,
                    // contentPadding: EdgeInsetsDirectional.only(
                    //   bottom: 7.5,
                    // ),
                    border: InputBorder.none,
                    focusedBorder: InputBorder.none,
                    enabledBorder: InputBorder.none,
                    errorBorder: InputBorder.none,
                    disabledBorder: InputBorder.none,
                  ),
                ),
              ),

Answer 1

您可以创建一个自定义文本框：

Container(
    Column(
       children: [
         Text("insert label text", textAlign: TextAlign.start)
         TextField(
           ...
           // no labelText
           // remove decorations
         )
      ]
   )
);