Flutter如何实现本地化

在Flutter项目中，如何实现多语言本地化功能？目前需要在App中支持中英文切换，但不知道如何高效管理翻译文件，以及如何动态切换语言。求教具体的实现方案，包括：

  1. 如何配置arb文件？
  2. 怎样通过intl包生成dart代码？
  3. 如何实现运行时语言切换而不重启App？
  4. 是否有推荐的状态管理方案来同步语言切换？ 希望能提供详细的代码示例和最佳实践，谢谢！
2 回复

Flutter本地化通过flutter_localizations包实现。步骤如下：

  1. 在pubspec.yaml添加依赖。
  2. 使用MaterialApp的localizationsDelegates和supportedLocales配置。
  3. 创建ARB文件管理多语言文本。
  4. 通过AppLocalizations.of(context)调用本地化字符串。

更多关于Flutter如何实现本地化的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现本地化（国际化）主要通过以下步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

2. 创建本地化文件

创建 lib/l10n 目录，添加 app_localizations.dart：

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show SynchronousFuture;

class AppLocalizations {
  AppLocalizations(this.locale);
  
  final Locale locale;
  
  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations)!;
  }
  
  static const LocalizationsDelegate<AppLocalizations> delegate = 
      _AppLocalizationsDelegate();
  
  static final Map<String, Map<String, String>> _localizedValues = {
    'en': {
      'title': 'Hello World',
      'login': 'Login',
    },
    'zh': {
      'title': '你好世界',
      'login': '登录',
    },
  };
  
  String get title => _localizedValues[locale.languageCode]!['title']!;
  String get login => _localizedValues[locale.languageCode]!['login']!;
}

class _AppLocalizationsDelegate 
    extends LocalizationsDelegate<AppLocalizations> {
  const _AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) => ['en', 'zh'].contains(locale.languageCode);

  @override
  Future<AppLocalizations> load(Locale locale) {
    return SynchronousFuture<AppLocalizations>(AppLocalizations(locale));
  }

  @override
  bool shouldReload(_AppLocalizationsDelegate old) => false;
}

3. 配置MaterialApp

在 main.dart 中：

return MaterialApp(
  title: 'Flutter Demo',
  localizationsDelegates: [
    AppLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en', ''), // 英语
    const Locale('zh', ''), // 中文
  ],
  home: MyHomePage(),
);

4. 使用本地化文本

在Widget中使用：

Text(AppLocalizations.of(context).title),
Text(AppLocalizations.of(context).login),

5. 切换语言

使用 locale 参数动态切换语言：

MaterialApp(
  locale: Locale('zh'), // 设置为中文
  // ... 其他配置
)

这样就完成了Flutter的本地化实现，支持多语言切换。

回到顶部