flutter 國際化（語言地區本地化）使用flutter_i18n 使用intl包 Localizations widget

Flutter國際化的一些用法,包括Localization widget,intl包和flutter_i18n包的用法

在默認情況下,Flutter只支持英文,要添加多國語言支持,需要在pubspec.yaml文件中添加依賴 

1.使用flutter_i18n(插件安裝參考：https://www.cnblogs.com/gaozhang12345/p/12082436.html)

主要是利用json文件來進行翻譯,個人認為最簡單的一種,可以自己定app語言,方便刷新切換語言,不依賴系統語言

在pubspec.yaml文件中添加依賴

dependencies:
  flutter:
    sdk: flutter
  flutter_i18n: ^0.8.2
flutter:
  assets:
  - flutter_i18n/  

如圖：

 

 

新建json文件（assrts下新建的文件夾i18n,在新建文件命名為”en,json“,新建命名為”zh.json“,手動建不會自動生成的）

 

 

命名規則可以這樣{languageCode}_{countryCode}.json(語言類型_國家.json)或者{languageCode}.json(語言.json),這里我命名為zh.json,內容如下：

{
  "title": "測試應用",
  "label": {
    "main": "哈羅！老子"
  },
  "button": {
    "clickMe": "點擊這里"
  },
  "toastMessage": "您點擊了按鈕!",
  "clicked": {
    "times-0": "您點擊ll了{times}次!",
    "times-1": "您點擊kk了{time}次!",
    "times-2": "您點擊hh了{times}次!"
  }
}

en.json內容如下：

{
  "title": "Test app",
  "label": {
    "main": "Hello {user}!"
  },
  "button": {
    "clickMe": "Click here"
  },
  "toastMessage": "You clicked on button!",
  "clicked": {
    "times-0": "You clicked ll{times} times!",
    "times-1": "You clicked kk{time} time!",
    "times-2": "You clicked hh{times} times!"
  }
}

mart.dart內容如下：

import 'package:flutter/material.dart';
import 'package:flutter_i18n/flutter_i18n.dart';
import 'package:flutter_i18n/flutter_i18n_delegate.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
      localizationsDelegates: [
        FlutterI18nDelegate(
            useCountryCode: false, fallbackFile: 'en', path: 'assets/i18n'),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomeState createState() => new MyHomeState();
}

class MyHomeState extends State<MyHomePage> {
  Locale currentLang;
  int clicked = 0;

  @override
  void initState() {
    super.initState();
    new Future.delayed(Duration.zero, () async {
      await FlutterI18n.refresh(context, new Locale('es'));
      setState(() {
        currentLang = FlutterI18n.currentLocale(context);
      });
    });
  }

  changeLanguage() {
    setState(() {
      currentLang = currentLang.languageCode == 'en'
          ? new Locale('en')
          : new Locale('zh');
    });
  }

  incrementCounter() {
    setState(() {
      clicked++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar:
      new AppBar(title: new Text(FlutterI18n.translate(context, "title"))),
      body: new Builder(builder: (BuildContext context) {
        return new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text(FlutterI18n.translate(context, "label.main",
                  Map.fromIterables(["user"], ["Flutter lover"]))),
              new Text(FlutterI18n.plural(context, "clicked.times", clicked)),
              new FlatButton(
                  onPressed: () async {
                    incrementCounter();
                  },
                  child: new Text(
                      FlutterI18n.translate(context, "button.clickMe"))),
              new FlatButton(
                  onPressed: () async {
                    changeLanguage();
                    await FlutterI18n.refresh(context, currentLang);
                    Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text(
                          FlutterI18n.translate(context, "toastMessage")),
                    ));
                  },
                  child: new Text(
                      FlutterI18n.translate(context, "button.clickMe")))
            ],
          ),
        );
      }),
    );
  }
}

運行點擊下面的"Premi qui",就可以觀察到文字馬上做了本地化翻譯（這里方便觀察），使用的時候直接用點擊后的效果，查看就系統切換語言即可。

2.使用intl包