Flutter：如何实现键盘颜色随主题响应式更新（无需重启键盘）

这是因为keyboardAppearance属性仅在键盘初次弹出时生效，已显示的系统键盘不会因该属性变化自动刷新样式。以下是两种直接有效的解决方案：

方案一：通过焦点管理触发键盘重新加载 #

给输入框绑定FocusNode，监听主题变化时，若输入框处于聚焦状态，先失焦再重新获取焦点，强制键盘以新主题样式弹出。

// 定义FocusNode（注意在组件dispose时释放）
final emailFocusNode = FocusNode();

// TextFormField配置
TextFormField(
  focusNode: emailFocusNode,
  keyboardType: TextInputType.emailAddress,
  keyboardAppearance: ref.watch(themeModeProvider).themeMode.toBrightness,
),

// 在组件初始化时监听主题变化
ref.listen(themeModeProvider, (previousMode, currentMode) {
  if (emailFocusNode.hasFocus) {
    // 先失焦
    emailFocusNode.unfocus();
    // 延迟100ms再重新聚焦，避免界面闪烁
    Future.delayed(const Duration(milliseconds: 100), () {
      emailFocusNode.requestFocus();
    });
  }
});

方案二：监听应用生命周期，切回前台时自动刷新 #

结合WidgetsBindingObserver监听应用从后台返回的状态，在应用恢复前台时，自动触发键盘样式更新。

class YourPageState extends State<YourPage> with WidgetsBindingObserver {
  final emailFocusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    // 添加生命周期监听
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    // 移除监听并释放资源
    WidgetsBinding.instance.removeObserver(this);
    emailFocusNode.dispose();
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 应用从后台切回前台时检查
    if (state == AppLifecycleState.resumed) {
      if (emailFocusNode.hasFocus) {
        emailFocusNode.unfocus();
        Future.delayed(const Duration(milliseconds: 100), () {
          emailFocusNode.requestFocus();
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      focusNode: emailFocusNode,
      keyboardType: TextInputType.emailAddress,
      keyboardAppearance: ref.watch(themeModeProvider).themeMode.toBrightness,
    );
  }
}

补充说明 #

• 若页面有多个输入框，可以统一管理所有FocusNode，在主题变化时批量处理。
• 延迟时间可根据设备性能调整，确保操作流畅无明显闪烁。

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