Flutter应用切换语言时如何动态更改对应字体系列

1. 新增依赖（如未添加google_fonts） #

在pubspec.yaml中添加对应依赖：

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.6
  google_fonts: ^6.2.1 # 可替换为最新稳定版本

2. 创建全局状态控制器 #

新建locale_controller.dart文件，用于管理语言和字体的全局状态：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import 'appTheme.dart'; // 导入你自己的主题配置文件

class LocaleController extends GetxController {
  // 响应式存储当前使用的字体族
  RxString currentFontFamily = GoogleFonts.lato().fontFamily!.obs;

  void updateLocaleAndFont(Locale targetLocale, String targetFont) {
    // 更新应用语言
    Get.updateLocale(targetLocale);
    // 更新当前字体
    currentFontFamily.value = targetFont;
    // 同步更新全局主题字体
    Get.changeTheme(
      ThemeData(
        fontFamily: currentFontFamily.value,
        // 保留你原有主题的其他配置
        primaryColor: AppTheme.primaryColor,
        scaffoldBackgroundColor: AppTheme.backgroundColor,
      ),
    );
  }
}

3. 调整现有语言弹窗逻辑 #

修改你已有的语言选择弹窗代码：

首先调整locales配置 #

import 'package:google_fonts/google_fonts.dart';

final List<Map<String, dynamic>> locales = [
  {
    'name': 'English',
    'locale': const Locale('en', 'US'),
    'fontFamily': GoogleFonts.lato().fontFamily,
  },
  {
    'name': 'Arabic',
    'locale': const Locale('ar'),
    'fontFamily': GoogleFonts.cairo().fontFamily,
  },
];

然后修改updateLocal方法 #

// 提前获取全局控制器，控制器需要在main入口初始化
final localeController = Get.find<LocaleController>();

updateLocal(Locale locale, String fontFamily, BuildContext context) {
  Navigator.of(context).pop();
  localeController.updateLocaleAndFont(locale, fontFamily);
}

最后修改列表项点击事件 #

onTap: () {
  updateLocal(
    locales[index]['locale'],
    locales[index]['fontFamily'],
    context,
  );
},

4. 配置应用入口 #

修改main.dart文件，绑定控制器和响应式主题：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'locale_controller.dart';

void main() {
  // 初始化全局控制器
  Get.put(LocaleController());
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    final localeController = Get.find<LocaleController>();
    // 用Obx监听字体变化，自动更新全局主题
    return Obx(
      () => GetMaterialApp(
        title: '你的应用名称',
        // 保留你原有多语言配置
        locale: Get.deviceLocale,
        fallbackLocale: const Locale('en', 'US'),
        // translations: YourTranslationClass(),
        // 绑定响应式字体到全局主题
        theme: ThemeData(
          fontFamily: localeController.currentFontFamily.value,
          // 保留你原有其他主题配置
        ),
        home: const YourHomePage(),
      ),
    );
  }
}

5. 自定义组件适配（可选） #

如果你封装的KText组件单独指定了fontFamily，需要修改组件默认继承全局字体，或者绑定控制器的当前字体即可：

class KText extends StatelessWidget {
  final String text;
  final double? fontSize;
  final Color? color;

  const KText({super.key, required this.text, this.fontSize, this.color});

  @override
  Widget build(BuildContext context) {
    final localeController = Get.find<LocaleController>();
    return Text(
      text,
      style: TextStyle(
        fontSize: fontSize ?? 14,
        color: color ?? Colors.black,
        // 如不需要单独指定可删除该行，默认会自动继承全局主题字体
        fontFamily: localeController.currentFontFamily.value,
      ),
    );
  }
}

• 切换语言时会自动同步更换字体，GetX会自动触发应用重建，无需手动刷新页面
• 如果应用内有单独指定fontFamily的自定义文本样式，需要逐一适配为响应式字体
• 如使用离线字体，无需引入google_fonts包，直接把字体文件导入项目、在pubspec.yaml声明后，把fontFamily字段替换为你声明的字体名称即可

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