Flutter TextFormField验证文本过长显示不全问题求助

方案一：实现跑马灯（滚动）错误提示 #

默认错误提示文本不会自动滚动，我们可以自定义可滚动文本组件，替换TextFormField的错误提示布局：

1. 先写一个自动滚动的文本组件：

class MarqueeText extends StatefulWidget {
  final String text;
  final TextStyle style;

  const MarqueeText({super.key, required this.text, required this.style});

  @override
  State<MarqueeText> createState() => _MarqueeTextState();
}

class _MarqueeTextState extends State<MarqueeText> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    // 根据文本长度调整滚动时长，字符越多滚动越慢
    _controller = AnimationController(
      duration: Duration(seconds: widget.text.length ~/ 3),
      vsync: this,
    )..repeat(reverse: true);
    _animation = Tween<double>(begin: 0, end: -1).animate(
      CurvedAnimation(parent: _controller, curve: Curves.linear),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.translate(
          offset: Offset(MediaQuery.of(context).size.width * _animation.value, 0),
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Text(widget.text, style: widget.style),
          ),
        );
      },
    );
  }
}

2. 在TextFormField中使用该组件自定义错误提示：

TextFormField(
  style: const TextStyle(color: Colors.white),
  controller: _newForeignController,
  decoration: InputDecoration(
    fillColor: Colors.black26,
    filled: true,
    hintStyle: const TextStyle(color: Colors.white24),
    hintText: "New word here",
    border: OutlineInputBorder(
      borderSide: BorderSide.none,
      borderRadius: BorderRadius.circular(8),
    ),
    errorStyle: const TextStyle(height: 0), // 隐藏默认错误文本的占位高度
  ),
  validator: (value) {
    if (value!.isEmpty) {
      return 'This is a warning that too long to display in the app';
    }
    return null;
  },
  // 通过builder自定义错误提示布局
  builder: (context, state) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        state.child,
        if (state.hasError)
          MarqueeText(
            text: state.errorText!,
            style: const TextStyle(color: Colors.red, fontSize: 12),
          ),
      ],
    );
  },
)

方案二：自动缩小字号适配容器 #

如果不想用滚动效果，可通过FittedBox让文本自动缩小以适应容器宽度：

TextFormField(
  style: const TextStyle(color: Colors.white),
  controller: _newForeignController,
  decoration: InputDecoration(
    fillColor: Colors.black26,
    filled: true,
    hintStyle: const TextStyle(color: Colors.white24),
    hintText: "New word here",
    border: OutlineInputBorder(
      borderSide: BorderSide.none,
      borderRadius: BorderRadius.circular(8),
    ),
    errorStyle: const TextStyle(height: 0),
  ),
  validator: (value) {
    if (value!.isEmpty) {
      return 'This is a warning that too long to display in the app';
    }
    return null;
  },
  builder: (context, state) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        state.child,
        if (state.hasError)
          SizedBox(
            width: MediaQuery.of(context).size.width * 0.8, // 对应容器的实际宽度，按需调整
            child: FittedBox(
              fit: BoxFit.scaleDown,
              alignment: Alignment.centerLeft,
              child: Text(
                state.errorText!,
                style: const TextStyle(color: Colors.red, fontSize: 12),
              ),
            ),
          ),
      ],
    );
  },
)

注意点 #

• 跑马灯方案可通过调整AnimationController的duration参数，控制滚动速度；
• 自动缩小方案必须给FittedBox指定明确宽度，否则无法触发缩放逻辑；
• 两种方案都通过builder接管错误提示布局，比直接修改errorStyle更灵活。

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