如何在Flutter的TextFormField中添加固定不消失的占位文本？

想要在Flutter的TextFormField中显示不会消失、能适配用户输入的示例文本，效果类似hintText但不会随输入消失。之前尝试用Stack堆叠两个TextFormField的方法，引发了无法解决的焦点、控制器同步等问题，期望效果是用户输入时，已输入的部分覆盖示例文本，未输入的部分仍保留浅灰色的示例提示。

尝试的代码片段：

Stack(
      children: [
        TextFormField(
          scrollController: scrollController,
          focusNode: focusNode,
          controller: textController,
          keyboardType: widget.textInputType,
          decoration: InputDecoration(
            hintTextDirection: TextDirection.ltr,
            labelText: "label",
            hintText: "Hint",
            fillColor: white,
          ),
        ),
        if (IsTextFormSelected)
          TextFormField(
            scrollController: secondScrollController,
            focusNode: secondFocusNode,
            controller: secondController,
            textCapitalization: TextCapitalization.sentences,
            decoration: InputDecoration(
              border: InputBorder.none,
              focusedBorder: InputBorder.none,
              enabledBorder: InputBorder.none,
              errorBorder: InputBorder.none,
              disabledBorder: InputBorder.none,
              hintTextDirection: TextDirection.ltr,
              fillColor: Colors.transparent,
            ),
            onTap: () {
              // RequestsFocus from mainTextFormField onTap
              focusNode.requestFocus();
            },
          ),
      ],
    );

放弃堆叠两个TextFormField的思路，改用单个TextFormField + 底层静态Text的Stack组合，既实现需求又避免多输入框的冲突问题：

实现思路 #

• 用Stack将静态示例文本和可输入的TextFormField叠加，底层Text显示完整的浅灰色示例文本
• 上层TextFormField设置透明背景，用户输入的黑色文本会覆盖在底层示例文本上，未输入的区域自然显示底层的浅灰色示例
• 用单个TextEditingController控制输入，监听文本变化可限制输入长度与示例文本匹配（可选）

完整代码示例 #

class PersistentHintTextField extends StatefulWidget {
  final String sampleText; // 预期输入的示例文本
  final String labelText;

  const PersistentHintTextField({
    super.key,
    required this.sampleText,
    required this.labelText,
  });

  @override
  State<PersistentHintTextField> createState() => _PersistentHintTextFieldState();
}

class _PersistentHintTextFieldState extends State<PersistentHintTextField> {
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 可选：限制输入长度不超过示例文本长度
    _controller.addListener(() {
      if (_controller.text.length > widget.sampleText.length) {
        _controller.text = _controller.text.substring(0, widget.sampleText.length);
        _controller.selection = TextSelection.fromPosition(
          TextPosition(offset: _controller.text.length),
        );
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 统一输入文本和示例文本的样式，确保位置对齐
    final inputTextStyle = Theme.of(context).textTheme.bodyLarge?.copyWith(color: Colors.black) 
                          ?? const TextStyle(color: Colors.black);
    final hintTextStyle = inputTextStyle.copyWith(color: Colors.grey.shade400);

    return Stack(
      alignment: Alignment.centerLeft,
      children: [
        // 底层：显示完整的示例文本
        Padding(
          // 内边距和TextFormField保持一致，确保位置对齐
          padding: const EdgeInsets.only(left: 16.0, top: 16.0),
          child: Text(
            widget.sampleText,
            style: hintTextStyle,
          ),
        ),
        // 上层：可输入的TextFormField，背景透明
        TextFormField(
          controller: _controller,
          decoration: InputDecoration(
            labelText: widget.labelText,
            fillColor: Colors.transparent,
            filled: true,
            border: const OutlineInputBorder(),
            contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
          ),
          style: inputTextStyle,
          maxLength: widget.sampleText.length, // 可选：限制输入长度
          buildCounter: (context, {required currentLength, required isFocused, maxLength}) => null, // 隐藏长度计数器
        ),
      ],
    );
  }
}

使用方式 #

PersistentHintTextField(
  sampleText: "请输入123456",
  labelText: "验证码",
)

优势 #

• 避免了多TextFormField带来的焦点冲突、控制器同步等问题
• 逻辑简单，仅需单个输入控制器，维护成本低
• 完美实现“输入覆盖示例，未输入区域保留提示”的效果

内容的提问来源于stack exchange，提问作者Shistastic