Flutter 主題修改及語言國際化示例

主題

上個月微信iOS版本推出了暗色主題，那麼Flutter 中的 Theme主題如何修改呢？

在Flutter 中是通過ThemeData 來統一管理主題的配置信息。

ThemeData的構造函數中字段真是太多了，挑選常見的字段來了解，順便實現切換主題顏色的功能。

// Android 亮色主題
final ThemeData kAndroidTheme = ThemeData(
    brightness: Brightness.light,//亮色主題
    accentColor: Color(0xFF888888),//(按鈕)Widget前景色爲灰色
    primaryColor: Color(ThemeColor),//主題色默認爲紅色
    backgroundColor: Color(0xFFEFEFEF), // 背景色爲灰色
    iconTheme:IconThemeData(color: Color(ThemeColor), size: 35.0),//icon主題色爲紅色色
    textTheme: TextTheme(body1: TextStyle(color: Color(0xFF888888), fontSize: 16.0))//文本主題色爲灰色
);

示例

之前的文章中介紹了EventBus庫，通過該庫可以實現數據的傳遞，那麼改變主題我們也可以通過EventBus的方式來實現。

示例中默認的主題顏色是淺藍色：0xFF87CEEB ,修改主題顏色之後變爲紅色：0xFFC91B3A

要實現以上的效果，首先將EventBus設置爲全局，然後在main.dart文件下動態修改theme中的顏色值即可。
可參考下圖實現。

完整實現代碼請查看：Flutter-WanAndroid

國際化

App根據系統語言支持顯示不同語言，這裏使用Flutter i18n插件輔助實現

Flutter i18n 插件依賴 flutter_localizations 插件包，在 pubspec.yaml文件裏添加依賴：

dependencies:
  flutter_localizations:
    sdk: flutter

點擊Packages get之後會在res/value下生成strings_en 文件，該文件是系統默認的英文資源配置。
爲了支持中文，我們還需要在 values目錄下再增加一個 strings_zh.arb 文件：

strings_en 文件內容如下，每次需要新增字符串則在該文件下添加鍵值對：

{
  "app_title": "app_title",
  "main_title": "My Main Title"
}

strings_zh.arb 文件內容如下，每次需要新增字符串則在該文件下添加鍵值對：

{
  "app_title": "App標題",
  "main_title": "主標題"
}

接着在main.dart中添加回調使用：

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
     return new MaterialApp(
   		...
      localizationsDelegates: [
        S.delegate,//應用程序的翻譯回調
        // 本地化的代理類
        GlobalMaterialLocalizations.delegate,//Material組件的翻譯回調
        GlobalWidgetsLocalizations.delegate,//普通Widget的翻譯回調
      ],
      supportedLocales: S.delegate.supportedLocales,//支持語系
      // title的國際化回調
      onGenerateTitle: (context){ return S.of(context).app_title; },
     ...
  }
}

完整實現代碼請查看：Flutter-WanAndroid

後續的字符串都通過strings_en 和 strings_zh.arb 文件來配置，
通過 S.of(context) 方法就可以拿到 arb 聲明的翻譯文案了，如下：

 @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          title: Text("國際化"),
        ),
        body: Center(
          // 系統語言是中文則顯示中文，系統語言是英文則顯示英文
          child: Text(S.of(context).main_title),)
        )
    );
  }

wan~