Flutter 手把手国际化

手把手国际化"/>

Flutter 手把手国际化

1.导入依赖

  flutter:sdk: flutterflutter_localizations:sdk: flutterintl: any

2.安装插件Flutter Intl

Android Studio > File > Settings > Plugins 搜索Flutter Intl
并安装和重启Android Studio生效

3.通过插件初始化并配置语言

Android Studio > Tools > Flutter Intl > lnitialize for the Project

初始化后插件会自动创建
l10n.dart 语言管理类
messages_all.dart 语言管理类
messages_en.dart 英文
intl_en.arb 英文数据
路径为：
lib/generated/l10n.dart
lib/generated/intl/messages_all.dart
lib/generated/intl/messages_en.dart
lib/l10n/intl_en.arb

由此可知 插件只生成了英文版，所以我们需要手动加入中文配置

3.1配置中文

Android Studio > Tools > Flutter Intl > Add Locale 并输入zh


之后插件会生成对应的中文配置文件：
lib/generated/intl/messages_zh.dart
lib/l10n/intl_zh.arb

目前语言相关的文件已生成完，如下图：

文件生成完了，接下来就是把中英文插入相应的位置了，
intl_zh.arb 和 intl_en.arb 分别代表中文和英文的语言数据，所以只需要修改它俩即可，其他文件会根据数据自动配置

3.2 加入语言数据

intl_zh.arb 和 intl_en.arb 是以json结构配置的，所以我们配置如下

lib/l10n/intl_zh.arb

{"str_download": "应用下载","str_lang": "语言","str_update": "检测更新","str_about": "关于我们"
}

lib/l10n/intl_en.arb

{"str_download": "Application Download","str_lang": "Language","str_update": "Detect updates","str_about": "About us"
}

语言配置好了，接下来就是怎么引用它们了。

4.使用国际化语言

