flutter_demo github地址

    初始化一个项目 locale_demo

    VSCode 安装 flutter Intl 插件

    pubspec.yaml 添加如下依赖

    1. dependencies:
    2.   flutter:
    3.     sdk: flutter
    4.   # 添加如下
    5.   flutter_localizations:
    6.     sdk: flutter
    7.   # ...

    国际化初始化
    ⌘ + ⇧ + P

    > Flutter Intl: Initialize

    项目 lib 目录会自动生成 generated 和 l10n 目录
    默认语言文本 en 自动添加

    本文额外添加一个语言两种版本，简体中文和繁体中文
    > Flutter Intl: Add locale

    键入 zh_CN

    重复上述操作 键入 zh_TW

    l10n 目录生成 intl_zh_CN.arb ， intl_zh_TW.arb 文件

    |-lib |-generated |-intl -messages_all.dart -messages_en.dart -messages_zh_CN.dart -messages_zh_TW.dart -l10n.dart |-l10n -intl_en.arb -intl_zh_CN.arb -intl_zh_TW.arb

    main 文件中

    1. // 引入
    2. import 'package:flutter_localizations/flutter_localizations.dart';
    3. import 'generated/l10n.dart';
    5. // ...
    6. return MaterialApp(
    7.     localizationsDelegates: [
    8.     S.delegate,
    9.     GlobalMaterialLocalizations.delegate,
    10.     GlobalWidgetsLocalizations.delegate,
    11.     GlobalCupertinoLocalizations.delegate,
    12.   ],
    13.   supportedLocales: S.delegate.supportedLocales,
    14.   // ...
    15. );

    修改生成的 arb 文件
    intl_en.arb 文件中配置如下

    1. {
    2.   "general_appbar_title": "General",
    3.   "general_darkmode": "Dark Mode",
    4.   "general_language": "Language",
    5.   "general_textsize": "Text Size",
    6.   "general_background": "Background",
    7.   "general_sticker": "My Stickers",
    8.   "general_sourcenet": "Photos, Videos, Files & Calls",
    9.   "general_speaker": "Turn Off Speaker",
    10.   "general_discover": "Manage Discover",
    11.   "general_tool": "WeChat Tools",
    12.   "general_backup": "Backup & Migrate Chats",
    13.   "general_storage": "Storage",
    14.   "general_clear": "Clear Chat History"
    15. }

    intl_zh_CN.arb 

    1. {
    2.   "general_appbar_title": "通用",
    3.   "general_darkmode": "深色模式",
    4.   "general_language": "多语言",
    5.   "general_textsize": "字体大小",
    6.   "general_background": "聊天背景",
    7.   "general_sticker": "我的表情",
    8.   "general_sourcenet": "照片、视频、文件和通话",
    9.   "general_speaker": "听筒模式",
    10.   "general_discover": "发现页管理",
    11.   "general_tool": "辅助功能",
    12.   "general_backup": "聊天记录备份与迁移",
    13.   "general_storage": "存储空间",
    14.   "general_clear": "清空聊天记录"
    15. }

    intl_zh_TW.arb

    1. {
    2.   "general_appbar_title": "一般",
    3.   "general_darkmode": "深色模式",
    4.   "general_language": "語言",
    5.   "general_textsize": "字型大小",
    6.   "general_background": "聊天背景",
    7.   "general_sticker": "我的貼圖",
    8.   "general_sourcenet": "相片、影片和檔案",
    9.   "general_speaker": "聽筒模式",
    10.   "general_discover": "發現頁管理",
    11.   "general_tool": "協助工具",
    12.   "general_backup": "聊天巨鹿備份與轉移",
    13.   "general_storage": "存儲空間",
    14.   "general_clear": "刪除對話記錄"
    15. }

    lib目录下新建 pages 目录
    新建两个文件 general.dart 和 language.dart

    general.dart

    1. import 'package:flutter/material.dart';
    2. import 'package:locale_demo/generated/l10n.dart';
    4. class _ListTile extends StatelessWidget {
    5.   final Widget title;
    6.   final onTap;
    8.   _ListTile({Key key, this.title, this.onTap}) : super(key: key);
    10.   @override
    11.   Widget build(BuildContext context) {
    12.     return Container(
    13.       color: Colors.white,
    14.       child: ListTile(
    15.         title: title,
    16.         onTap: onTap,
    17.       ),
    18.     );
    19.   }
    20. }
    22. class GeneralPage extends StatelessWidget {
    23.   GeneralPage(BuildContext context);
    25.   @override
    26.   Widget build(BuildContext context) {
    27.     return Scaffold(
    28.       backgroundColor: Color(0xffedeced),
    29.       appBar: AppBar(
    30.         title: Text(S.of(context).general_appbar_title),
    31.       ),
    32.       body: SingleChildScrollView(
    33.         child: Column(
    34.           children: <Widget>[
    35.             _ListTile(
    36.               title: Text(S.of(context).general_darkmode),
    37.             ),
    38.             SizedBox(
    39.               height: 10,
    40.             ),
    41.             _ListTile(
    42.               title: Text(S.of(context).general_language),
    43.               onTap: () {
    44.                 Navigator.pushNamed(context, '/language');
    45.               },
    46.             ),
    47.             SizedBox(
    48.               height: 10,
    49.             ),
    50.             _ListTile(
    51.               title: Text(S.of(context).general_textsize),
    52.               onTap: () {},
    53.             ),
    54.             _ListTile(
    55.               title: Text(S.of(context).general_background),
    56.               onTap: () {},
    57.             ),
    58.             _ListTile(
    59.               title: Text(S.of(context).general_sticker),
    60.               onTap: () {},
    61.             ),
    62.             _ListTile(
    63.               title: Text(S.of(context).general_sourcenet),
    64.               onTap: () {},
    65.             ),
    66.             SizedBox(
    67.               height: 10,
    68.             ),
    69.             _ListTile(
    70.               title: Text(S.of(context).general_speaker),
    71.               onTap: () {},
    72.             ),
    73.             SizedBox(
    74.               height: 10,
    75.             ),
    76.             _ListTile(
    77.               title: Text(S.of(context).general_discover),
    78.               onTap: () {},
    79.             ),
    80.             _ListTile(
    81.               title: Text(S.of(context).general_tool),
    82.               onTap: () {},
    83.             ),
    84.             SizedBox(
    85.               height: 10,
    86.             ),
    87.             _ListTile(
    88.               title: Text(S.of(context).general_backup),
    89.               onTap: () {},
    90.             ),
    91.             _ListTile(
    92.               title: Text(S.of(context).general_storage),
    93.               onTap: () {},
    94.             ),
    95.             SizedBox(
    96.               height: 10,
    97.             ),
    98.             _ListTile(
    99.               title: Text(S.of(context).general_clear),
    100.               onTap: () {},
    101.             ),
    102.             SizedBox(
    103.               height: 40,
    104.             ),
    105.           ],
    106.         ),
    107.       ),
    108.     );
    109.   }
    110. }

    language.dart

    1. import 'package:flutter/material.dart';
    2. import 'package:locale_demo/generated/l10n.dart';
    4. class LanguageRadio extends StatefulWidget {
    5.   @override
    6.   _LanguageRadioState createState() => _LanguageRadioState();
    7. }
    9. class _LanguageRadioState extends State<LanguageRadio> {
    10.   static const localeList = ['en', 'zh_CN', 'zh_TW'];
    11.   int _localeIndex = 0;
    12.   static String getLocaleName(index) {
    13.     return ['English', '简体中文', '繁體中文'][index];
    14.   }
    16.   @override
    17.   Widget build(BuildContext context) {
    18.     return Container(
    19.       child: Column(
    20.         children: <Widget>[
    21.           ListView.builder(
    22.             itemCount: localeList.length,
    23.             shrinkWrap: true,
    24.             itemBuilder: (context, index) {
    25.               return RadioListTile(
    26.                 value: index,
    27.                 groupValue: _localeIndex,
    28.                 title: Text(getLocaleName(index)),
    29.                 onChanged: (index) {
    30.                   print(index);
    31.                   setState(() {
    32.                     _localeIndex = index;
    33.                   });
    34.                   var value = localeList[index].split('_');
    35.                   S.load(Locale(value[0], value.length == 2 ? value[1] : ''));
    36.                 },
    37.               );
    38.             },
    39.           ),
    40.           SizedBox(
    41.             height: 20,
    42.           ),
    43.           Text(S.of(context).general_language),
    44.         ],
    45.       ),
    46.     );
    47.   }
    48. }
    50. class LanguagePage extends StatelessWidget {
    51.   LanguagePage(BuildContext context);
    53.   @override
    54.   Widget build(BuildContext context) {
    55.     return Scaffold(
    56.       appBar: AppBar(
    57.         title: Text(S.of(context).general_language),
    58.       ),
    59.       body: LanguageRadio(),
    60.     );
    61.   }
    62. }

    至此，当我们点击了其他语言后，选项下的文字已经实时修改了，点击VSCode的 Restart ，会发现项目全局语言切换了，但是这种方式只能实时修改当前作用域下的Text，而无法实时修改全局的。

    接下来我们将使用 Provider 来管理国际化状态，做到实时修改

    在 pubspec.yaml 的依赖中添加如下

    1. dependencies:
    2.     # ...
    3.     provider: ^4.3.3

    provider

    ChangeNotifier
    ChangeNotifierProvider
    Provider

    在 lib 目录下，新建一个 model 目录
    在 model 目录下新建一个 locale.dart 文件，将 language.dart 中使用的变量放进 model 中，以共享全局

    1. import 'package:flutter/material.dart';
    3. class LocaleModel extends ChangeNotifier {
    4.   int _localeIndex;
    6.   int get localeIndex => _localeIndex;
    8.   LocaleModel() {
    9.     _localeIndex = 0;
    10.   }
    12.   static const localeList = ['en', 'zh_CN', 'zh_TW'];
    14.   static String getLocaleName(index) {
    15.     return ['English', '简体中文', '繁體中文'][index];
    16.   }
    18.   Locale get locale {
    19.     var value = localeList[_localeIndex].split('_');
    20.     return Locale(value[0], value.length == 2 ? value[1] : '');
    21.   }
    23.   void switchLocale(index) {
    24.     _localeIndex = index;
    25.     notifyListeners();
    26.   }
    27. }

    main.dart 

    1. class App extends StatelessWidget {
    2.     @override
    3.   Widget build(BuildContext context) {
    4.       return ChangeNotifierProvider(
    5.         create: (_) => LocaleModel(),
    6.       child: Consumer<LocaleModel>(
    7.         builder: (context, localeModel, child) {
    8.             return MaterialApp(
    9.               localizationsDelegates: [
    10.               S.delegate,
    11.               GlobalMaterialLocalizations.delegate,
    12.               GlobalWidgetsLocalizations.delegate,
    13.               GlobalCupertinoLocalizations.delegate,
    14.             ],
    15.             supportedLocales: S.delegate.supportedLocales,
    16.             locale: localeModel.locale,
    17.             // ...
    18.           );
    19.         }
    20.       ),
    21.     );
    22.   }
    23. }

    language.dart
    不再需要 StateFulWidget ，直接通过 LocaleModel 获取

    1. class LanguageRadio extends StatelessWidget {
    2.     @override
    3.   Widget build(BuildContext context) {
    4.       return Container(
    5.         child: Column(
    6.           children: <Widget>[
    7.             ListView.builder(
    8.               shrinkWrap: true,
    9.             itemCount: LocaleModel.localeList.length,
    10.             itemBuilder: (context, index) {
    11.                 var model = Provider.of<LocaleModel>(context);
    12.               return RadioListTile(
    13.                   value: index,
    14.                 groupValue: model.localeIndex,
    15.                 title: Text(S.of(context).getLocaleName(index)),
    16.                 onChanged: (index) {
    17.                     model.switchLocale(index);
    18.                 },
    19.               );
    20.             },
    21.           ),
    22.         ],
    23.       );
    24.     );
    25.   }
    26. }