Flutter 国际化

Flutter 官方鼓励我们在写 Flutter 应用的时候直接从 MaterialApp 开始，原因是 MaterialApp 为我们集成好了很多 Material Design 所必须的控件。

在大多默认的情况下，Material 的组件是英文说明的，因此对应中国的应用来说，要做国际化处理。

Flutter 提供了国际化的处理包，要使用它先要引入。

dependencies:
  flutter_localizations:
    sdk: flutter

之后在 MaterialApp 里添加。

import 'package:flutter_localizations/flutter_localizations.dart';

new MaterialApp(
    title: 'Flutter Demo',
    theme: new ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: new HomePage(title: ''),
    localizationsDelegates: [                       // <-- 添加
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
    ],
    supportedLocales: [                             // <-- 添加语言包
        const Locale('zh', 'CH'),
    ],
)

Dialog 中的文字是变成中文了。

自己配置语言包

上面是 flutter 配置的语言包，如果你的应用有英文和中文两个版本，那么需要自己配置语言包。

首先，定义一个 DemoLocalizations 类，这个类就是用于创建语言包的。

class DemoLocalizations {
    final Locale locale;
    DemoLocalizations(this.locale);

    static Map<String, Map<String, String>> _localizedValues = {
        'en': {
            'task title': 'Flutter Demo',
            'titlebar title': 'Flutter Demo Home Page',
            'click tip': 'You have pushed the button this many times:',
            'inc':'Increment',
        },
        'zh': {
            'task title': 'Flutter 示例',
            'titlebar title': 'Flutter 示例主页面',
            'click tip': '你一共点击了这么多次按钮：',
            'inc':'增加',
        }
    };

    get taskTitle {
        return _localizedValues[locale.languageCode]['task title'];
    }
    get titleBarTitle {
        return _localizedValues[locale.languageCode]['titlebar title'];
    }
    get clickTop {
        return _localizedValues[locale.languageCode]['click tip'];
    }
    get inc {
        return _localizedValues[locale.languageCode]['inc'];
    }
    static DemoLocalizations of(BuildContext context) {
        return Localizations.of(context, DemoLocalizations);
    }
}

定义完 DemoLocalizations 以后，LocalizationsDelegate 里初始化它。LocalizationsDelegate 是一个抽象类，需要去继承它并实现。

class DemoLocalizationsDelegate extends LocalizationsDelegate<DemoLocalizations>{
    const DemoLocalizationsDelegate();

    @override
    bool isSupported(Locale locale) {
        return ['en','zh'].contains(locale.languageCode);
    }

    @override
    Future<DemoLocalizations> load(Locale locale) {
        return new SynchronousFuture<DemoLocalizations>(new DemoLocalizations(locale));
    }

    @override
    bool shouldReload(LocalizationsDelegate<DemoLocalizations> old) {
        return false;
    }

    static DemoLocalizationsDelegate delegate = const DemoLocalizationsDelegate();
}

完成后，把 delegate 添加到 MaterialApp localizationsDelegates 里。

new MaterialApp(
    title: 'Flutter Demo',
    theme: new ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: new HomePage(title: ''),
    localizationsDelegates: [                       // <-- 添加代理
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        DemoLocalizationsDelegate.delegate,
    ],
    supportedLocales: [                             // <-- 添加语言包
        const Locale('zh', 'CH'),
    ],
)

接着使用它：

home: new MyHomePage(title: DemoLocalizations.of(context).titleBarTitle),

是不是很复杂？是的比较复杂，这是官方推荐的做法。其实我们还可以定义一个全局的存储空间，存储这些变量在合适的时间段里使用。