Flutter越来越强了,但是很多基础的东西自己还不会,所以决定把这些部分都写在文章里面,帮助萌新早日脱离苦境!!加油!
实现国际的办法千万种,但是有两个办法是真想,而且实现得很方便:1,通过Flutter Intl插件实现,2、通过GetX插件实现
1、通过Flutter Intl插件实现:
在Plugins里面找到Flutter Intl这个插件,然后安装-重启
截屏2021-12-02 下午3.54.18.png
安装完成之后,按照下图的方法操作:
截屏2021-12-02 下午3.55.14.png
然后在你的pubspec.yaml看到
flutter_intl:
enabled: true
还有下面这些
截屏2021-12-02 下午3.57.29.png
那配置就成功了!!
如果想增加其他语言的话,就可以通过下面的操作实现:
截屏2021-12-02 下午3.58.16.png
举例子:
如果想增加中文,直接在对话框里面输入zh,插件就会自动生成对应的文件:
截屏2021-12-02 下午4.06.27.png
然后在intl_en.arb和 intl_zh.arb文件中写入对应的翻译:
在app内的使用如下:
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
localizationsDelegates: const [
S.delegate,
//GlobalMaterialLocalizations.delegate 为Material Components库提供了本地化的字符串和其他值
GlobalMaterialLocalizations.delegate,
//GlobalWidgetsLocalizations.delegate定义widget默认的文本方向,从左到右或从右到左。
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate
],
supportedLocales:
S.delegate.supportedLocales,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
如果需要更新请使用 S.load(const Locale('zh','CN'));
但是这样刷新的话,就需要刷新才会生效,全局刷新的话,也很麻烦,所以推荐下面GetX框架实现
2、通过GetX插件实现
通过GetX插件实现会更方便点:
先引入框架
#使用getX框架
get: 4.1.4
然后在mian.drat里面引用import 'package:get/get.dart';
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
//设置过渡动画
defaultTransition: Transition.fade,
//设置默认语言
locale: Locale('zh', 'CN'),
// 在配置错误的情况下,使用的语言
fallbackLocale: Locale('en', 'EN'),
//这个是翻译的关键,根据translationsKeys来进行自定义的内容进行翻译
translationsKeys: AppTranslation.translation,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomePage(),
);
}
translationsKeys的设置:
abstract class AppTranslation{
static Map<String,Map<String,String>> translation={
'en_EN':Locales.en_EN,
'zh_CN':Locales.zh_CN,
'fr_CA': Locales.zh_CN,
};
}
abstract class LocaleKeys{
static const change_zh='change_zh_CN';
static const change_en='change_en_EN';
static const home='home';
static const searchFor='search_For';
static const travel_shot='Travel_shot';
static const mySelf='myself';
}
abstract class Locales{
static const en_EN={
LocaleKeys.change_zh:'change Chinese',
LocaleKeys.change_en:'change English',
LocaleKeys.home:'Home',
LocaleKeys.searchFor:'Search for',
LocaleKeys.travel_shot:'Travel shot',
LocaleKeys.mySelf:'myself',
};
static const zh_CN={
LocaleKeys.change_zh:'切换中文',
LocaleKeys.change_en:'切换英文',
LocaleKeys.home:'首页',
LocaleKeys.searchFor:'搜索',
LocaleKeys.travel_shot:'旅拍',
LocaleKeys.mySelf:'我的',
};
static const fr_CA={};
}
然后语言的切换方法:
var locale = Locale('en', 'EN');
Get.updateLocale(locale);
这样对应全局引用到Locales类里面的参数就会进行翻译了!!是不是更方便??
好了,国际化先到这里,下面继续更新别的新文章了,爱你们呦!!