Flutter多语言App问题：Riverpod切换Locale后MaterialApp不重建

核心问题定位 #

切换语言后MaterialApp未自动重建，本质是Locale状态变化未触发MaterialApp的依赖更新，导致UI无法感知新Locale。结合GoRouter和Riverpod的场景，需要确保：

1. Locale状态由Riverpod管理且可监听
2. MaterialApp和GoRouter均依赖该Locale状态，状态变化时自动重建

步骤1：用Riverpod实现可监听的Locale状态管理 #

创建一个Notifier来处理Locale的读取、存储和更新，同时实现你的逻辑：优先用户存储>设备语言>默认英文。

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

final localeProvider = NotifierProvider<LocaleNotifier, Locale>(LocaleNotifier.new);

class LocaleNotifier extends Notifier<Locale> {
  static const _localeStorageKey = 'user_selected_locale';
  static const _defaultLocale = Locale('en');
  // 替换为你的应用支持的语言列表
  static final _supportedLocales = [const Locale('en'), const Locale('zh')];

  @override
  Locale build() {
    // 初始化时先返回默认值，后续异步读取存储后更新状态
    return _defaultLocale;
  }

  @override
  void initState() {
    super.initState();
    // 异步读取本地存储的语言设置
    _loadSavedLocale();
  }

  Future<void> _loadSavedLocale() async {
    final prefs = await SharedPreferences.getInstance();
    final savedLocaleTag = prefs.getString(_localeStorageKey);

    if (savedLocaleTag != null) {
      final savedLocale = Locale.fromSubtags(languageCode: savedLocaleTag);
      state = _isSupported(savedLocale) ? savedLocale : _defaultLocale;
      return;
    }

    // 无存储时使用设备语言
    final deviceLocale = WidgetsBinding.instance.platformDispatcher.locale;
    state = _isSupported(deviceLocale) ? deviceLocale : _defaultLocale;
  }

  // 切换语言并保存到本地
  Future<void> switchLocale(Locale newLocale) async {
    if (!_isSupported(newLocale)) return;
    
    state = newLocale;
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString(_localeStorageKey, newLocale.toLanguageTag());
  }

  // 检查语言是否被支持
  bool _isSupported(Locale locale) => _supportedLocales.contains(locale);
}

步骤2：让MaterialApp监听Locale状态 #

使用ConsumerWidget包裹MaterialApp，通过ref.watch监听Locale状态变化，确保状态更新时MaterialApp自动重建。同时让GoRouter依赖Locale，避免路由层无法感知语言变化。

class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 监听Locale状态，变化时触发重建
    final currentLocale = ref.watch(localeProvider);
    // 让GoRouter依赖Locale，确保路由页面随语言更新
    final router = ref.watch(goRouterProvider(currentLocale));

    return MaterialApp.router(
      title: 'Your App',
      locale: currentLocale,
      supportedLocales: LocaleNotifier._supportedLocales,
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        // 这里添加你的自定义Localizations Delegate
      ],
      routerConfig: router,
      // 其他主题等配置
    );
  }
}

步骤3：配置依赖Locale的GoRouter #

通过family让GoRouter依赖Locale参数，确保Locale变化时重新生成GoRouter实例，路由页面会随新Locale重建。

final goRouterProvider = Provider.family<GoRouter, Locale>((ref, locale) {
  return GoRouter(
    initialLocation: '/',
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const HomeScreen(),
      ),
      GoRoute(
        path: '/settings',
        builder: (context, state) => const SettingsScreen(),
      ),
      // 其他路由配置
    ],
  );
});

步骤4：设置页实现语言切换逻辑 #

在设置页中通过Riverpod的notifier触发Locale更新：

class SettingsScreen extends ConsumerWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('Settings')),
      body: ListView(
        children: [
          ListTile(
            title: const Text('English'),
            onTap: () => ref.read(localeProvider.notifier).switchLocale(const Locale('en')),
          ),
          ListTile(
            title: const Text('中文'),
            onTap: () => ref.read(localeProvider.notifier).switchLocale(const Locale('zh')),
          ),
        ],
      ),
    );
  }
}

关键注意事项 #

1. 初始化SharedPreferences：在main函数中提前初始化，确保读取存储时无异常：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SharedPreferences.getInstance();
  runApp(const ProviderScope(child: MyApp()));
}

2. 避免静态GoRouter实例：如果之前是提前创建全局GoRouter，必须改为依赖Locale的动态实例，否则语言变化时路由不会更新。
3. 检查自定义Localizations：确保你的自定义Localizations Delegate正确读取当前Locale，而不是缓存旧值。

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