Flutter中如何获取TextFormField的状态或其当前边框颜色？

核心方案 #

通过监听FocusNode追踪焦点状态，结合错误文本判断错误状态，再从Theme的InputDecorationTheme中提取对应状态的边框颜色，最终将该颜色应用到自定义后缀Widget的描边。

完整代码示例 #

import 'package:flutter/material.dart';

class CustomSuffixField extends StatefulWidget {
  const CustomSuffixField({super.key});

  @override
  State<CustomSuffixField> createState() => _CustomSuffixFieldState();
}

class _CustomSuffixFieldState extends State<CustomSuffixField> {
  final FocusNode _focusNode = FocusNode();
  final TextEditingController _controller = TextEditingController();
  String? _errorText;

  @override
  void initState() {
    super.initState();
    // 监听焦点变化，触发UI更新
    _focusNode.addListener(() => setState(() {}));
  }

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

  @override
  Widget build(BuildContext context) {
    final inputTheme = Theme.of(context).inputDecorationTheme;
    Color borderColor;

    // 根据状态确定边框颜色
    if (_errorText != null && _errorText!.isNotEmpty) {
      borderColor = inputTheme.errorBorder?.borderSide.color ?? Theme.of(context).colorScheme.error;
    } else if (_focusNode.hasFocus) {
      borderColor = inputTheme.focusedBorder?.borderSide.color ?? Theme.of(context).colorScheme.primary;
    } else {
      borderColor = inputTheme.enabledBorder?.borderSide.color ?? Theme.of(context).colorScheme.outline;
    }

    return TextFormField(
      controller: _controller,
      focusNode: _focusNode,
      decoration: InputDecoration(
        labelText: '输入内容',
        errorText: _errorText,
        // 自定义后缀Widget，描边颜色匹配TextFormField边框
        suffixIcon: Container(
          width: 40,
          height: 40,
          margin: const EdgeInsets.symmetric(horizontal: 8),
          decoration: BoxDecoration(
            border: Border.all(color: borderColor),
            borderRadius: BorderRadius.circular(8),
          ),
          child: const Center(child: Text('自定义')), // 替换为你的任意Widget
        ),
      ),
      validator: (value) {
        if (value == null || value.isEmpty) {
          setState(() => _errorText = '内容不能为空');
          return _errorText;
        }
        setState(() => _errorText = null);
        return null;
      },
    );
  }
}

关键细节说明 #

• 焦点状态监听：通过FocusNode的监听回调，在焦点变化时调用setState更新UI，确保颜色实时同步。
• 错误状态判断：通过_errorText变量记录校验错误信息，以此作为错误状态的判断依据。
• 颜色匹配逻辑：优先从InputDecorationTheme中取对应状态的边框颜色（如focusedBorder、errorBorder），如果未自定义则 fallback 到Theme的颜色Scheme（如primary、error），保证和TextFormField默认边框颜色完全一致。

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