Flutter教程实现多语言支持Intl

在Flutter中使用Intl实现多语言支持时遇到了一些问题：

  1. 按照官方文档配置了intl和flutter_localizations，但App运行时仍然只显示默认语言，无法切换其他语言。如何正确绑定语言环境和加载对应的翻译文件？

  2. arb文件生成的Dart类似乎没有自动更新，修改了messages_en.arb后运行flutter gen-l10n没有生效。是否需要手动清理缓存或调整l10n.yaml配置？

  3. 想在运行时动态切换语言（比如用户从设置页选择），但调用localeResolutionCallback后界面文字没有实时刷新。是否需要强制重启App？还是有其他方法实现无刷新切换？

  4. 某些语言的复数或性别相关文本（如"1 item"/“2 items”）在arb文件中如何正确定义？官方示例的{count,plural}语法总是报格式错误。


更多关于Flutter教程实现多语言支持Intl的实战教程也可以访问 https://www.itying.com/category-92-b0.html

3 回复

要在Flutter中实现多语言支持（使用intl包），首先需添加依赖到pubspec.yaml：

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.18.0

保存后运行flutter pub get。

创建翻译文件，例如在lib/l10n/下新建messages_zh.dart和messages_en.dart：

// messages_zh.dart
import 'package:intl/intl.dart';
import 'package:flutter/foundation.dart';

class MessagesZh extends MessageLookup {
  @override
  String get localeName => 'zh';

  @override
  String helloWorld() => "你好世界";
}

// messages_en.dart
class MessagesEn extends MessageLookup {
  @override
  String get localeName => 'en';

  @override
  String helloWorld() => "Hello World";
}

注册这些翻译类并在主程序中设置：

void main() async {
  await initializeMessages('zh');
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localeResolutionCallback: (locale, supportedLocales) {
        return locale;
      },
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        DefaultMaterialLocalizationsDelegate(),
      ],
      supportedLocales: [Locale('zh'), Locale('en')],
      home: MyHomePage(),
    );
  }
}

在页面中使用：S.of(context).helloWorld()。

更多关于Flutter教程实现多语言支持Intl的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


要实现Flutter的多语言支持，可以使用flutter_localizations和intl库。首先添加依赖到pubspec.yaml：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

创建一个l10n目录，并生成本地化文件。创建messages.ar.ar.dart、messages.en.ar.dart等文件。例如：

import 'package:intl/intl.dart';

class AppLocalizations {
  final Locale locale;

  AppLocalizations(this.locale);

  static const LocalizationsDelegate<AppLocalizations> delegate = _AppLocalizationsDelegate();

  factory AppLocalizations.of(BuildContext context) => Localizations.of<AppLocalizations>(context, AppLocalizations)!;
  
  String get title => IntlLang.title[locale.languageCode]!;
}

运行flutter gen-l10n生成代码。在MaterialApp中设置：

localizationsDelegates: [
  AppLocalizations.delegate,
  GlobalMaterialLocalizations.delegate,
  GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
  Locale('ar'), // 阿拉伯语
  Locale('en'), // 英语
],

在代码中使用AppLocalizations.of(context).title调用。通过改变设备语言，应用会自动切换语言。

Flutter多语言支持实现(Intl)

在Flutter中实现多语言支持可以使用flutter_localizations和intl包。以下是具体实现步骤：

1. 添加依赖

在pubspec.yaml中添加：

dependencies:
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

2. 创建arb文件

在项目目录下创建lib/l10n文件夹，然后创建：

  • app_en.arb (英语)
  • app_zh.arb (中文)

示例app_en.arb:

{
  "@@locale": "en",
  "hello": "Hello",
  "@hello": {
    "description": "Greeting"
  }
}

示例app_zh.arb:

{
  "@@locale": "zh",
  "hello": "你好"
}

3. 生成本地化类

运行命令生成本地化代码：

flutter pub pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/l10n/app_localizations.dart
flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/l10n --no-use-deferred-loading lib/l10n/app_localizations.dart lib/l10n/app_*.arb

4. 创建AppLocalizations类

lib/l10n/app_localizations.dart:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'l10n/messages_all.dart';

class AppLocalizations {
  static Future<AppLocalizations> load(Locale locale) {
    final String name = locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
    final String localeName = Intl.canonicalizedLocale(name);
    return initializeMessages(localeName).then((_) {
      Intl.defaultLocale = localeName;
      return AppLocalizations();
    });
  }

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations)!;
  }

  String get hello {
    return Intl.message('Hello', name: 'hello', desc: 'Greeting');
  }
}

5. 配置MaterialApp

MaterialApp(
  localizationsDelegates: [
    AppLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en'), // 英语
    const Locale('zh'), // 中文
  ],
  // ...
)

6. 使用本地化文本

Text(AppLocalizations.of(context)!.hello)

这样就完成了Flutter应用的多语言支持实现。

回到顶部