Flutter的国际化方式

引言

国际化（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