Flutter中TextFormField焦点切换背景色异常：需双击加载装饰样式

• 需求：TextFormField 获取焦点时显示黑色背景，失去焦点时切换为蓝灰色背景，同时获取焦点时显示紫色粗边框
• 异常现象：获取焦点时背景色正常变化，但需双击才能触发紫色边框的装饰样式加载

相关代码 #

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class TextFormFieldWidget extends HookConsumerWidget {
  final TextEditingController controller;
  final bool obscureText;
  final String? hintText;

  const TextFormFieldWidget({
    super.key,
    required this.controller,
    this.hintText,
    this.obscureText = false,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    Color colorBlue = Colors.blueGrey.shade800;
    Color colorBlack = Colors.black;

    FocusNode focusNode = FocusNode();

    final isFocused = useState(false);

    focusNode.addListener(
      () {
        isFocused.value = focusNode.hasFocus;
      },
    );

    return TextFormField(
      controller: controller,
      obscureText: obscureText,
      decoration: InputDecoration(
        hintText: hintText,
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(5),
          borderSide: BorderSide(
            color: Colors.purple.shade700,
            width: 3,
          ),
        ),
        fillColor: isFocused.value ? colorBlack : colorBlue,
        filled: true,
      ),
      focusNode: focusNode,
    );
  }
}

状态展示 #

isFocused=false	isFocused=true

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