Flutter Riverpod跨文件组件数据共享异常：UI不重建问题排查

同一文件内的Widget可正常共享数据，但不同文件的Widget之间，状态更新无法通知其他Widget触发重建。点击UserProfileComponent中的按钮时，自身操作可执行，但DesktopScaffold中的界面不会切换。

提供的代码示例 #

navigation_provider.dart #

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class NavigationProvider extends ChangeNotifier{

bool showUserProfile = true;
  
void toggleProfile(toggle){
showUserProfile = toggle;
notifyListeners();
}
}

desktop_scaffold.dart #

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:premiumpeaches/providers/navigation_provider.dart';
import 'package:flutter/material.dart';

final navigatorProvider = ChangeNotifierProvider((ref) => NavigationProvider());
class DesktopScaffold extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return SizedBox(
      child: ref.watch(navigatorProvider).showUserProfile == true ? UserProfileComponent() : ProfileSettingsComponent()
    );
  }
}

user_profile_component.dart #

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:premiumpeaches/providers/navigation_provider.dart';
import 'package:flutter/material.dart';

final navigatorProvider = ChangeNotifierProvider((ref) => NavigationProvider());
class UserProfileComponent extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return InkWell(
onTap:(){
ref.watch(navigatorProvider).toggleProfile(false);
},
child:Text('Click Me')
    );
  }
}

问题根源 #

你在两个不同文件中重复定义了同一个navigatorProvider，这会生成两个完全独立的Provider实例：

• DesktopScaffold监听的是自身文件内的Provider实例
• UserProfileComponent修改的是自身文件内的另一个Provider实例
  两者状态完全不关联，因此状态更新无法同步到跨文件的Widget。

解决方案 #

1. 统一Provider定义位置 #

将navigatorProvider的定义移到navigation_provider.dart中，确保全局唯一：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class NavigationProvider extends ChangeNotifier {
  bool showUserProfile = true;
  
  void toggleProfile(bool toggle) {
    showUserProfile = toggle;
    notifyListeners();
  }
}

// 全局唯一的Provider定义
final navigatorProvider = ChangeNotifierProvider((ref) => NavigationProvider());

2. 删除其他文件中的重复定义 #

分别在desktop_scaffold.dart和user_profile_component.dart中删除以下重复代码：

final navigatorProvider = ChangeNotifierProvider((ref) => NavigationProvider());

3. 优化状态修改方式 #

修改状态时推荐使用ref.read()而非ref.watch()，避免不必要的监听重建：
修改user_profile_component.dart的点击逻辑：

onTap:(){
  ref.read(navigatorProvider).toggleProfile(false);
},

内容的提问来源于stack exchange，提问作者ket-c