本次先实现中英文的国际化,切换语言后续再出相关文章;本人用的是vscode开发,所以只讲vscode中如何实现;
第一步 vscode安装Flutter Intl插件
第二步 配置pubspec.yaml
flutter_localizations:
sdk: flutter
flutter_intl:
enabled: true
第三步 lib目录下会生成generated目录和I10n目录(你不用管,应该是pub get后自动创建)
第四步 I10n目录下添加对应intl_en.arb和intl_zh.arb文件,添加对应的json
第五步 main.dart文件做如下修改
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
// flutter_intl为我定义的项目名,可以根据实际情况更换
import 'package:flutter_intl/generated/l10n.dart';
void main() {
runApp(MyApp());
}
ValueChanged<Locale> localeChange;
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// new 设置当前的语言
Locale _locale = const Locale('en', '');
@override
void initState() {
super.initState();
localeChange = (locale) {
setState(() {
_locale = locale;
});
};
}
// new
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'project',
theme: ThemeData.dark(),
debugShowCheckedModeBanner: false,
localizationsDelegates: const [
S.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate
],
supportedLocales: S.delegate.supportedLocales,
home: Builder(
builder: (BuildContext context) {
return Localizations.override(
context: context,
locale: _locale,
child: Scaffold(
appBar: AppBar(
title: Text(S.of(context).app_name), // 在要使用的字段的位置使用配置的文案
centerTitle: true,
),
body: Center(
child: Text(S.of(context).app_name),
),
),
);
},
),
);
}
}
第六步 检验结果
修改mian.dart中的如下部分 然后重启项目