Flutter集成国际化语言的功能

原创
2020/11/26 11:05
阅读数 2W

前言:

         Flutter 项目需要支持国际化,能够实时切换 App 内不同的语言,满足不同用户的需求。Flutter 默认支持英文的文本和组件,如果需要添加本地的支持,需要引入插件 Flutter Intl,初始化 intl 和添加我们想添加的每一种语言。 接下来我简单总结一下在 Flutter 集成国际化语言的功能,有需要的话可以参考。

实现的步骤:

1. 在 Plugins 引入插件 Flutter Intl

    

2. 在 pubspec.yaml 文件中添加依赖 flutter_localizations

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

  cupertino_icons: ^1.0.0
  provider: ^4.3.1 #用于实时切换语言的状态管理

3. 初始化 intl 和添加语言

3.1 初始化 intl (Tools->Flutter Intl-> Initialize for the Project)

在 pubspec.yaml 中自动增加字段:

flutter_intl:
  enabled: true

在 lib 目录下增加 generated 和 l10n 一个包( intl_en.arb,添加英文语言) 

{
  "home": "Home",
  "settingLanguage": "Set Language",
  "settingLanguageEnglish": "English",
  "settingLanguageChinese": "Chinese"
}

3.2 添加语言( intl_zh.arb,添加中文语言)

{
  "home": "首页",
  "settingLanguage": "设置语言",
  "settingLanguageEnglish": "英文",
  "settingLanguageChinese": "中文"
}

4. 设置 MaterialApp 语言环境

MaterialApp(      
          localizationsDelegates: [
            GlobalMaterialLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            S.delegate
          ],          
          supportedLocales: [
            const Locale('zh', 'CN'),
            const Locale('en', 'US'),
          ],
          
        )

5. 在 App 内实现语言切换

5.1 封装 CurrentLocale 方法

import 'package:flutter/material.dart';

class CurrentLocale with ChangeNotifier {
  Locale _locale = const Locale('zh','CN');

  Locale get value => _locale;
  void setLocale(locale)
  {
    _locale = locale;
    notifyListeners();
  }
}

5.2 设置实时切换语言的状态管理

runApp(MultiProvider(
    providers: [ChangeNotifierProvider(create: (context) => CurrentLocale())],
    child: MyApp(),
  ));

5.3 在 MaterialApp 添加状态管理

Consumer<CurrentLocale>(
      builder: (context, currentLocale, child) {
        return MaterialApp(     
          localizationsDelegates: [
            GlobalMaterialLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            S.delegate
          ],
          locale: currentLocale.value,//设置首要支持的语言
          supportedLocales: [
            const Locale('zh', 'CN'),
            const Locale('en', 'US'),
          ],
          ...
        );
      },
    )

5.4 弹出语言切换的对话框

SimpleDialog(
           title: Text(S.of(context).settingLanguage), 
           children: <Widget>[
              SimpleDialogOption(
                onPressed: () {
                Navigator.pop(context, 1);
               },
             child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 6),
                child: Text(S.of(context).settingLanguageChinese),
              ),
            ),
            SimpleDialogOption(
                 onPressed: () {
                  Navigator.pop(context, 2);
                 },
              child: Padding(
                   padding: const EdgeInsets.symmetric(vertical: 6),
                   child: Text(S.of(context).settingLanguageEnglish),
              ),
            ),
         ],
)

5.5 语言切换的方法

if (i != null) {
       if (i == 1) {
            Provider.of<CurrentLocale>(context, listen: false)
                 .setLocale(const Locale('zh', "CH"));
      } else {
            Provider.of<CurrentLocale>(context, listen: false)
                 .setLocale(const Locale('en', "US"));
      }
 }

总结:Flutter 集成国际化语言的功能已经实现,欢迎大家围观。源码地址: https://github.com/wupeilinloveu/flutter_language ,如果有什么疑问的话,欢迎留言。整理不易,转载请注明出处,谢谢!

展开阅读全文
加载中
点击加入讨论🔥(1) 发布并加入讨论🔥
打赏
1 评论
3 收藏
3
分享
返回顶部
顶部