Flutter+Getx：选中语言切换字体家族但主题未更新问题

1. 改造主题类，支持动态字体切换 #

把固定的fontFamily改成根据当前语言动态选择，直接通过GetX获取当前Locale来判断：

class AppTheme {
  AppTheme._();

  // 根据当前语言返回对应字体
  static String _getFontFamily() {
    final locale = Get.locale;
    return locale?.languageCode == 'en' ? 'Poppins' : 'Cairo';
  }

  static ThemeData lightTheme() {
    return ThemeData(
      fontFamily: _getFontFamily(),
      brightness: Brightness.light,
    );
  }

  static ThemeData darkTheme() {
    return ThemeData(
      fontFamily: _getFontFamily(),
      brightness: Brightness.dark,
    );
  }
}

2. 升级LanguageController，切换语言时同步更新主题 #

在changeLang方法中，更新Locale后调用GetX的主题更新方法，强制刷新主题：

class LanguageController extends GetxController {
  Locale? initLang;

  AppServices appServices = Get.find();

  changeLang(String languageCode) {
    Locale locale = Locale(languageCode);
    appServices.box.write(AppStorageKeys.lang, languageCode);
    // 更新Locale
    Get.updateLocale(locale);
    // 同步更新主题
    Get.changeTheme(AppTheme.lightTheme());
    // 如果需要支持深色模式，可根据当前themeMode切换对应的主题
    // Get.changeThemeMode(ThemeMode.dark);
  }

  @override
  void onInit() {
    String? storedLang = appServices.box.read(AppStorageKeys.lang);
    initLang = _getLocaleFromStoredLang(storedLang) ?? _getDefaultLocale();
    super.onInit();
  }

  Locale? _getLocaleFromStoredLang(String? storedLang) {
    return storedLang != null ? Locale(storedLang) : null;
  }

  Locale _getDefaultLocale() {
    return Locale(Get.deviceLocale!.languageCode);
  }
}

3. 调整main.dart，确保主题动态生效 #

将原来的静态主题替换为动态生成的方法，同时添加builder确保主题更新后界面重建：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initialServices();
  LanguageController controller = Get.put(LanguageController());
  runApp(
    GetMaterialApp(
      themeMode: ThemeMode.light,
      // 动态生成主题
      theme: AppTheme.lightTheme(),
      darkTheme: AppTheme.darkTheme(),
      getPages: AppPages.routes,
      initialRoute: AppPages.INITIAL,
      translations: AppTranslation(),
      locale: controller.initLang,
      // 确保主题更新后界面重建
      builder: (context, child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
          child: child!,
        );
      },
    ),
  );
}

额外配置检查 #

确保pubspec.yaml中已正确引入两种字体：

fonts:
  - family: Cairo
    fonts:
      - asset: assets/fonts/Cairo-Regular.ttf
      - asset: assets/fonts/Cairo-Bold.ttf
        weight: 700
  - family: Poppins
    fonts:
      - asset: assets/fonts/Poppins-Regular.ttf
      - asset: assets/fonts/Poppins-Bold.ttf
        weight: 700

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