引言
国际化(Localization)对于app来说是一个非常常见的需求。得益于flutter的StatefulWidge
,实时切换app的语言环境是非常简单的。
flutter的Localization包含两个部分,预设控件的Localization配置以及自定义文本的Localization配置。
系统控件的多语言配置
flutter自带很多预设的控件,这些控件使用到的文本是可以根据app设定的语言环境来展示相应的语言文本的。默认的情况下,这些控件使用的是英文文案,即使你的手机系统是中文环境,flutter的控件仍然展示的是英文文案。
举个例子,我们使用flutter的DatePicker来演示一下:
import 'package:flutter/material.dart';
import 'widget/DemoWidget.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// ignore: non_constant_identifier_names
title: "test",
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: DemoWidget(),
);
}
}
main.dart
import 'package:flutter/material.dart';
class DemoWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: new Text('Demo页面'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(Localizations.localeOf(context).toString()),
MaterialButton(
child: Text('选择时间'),
color: Colors.grey,
onPressed: () {
showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2018),
lastDate: DateTime(2030));
},
),
],
),
),
);
}
}
demoWidget.dart
我们先确认一下系统的语言设置确实是中文的:
然后我们看一下运行结果:
可以看见,即使系统的语言是中文的,由于没有在flutter app中配置多语言支持,预设控件使用的语言仍然默认为英文。
要使预设控件使用的语言与系统的语言保持一致,我们需要进行如下配置:
yaml文件的配置
首先我们需要在pubspec.yaml
文件中的dependencies
下,增加flutter_localizations
的配置,修改之后在terminal执行一下flutter packages get
,或者在android studio的yaml文件右上角直接点击Packages get按钮。
denpendencies:
flutter:
sdk: flutter
# 以下是新增部分
flutter_loclizations:
sdk: flutter
app增加多语言配置
在main.dart中增加import项
import 'package:flutter_localizations/flutter_localizations.dart';
并且为MaterialApp的构造函数增加localizationsDelegates
和supportedLocales
参数的赋值。
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'widget/demoWidget.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// ignore: non_constant_identifier_names
title: "test",
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: DemoWidget(),
/*=====以下为新增部分========*/
localizationsDelegates: [
GlobalMaterialLocalizations