4.1 页面引用语言字段

  _updateLang() async {AppLocalizationDelegate delegate = const AppLocalizationDelegate();//获取当前系统语言Locale myLocale = Localizations.localeOf(context);//根据当前语言获取对应的语言数据lang = await delegate.load(myLocale);//获取字段var update = lang.str_update;var about = lang.str_about;}

页面里面使用完整代码如下：

class MyPage extends StatefulWidget {const MyPage({super.key});@overrideState<StatefulWidget> createState() => _MyPageState();
}class _MyPageState extends State<MyPage> {@overridevoid initState() {super.initState();}late S lang;_updateLang() async {AppLocalizationDelegate delegate = const AppLocalizationDelegate();//获取当前系统语言Locale myLocale = Localizations.localeOf(context);//根据当前语言获取对应的语言数据lang = await delegate.load(myLocale);}@overrideWidget build(BuildContext context) {_updateLang();return Scaffold(appBar: AppBar(backgroundColor: Colors.transparent,elevation: 0,title: Text("我的",style: TextStyle(fontSize: 30,color: AppColors.gray33,fontWeight: FontWeight.bold)),),body: Container(child: Column(children: [Text(lang.str_download,),Text(lang.str_lang,),Text(lang.str_update,),Text(lang.str_about,),],),),);}
}

这样页面里面的组件就引用到了语言管理类中的字段，但是还差一步初始化

4.2 main.dart中初始化语言配置

初始化插件生成的语言配置

      localizationsDelegates: const [AppLocalizationDelegate(),GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,GlobalCupertinoLocalizations.delegate,],supportedLocales: const AppLocalizationDelegate().supportedLocales,locale: locale,

完整代码如下

void main() {
//默认为中文var locale = Locale.fromSubtags(languageCode: 'zh');runApp(MyApp(locale));
}class MyApp extends StatelessWidget {final Locale locale;const MyApp(this.locale, {super.key});// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue, primaryColor: Colors.white),home: const MyHomePage(title: 'Flutter Demo Home Page'),routes: {MyRouter.DOWNLOAD_PAGE: (context) => DownLoadPage(),MyRouter.LANG_PAGE: (context) => LangPage(),},
//初始化语言配置localizationsDelegates: const [AppLocalizationDelegate(),GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,GlobalCupertinoLocalizations.delegate,],supportedLocales: const AppLocalizationDelegate().supportedLocales,locale: locale,);}
}

这样语言就都配置好了，切换语言只需要调用
runApp(MyApp(locale))
传入对应语言参数即可。

5.切换语言

切换中文：

  var locale = Locale.fromSubtags(languageCode: 'zh');runApp(MyApp(locale));

切换英文：

var locale = Locale.fromSubtags(languageCode: 'en');runApp(MyApp(locale));

完整页面代码如下：

class LangPage extends StatelessWidget {const LangPage({super.key});//切换语言changeLang(Locale locale) {runApp(MyApp(locale));}@overrideWidget build(BuildContext context) {return Scaffold(appBar: BaseAppBar("语言"),body: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [InkWell(onTap: () {var locale = Locale.fromSubtags(languageCode: BaseData.ZH);changeLang(locale);SPUtils.setLangCode(BaseData.ZH);Navigator.pop(context);},child: Container(padding: EdgeInsets.only(left: 16),height: 60,child: Align(alignment: Alignment.centerLeft,child: Text("简体中文",style: TextStyle(fontSize: 16, color: AppColors.gray33),),),),),Container(margin: EdgeInsets.only(left: 16),height: 0.5,color: AppColors.line,),InkWell(onTap: () {var locale = Locale.fromSubtags(languageCode: BaseData.EN);changeLang(locale);SPUtils.setLangCode(BaseData.EN);Navigator.pop(context);},child: Container(padding: EdgeInsets.only(left: 16),height: 60,child: Align(alignment: Alignment.centerLeft,child: Text("English",style: TextStyle(fontSize: 16, color: AppColors.gray33),),),),),Container(margin: EdgeInsets.only(left: 16),height: 0.5,color: AppColors.line,),],));}
}

class BaseData{static const String ZH = 'zh';static const String EN = 'en';
}

这样就实现了在 语言设置 页面进行语言切换了，但是重启app后语言又还原成中文了，所以采用shared_preferences库保存上一次语言

6.重启APP 恢复最近设置的语言

class SPUtils {static const String _LANG_KEY = "lang_key";static setLangCode(String langCode) async {var sp = await SharedPreferences.getInstance();sp.setString(_LANG_KEY, langCode);}static Future<String> getLangCode() async {var sp = await SharedPreferences.getInstance();return sp.getString(_LANG_KEY) ?? BaseData.ZH;}
}

在设置页面设置完成后保存语言类型

    SPUtils.setLangCode(BaseData.ZH);

在App重启的时候获取数据并且设置，所以修改后的main.dart如下：

void main() async {// makes sure plugins are initialized 确保Flutter应用程序的绑定已经初始化完成WidgetsFlutterBinding.ensureInitialized();//执行异步获取var langCode = await SPUtils.getLangCode();var locale = Locale.fromSubtags(languageCode: langCode);runApp(MyApp(locale));
}class MyApp extends StatelessWidget {final Locale locale;const MyApp(this.locale, {super.key});// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue, primaryColor: Colors.white),home: const MyHomePage(title: 'Flutter Demo Home Page'),routes: {MyRouter.DOWNLOAD_PAGE: (context) => DownLoadPage(),MyRouter.LANG_PAGE: (context) => LangPage(),},localizationsDelegates: const [AppLocalizationDelegate(),GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,GlobalCupertinoLocalizations.delegate,],supportedLocales: const AppLocalizationDelegate().supportedLocales,locale: locale,);}
}

这里需要注意的是shared_preferences是异步获取的，所以要加上WidgetsFlutterBinding.ensureInitialized();

至此，语言切换完成。
最后附个版本：

sdks:dart: ">=3.1.0-185.0.dev <4.0.0"flutter: ">=3.7.0"