Flutter Provider全局navigatorKey监听失效及GoRouter报错问题

为了在无BuildContext的场景下访问LocaleProvider的值，创建了全局rootNavigatorKey并配置到应用中，但使用该Key的currentContext监听LocaleProvider时，调用notifyListeners()后，当前可见的UI数据无法实时更新，仅在滚动页面或返回操作后才会刷新；而直接传入组件自身context的方法则能正常响应更新。尝试GoRouter相关方案时，调用setLocale触发断言错误：

The following assertion was thrown building Builder(dirty, dependencies:
[_InheritedProviderScope<LocaleProvider?>]):
Assertion failed:
file:///Users/christiankonnerth/.pub-cache/hosted/pub.dev/go_router-6.0.1/lib/src/builder.dart:136:14
builder.dart:136
_routeMatchLookUp.isEmpty
is not true

需要找到无需传递context的有效解决方案。

方案1：通过Stream暴露Locale变化 #

修改LocaleProvider，新增一个广播Stream来同步Locale的更新，这样无需context也能监听状态变化：

class LocaleProvider extends ChangeNotifier {
  Locale _currentLocale = const Locale('en');
  final _localeStreamController = StreamController<Locale>.broadcast();

  Locale get currentLocale => _currentLocale;
  Stream<Locale> get localeStream => _localeStreamController.stream;

  void setLocale(Locale newLocale) {
    if (_currentLocale != newLocale) {
      _currentLocale = newLocale;
      _localeStreamController.add(newLocale);
      notifyListeners();
    }
  }

  @override
  void dispose() {
    _localeStreamController.close();
    super.dispose();
  }
}

在需要无context访问的场景（比如字符串扩展），可以缓存当前Locale并通过订阅Stream更新缓存：

extension TranslationsKeyExt on TranslationsKey {
  static Locale? _cachedLocale;

  String get tr {
    // 首次初始化时获取Provider实例（仅读取一次，不监听）
    final localeProvider = Provider.of<LocaleProvider>(
      rootNavigatorKey.currentContext!,
      listen: false,
    );
    _cachedLocale ??= localeProvider.currentLocale;

    // 订阅Stream自动更新缓存
    localeProvider.localeStream.listen((newLocale) {
      _cachedLocale = newLocale;
    });

    return translationsKeys[_cachedLocale!.languageCode]![this]!;
  }
}

如果是在Widget中使用，推荐用StreamBuilder包裹需要更新的UI，确保实时响应Locale变化：

StreamBuilder<Locale>(
  stream: context.read<LocaleProvider>().localeStream,
  initialData: context.read<LocaleProvider>().currentLocale,
  builder: (context, snapshot) {
    return Text(translationsKeys[snapshot.data!.languageCode]![yourKey]!);
  },
)

方案2：用全局ValueNotifier中转状态 #

创建全局ValueNotifier同步LocaleProvider的状态，无需context即可监听更新：

// 全局变量
final globalLocaleNotifier = ValueNotifier<Locale>(const Locale('en'));

class LocaleProvider extends ChangeNotifier {
  Locale _currentLocale = const Locale('en');

  Locale get currentLocale => _currentLocale;

  void setLocale(Locale newLocale) {
    if (_currentLocale != newLocale) {
      _currentLocale = newLocale;
      globalLocaleNotifier.value = newLocale;
      notifyListeners();
    }
  }
}

在无context场景下直接读取ValueNotifier的值：

String get tr {
  return translationsKeys[globalLocaleNotifier.value.languageCode]![this]!;
}

Widget中使用ValueListenableBuilder实现实时更新：

ValueListenableBuilder<Locale>(
  valueListenable: globalLocaleNotifier,
  builder: (context, locale, child) {
    return Text(translationsKeys[locale.languageCode]![yourKey]!);
  },
)

方案3：直接通过ProviderContainer获取实例 #

初始化Provider时保存全局ProviderContainer，无需context即可直接读取或监听Provider：

// 全局容器实例
final appContainer = ProviderContainer();

void main() {
  runApp(
    UncontrolledProviderScope(
      container: appContainer,
      child: const MyApp(),
    ),
  );
}

无context场景下读取Provider：

String get tr {
  final localeProvider = appContainer.read(localeProviderProvider);
  return translationsKeys[localeProvider.currentLocale.languageCode]![this]!;
}

如果需要监听变化，结合方案1的Stream实现即可。

GoRouter断言错误修复 #

该错误是因为在GoRouter的builder周期内调用了修改状态的方法，导致路由匹配未完成就触发更新。可以通过延迟执行解决：

void updateLocale(Locale newLocale) {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    appContainer.read(localeProviderProvider).setLocale(newLocale);
    // 后续路由操作放在这里执行
  });
}

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