Flutter多语言适配

多语言适配是一个让应用面向国际市场的前提，另外也看我的Android原生的多语言适配的文章添加链接描述 。

那么Flutter如何进行多语言适配呢？本文使用了GetX框架，所以你的项目应该是GetX框架搭建的。

创建翻译类

import 'package:get/get.dart';

class AppTranslations extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
        'en': {
          'hello': 'Hello',
          'jym': 'JYM'
        },
    //    'zh': {
    //      'hello': '你好',
    //      'jym': '掘友们'
    //    },
        'zh_CN': { 
          'hello': '你好', 
          'jym': '掘友们', 
        },
        'zh_TW': { 
          'hello': '你好',
          'welcome': '掘友們'
        },
      };
}

首先要定义一个类继承Translations类，实现各个语言的key-value文案。其中zh_TW代表繁体中文，而zh_CN则代表简体中文。

在 pubspec.yaml 中添加依赖库

dependencies:
  flutter:
    sdk: flutter
  # 后面的都是你要加的
  flutter_localizations:
    sdk: flutter
  # 务必使用^0.19.0及以上版本，我之前使用^0.17.0版本会有问题
  intl: ^0.19.0

在 main.dart 中配置多语言支持

在 GetMaterialApp 中配置 locale 和 translations，这样GetX就能自动帮你翻译了。

import 'package:flutter_localizations/flutter_localizations.dart';
import 'dart:ui';
import 'app_translations.dart';

String getSystemLanguage() {
  Locale locale = window.locale;
  return locale.languageCode; // 返回系统语言的代码，如 'en'、'zh' 等
}

void main() {
  String systemLanguage = getSystemLanguage();
  // 需要手动改变时使用它切换语言
  // Get.updateLocale(Locale(systemLanguage));
  runApp(GetMaterialApp(
    title: 'hello'.tr,
    initialRoute: '/home',
    translations: AppTranslations(),
    locale: Locale(systemLanguage),
    fallbackLocale: Locale('en'),
    supportedLocales: [
      Locale('en'), // English
      Locale('zh'), // Chinese
    ],
    localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
    ],
    getPages: [
      GetPage(
        name: '/home',
        title: 'jym'.tr,
        page: () => HomeView(),
        binding: HomeBinding(),
      ),
      GetPage(
        name: '/pageOne',
        page: () => SecondView(),
        binding: SecondBinding(),
      )
      ,
      GetPage(
        name: '/pageTwo',
        page: () => ThirdView(),
        binding: ThirdBinding(),
      )
    ],
  ));
}

这里注意这几个delegate也是必须的，否则在使用时会报 MissingPluginException 错误或出现灰块问题。

localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
]

translations是你要设置的翻译类，这里我们指定之前定义的 AppTranslations 。locale表示设置的默认语言，这里我们通过 getSystemLanguage() 方法获取的系统默认的语言，当然也可以写死。fallback表示当没有对应语言时的默认语言。

使用翻译后的字符串

使用.tr来获取翻译的字符串，比如 Text('hello'.tr) 。如果你要进行字符串拼接请使用字符串模板，Text("${'hello'.tr} ${'jym'.tr}") 。

动态切换语言

ElevatedButton(
  onPressed: () {
    var locale = Locale('zh', 'TW');
    Get.updateLocale(locale);
  },
  child: Text('切換到繁體中文')
);

聊聊多语言

因为阿拉伯地区的语言风格和我们截然相反，比如阿拉伯语、希伯来语，都是从右向左的，所以在布局的时候还要考虑它们的地区习性。另外还要考虑数字、日期、时间、货币符号等。

比如：

• 日期格式：MM/DD/YYYY（美国） vs. DD/MM/YYYY（欧洲）
• 货币符号：$100（美国） vs. 100€（欧洲）

在越南，数字格式的使用与其他许多国家有一些不同。越南采用的是国际标准的数字分隔符，其中：

• 小数点 使用逗号（,）表示。
• 千位分隔符 使用句点（.）表示。
  那么我们这样去解决。

import 'package:intl/intl.dart';

void main() {
  var numberFormat = NumberFormat("#,##0.00", "vi_VN");
  print(numberFormat.format(1234.56)); // 输出：1.234,56
}

所以，除了语言和格式，文化背景也影响用户的习惯。比如，颜色的象征意义、符号的使用等。了解并尊重不同地区用户的文化差异非常重要。