Wing CHAN

目標:

  1. 只使用 官方的flutter_localizations,不使用其他Library 減少升級時不支援的風險
  2. 每個語言用一個arbjson, 存放翻譯的文本

網上很多教學都是教long1eu/flutter_i18n
這是一個Android Studio的插件, 幫助用戶自動生成相應的配置檔案,但作者已停止更新了。

Flutter-国际化适配终结者
讓 Flutter App 支援多國語系的開發流程

研究時找到另一個相似的插件,記錄一下

FunFlutter系列之国际化Intl方案

首先在Android Stuido 安裝Flutter intl插件

pubspec.yaml加入官方的flutter_localizations依賴

dependencies:
// Other dependencies...
flutter_localizations:
sdk: flutter
flutter pub get

點擊Initialize for the Project

Initialize 生成配置的文件, 預設是en, 當我們修改l10n目錄下的語言檔案時會自動觸發flutter pub global run intl_utils:generate 生成generated目錄下的檔案。

增加語言, 我加入了繁體中文zh_Hant

Locale code 參考: https://api.flutter.dev/flutter/flutter_localizations/flutter_localizations-library.html

https://i.imgur.com/jdrihfO.png

main.dart 加入

import 'package:flutter_localizations/flutter_localizations.dart';
import 'generated/l10n.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
localizationsDelegates: [
S.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
], //add
supportedLocales: S.delegate.supportedLocales, // add
title: 'Flutter Demo',
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

intl_en.arb, intl_zh_Hant.arb 分別加入 apple 的文本

intl_en.arb

{
"apple": "apple"
}

intl_zh_Hant.arb

{
"apple": "蘋果"
}

儲存後自動觸發flutter pub global run intl_utils:generate

會根據arb檔案自動生成相對應的配置

iOS 需要加入語言

--

--

效果圖

需求(有點奇怪)

  1. 第一格widget 拉到頂部時,header 向上消失
  2. 向下拉時顯示header

曾經嘗試使用SliverAppBar, 但好像不能完全滿足以上兩個需求

參考: https://blog.csdn.net/yechaoa/article/details/90701321

所以最後嘗試使用ScrollController+SingleChildScrollView+Stack+AnimatedPositioned

Stack裡總共有兩層

  1. 扮演Appbar的Container
  2. 空白SizedBox + 一個Placeholder的List
  • 用AnimatedPositioned包住Container, 改變位置時自動有收起的動畫
  • 空白SizedBox時用來抵消Container的高度,讓Placeholder不會被Container擋住

ScrollController會監聽 SingleChildScrollView srcoll的高度,如果超過100 代表第一格widget( Placeholder) 已拉到頂部, 根據需求一 令到Header消失. 根據需求二, 當srcoll的方向是向下拉時顯示Header.

代碼如下:

--

--