Localize time picker (#11967)

* Internationalize the time picker

- header layout and formatting
- 12-hour vs 24-hour dial
- RTL

* make TimeOfDayFormat an enum

* address comments

dev/tools/gen_localizations.dart

@@ -76,7 +76,7 @@ String generateLocalizationsMap() {
 const Map<String, Map<String, String>> localizations = const <String, Map<String, String>> {''');
 
   final String lastLocale = localeToResources.keys.last;
-  for (String locale in localeToResources.keys) {
+  for (String locale in localeToResources.keys.toList()..sort()) {
     output.writeln('  "$locale": const <String, String>{');
 
     final Map<String, String> resources = localeToResources[locale];
@@ -126,7 +126,7 @@ void main(List<String> args) {
     }
   }
 
-  final String regenerate = 'dart gen_localizations ${directory.path} ${args[1]}';
+  final String regenerate = 'dart dev/tools/gen_localizations.dart ${directory.path} ${args[1]}';
   print(outputHeader.replaceFirst('@(regenerate)', regenerate));
   print(generateLocalizationsMap());
 }

packages/flutter/lib/src/material/i18n/material_ar.arb

 {
+  "timeOfDayFormat": "h:mm a",
   "openAppDrawerTooltip": "افتح قائمة التنقل",
   "backButtonTooltip": "الى الخلف",
   "closeButtonTooltip": "إغلا",
@@ -20,5 +21,7 @@
   "okButtonLabel": "حسنا",
   "pasteButtonLabel": "عجين",
   "selectAllButtonLabel": "اختر الكل",
-  "viewLicensesButtonLabel": "عرض التراخيص"
+  "viewLicensesButtonLabel": "عرض التراخيص",
+  "anteMeridiemAbbreviation": "ص",
+  "postMeridiemAbbreviation": "م"
 }

packages/flutter/lib/src/material/i18n/material_de.arb

 {
+  "timeOfDayFormat": "HH:mm",
   "openAppDrawerTooltip": "Navigationsmenü öffnen",
   "backButtonTooltip": "Zurück",
   "closeButtonTooltip": "Schließen",

packages/flutter/lib/src/material/i18n/material_en.arb

 {
+  "timeOfDayFormat": "h:mm a",
+  "@timeOfDayFormat": {
+    "description": "The ICU 'Short Time' pattern, such as 'HH:mm', 'h:mm a', 'H:mm'. See: http://demo.icu-project.org/icu-bin/locexp?d_=en&_=en_US",
+    "type": "text"
+  },
+
   "openAppDrawerTooltip": "Open navigation menu",
   "@openAppDrawerTooltip": {
     "description": "The tooltip for the leading AppBar menu (aka 'hamburger') button",
@@ -126,5 +132,17 @@
   "@viewLicensesButtonLabel": {
     "description": "The label for the about box's view licenses button.",
     "type": "text"
+  },
+
+  "anteMeridiemAbbreviation": "AM",
+  "@anteMeridiemAbbreviation": {
+    "description": "The abbreviation for ante meridiem (before noon) shown in the time picker.",
+    "type": "text"
+  },
+
+  "postMeridiemAbbreviation": "PM",
+  "@postMeridiemAbbreviation": {
+    "description": "The abbreviation for post meridiem (after noon) shown in the time picker.",
+    "type": "text"
   }
 }

packages/flutter/lib/src/material/i18n/material_en_GB.arb

+{
+  "timeOfDayFormat": "HH:mm"
+}

packages/flutter/lib/src/material/i18n/material_en_IE.arb

+{
+  "timeOfDayFormat": "HH:mm"
+}

packages/flutter/lib/src/material/i18n/material_en_ZA.arb

+{
+  "timeOfDayFormat": "HH:mm"
+}

packages/flutter/lib/src/material/i18n/material_es.arb

 {
+  "timeOfDayFormat": "H:mm",
   "openAppDrawerTooltip": "Abrir el menú de navegación",
   "backButtonTooltip": "Espalda",
   "closeButtonTooltip": "Cerrar",

packages/flutter/lib/src/material/i18n/material_es_US.arb

+{
+  "timeOfDayFormat": "h:mm a"
+}

packages/flutter/lib/src/material/i18n/material_fa.arb

 {
+  "timeOfDayFormat": "H:mm",
   "openAppDrawerTooltip": "منوی ناوبری را باز کنید",
   "backButtonTooltip": "بازگشت",
   "closeButtonTooltip": "بستن",

packages/flutter/lib/src/material/i18n/material_fr.arb

 {
+  "timeOfDayFormat": "HH:mm",
   "openAppDrawerTooltip": "Ouvrir le menu de navigation",
   "backButtonTooltip": "Retour",
   "closeButtonTooltip": "Fermer",

packages/flutter/lib/src/material/i18n/material_fr_CA.arb

+{
+  "timeOfDayFormat": "HH 'h' mm"
+}

packages/flutter/lib/src/material/i18n/material_he.arb

 {
+  "timeOfDayFormat": "H:mm",
   "openAppDrawerTooltip": "פתח תפריט ניווט",
   "backButtonTooltip": "אחורה",
   "closeButtonTooltip": "סגור",

packages/flutter/lib/src/material/i18n/material_it.arb

 {
+  "timeOfDayFormat": "HH:mm",
   "openAppDrawerTooltip": "Apri il menu di navigazione",
   "backButtonTooltip": "Indietro",
   "closeButtonTooltip": "Chiudi",

packages/flutter/lib/src/material/i18n/material_ja.arb

 {
+  "timeOfDayFormat": "H:mm",
   "openAppDrawerTooltip": "ナビゲーションメニューを開く",
   "backButtonTooltip": "戻る",
   "closeButtonTooltip": "閉じる",

packages/flutter/lib/src/material/i18n/material_ps.arb

 {
+  "timeOfDayFormat": "HH:mm",
   "openAppDrawerTooltip": "د پرانیستی نیینګ مینو",
   "backButtonTooltip": "شاته",
   "closeButtonTooltip": "بنده",

packages/flutter/lib/src/material/i18n/material_pt.arb

 {
+  "timeOfDayFormat": "HH:mm",
   "openAppDrawerTooltip": "Abrir menu de navegação",
   "backButtonTooltip": "Costas",
   "closeButtonTooltip": "Fechar",

packages/flutter/lib/src/material/i18n/material_ru.arb

 {
+  "timeOfDayFormat": "H:mm",
   "openAppDrawerTooltip": "Открыть меню навигации",
   "backButtonTooltip": "назад",
   "closeButtonTooltip": "Закрыть",

packages/flutter/lib/src/material/i18n/material_sd.arb

 {
+  "timeOfDayFormat": "HH:mm",
   "openAppDrawerTooltip": "اوپن جي مينڊيٽ مينيو",
   "backButtonTooltip": "پوئتي",
   "closeButtonTooltip": "بند ڪريو",

packages/flutter/lib/src/material/i18n/material_ur.arb

 {
+  "timeOfDayFormat": "h:mm a",
   "openAppDrawerTooltip": "کھولیں نیویگیشن مینو",
   "backButtonTooltip": "واپس",
   "closeButtonTooltip": "بند کریں",
@@ -20,5 +21,7 @@
   "okButtonLabel": "ٹھیک ہے",
   "pasteButtonLabel": "چسپاں",
   "selectAllButtonLabel": "تکاپیمام منتخب کریں",
-  "viewLicensesButtonLabel": "لائسنس دیکھیں"
+  "viewLicensesButtonLabel": "لائسنس دیکھیں",
+  "anteMeridiemAbbreviation": "AM",
+  "postMeridiemAbbreviation": "PM"
 }
\ No newline at end of file

packages/flutter/lib/src/material/i18n/material_zh.arb

 {
+  "timeOfDayFormat": "ah:mm",
   "openAppDrawerTooltip": "打开导航菜单",
   "backButtonTooltip": "返回",
   "closeButtonTooltip": "关闭",
@@ -20,5 +21,11 @@
   "okButtonLabel": "确定",
   "pasteButtonLabel": "粘贴",
   "selectAllButtonLabel": "全选",
-  "viewLicensesButtonLabel": "查看许可证"
+  "viewLicensesButtonLabel": "查看许可证",
+  "backButtonTooltip": "背部",
+  "closeButtonTooltip": "关",
+  "nextMonthTooltip": "-下月就29了。",
+  "previousMonthTooltip": "前一个月",
+  "anteMeridiemAbbreviation": "上午",
+  "postMeridiemAbbreviation": "下午"
 }

packages/flutter/lib/src/material/material_localizations.dart

@@ -10,7 +10,7 @@ import 'package:intl/intl.dart' as intl;
 
 import 'i18n/localizations.dart';
 
-/// Defines the localized resource values used by the Material widgts.
+/// Defines the localized resource values used by the Material widgets.
 ///
 /// See also:
 ///
@@ -80,6 +80,18 @@ abstract class MaterialLocalizations {
   /// Label for the [AboutBox] button that shows the [LicensePage].
   String get viewLicensesButtonLabel;
 
+  /// The abbreviation for ante meridiem (before noon) shown in the time picker.
+  String get anteMeridiemAbbreviation;
+
+  /// The abbreviation for post meridiem (after noon) shown in the time picker.
+  String get postMeridiemAbbreviation;
+
+  /// The format used to lay out the time picker.
+  ///
+  /// The documentation for [TimeOfDayFormat] enum values provides details on
+  /// each supported layout.
+  TimeOfDayFormat get timeOfDayFormat;
+
   /// The `MaterialLocalizations` from the closest [Localizations] instance
   /// that encloses the given context.
   ///
@@ -99,25 +111,30 @@ abstract class MaterialLocalizations {
 
 /// Localized strings for the material widgets.
 class DefaultMaterialLocalizations implements MaterialLocalizations {
-  /// Construct an object that defines the material widgets' localized strings
+  /// Constructs an object that defines the material widgets' localized strings
   /// for the given `locale`.
   ///
   /// [LocalizationsDelegate] implementations typically call the static [load]
   /// function, rather than constructing this class directly.
-  DefaultMaterialLocalizations(this.locale) {
+  factory DefaultMaterialLocalizations(Locale locale) {
     assert(locale != null);
-    _nameToValue = localizations[_localeName]
-      ?? localizations[locale.languageCode]
-      ?? localizations['en']
-      ?? <String, String>{};
+
+    final Map<String, String> result = <String, String>{};
+    if (localizations.containsKey(locale.languageCode))
+      result.addAll(localizations[locale.languageCode]);
+    if (localizations.containsKey(locale.toString()))
+      result.addAll(localizations[locale.toString()]);
+    return new DefaultMaterialLocalizations._(locale, result);
   }
 
-  Map<String, String> _nameToValue;
+  DefaultMaterialLocalizations._(this.locale, this._nameToValue);
 
   /// The locale for which the values of this class's localized resources
   /// have been translated.
   final Locale locale;
 
+  final Map<String, String> _nameToValue;
+
   String get _localeName {
     final String localeName = locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
     return intl.Intl.canonicalizedLocale(localeName);
@@ -224,6 +241,47 @@ class DefaultMaterialLocalizations implements MaterialLocalizations {
   @override
   String get viewLicensesButtonLabel => _nameToValue['viewLicensesButtonLabel'];
 
+  @override
+  String get anteMeridiemAbbreviation => _nameToValue['anteMeridiemAbbreviation'];
+
+  @override
+  String get postMeridiemAbbreviation => _nameToValue['postMeridiemAbbreviation'];
+
+  /// The [TimeOfDayFormat] corresponding to one of the following supported
+  /// patterns:
+  ///
+  ///  * `HH:mm`
+  ///  * `HH.mm`
+  ///  * `HH 'h' mm`
+  ///  * `HH:mm น.`
+  ///  * `H:mm`
+  ///  * `h:mm a`
+  ///  * `a h:mm`
+  ///  * `ah:mm`
+  ///
+  /// See also:
+  ///
+  ///  * http://demo.icu-project.org/icu-bin/locexp?d_=en&_=en_US shows the
+  ///    short time pattern used in locale en_US
+  @override
+  TimeOfDayFormat get timeOfDayFormat {
+    final String icuShortTimePattern = _nameToValue['timeOfDayFormat'];
+
+    assert(() {
+      if (!_icuTimeOfDayToEnum.containsKey(icuShortTimePattern)) {
+        throw new FlutterError(
+          '"$icuShortTimePattern" is not one of the ICU short time patterns '
+          'supported by the material library. Here is the list of supported '
+          'patterns:\n  ' +
+          _icuTimeOfDayToEnum.keys.join('\n  ')
+        );
+      }
+      return true;
+    });
+
+    return _icuTimeOfDayToEnum[icuShortTimePattern];
+  }
+
   /// Creates an object that provides localized resource values for the
   /// for the widgets of the material library.
   ///
@@ -233,3 +291,66 @@ class DefaultMaterialLocalizations implements MaterialLocalizations {
     return new SynchronousFuture<MaterialLocalizations>(new DefaultMaterialLocalizations(locale));
   }
 }
+
+const Map<String, TimeOfDayFormat> _icuTimeOfDayToEnum = const <String, TimeOfDayFormat>{
+  'HH:mm': TimeOfDayFormat.HH_colon_mm,
+  'HH.mm': TimeOfDayFormat.HH_dot_mm,
+  "HH 'h' mm": TimeOfDayFormat.frenchCanadian,
+  'HH:mm น.': TimeOfDayFormat.HH_colon_mm,
+  'H:mm': TimeOfDayFormat.H_colon_mm,
+  'h:mm a': TimeOfDayFormat.h_colon_mm_space_a,
+  'a h:mm': TimeOfDayFormat.a_space_h_colon_mm,
+  'ah:mm': TimeOfDayFormat.a_space_h_colon_mm,
+};
+
+/// Determines how the time picker invoked using [showTimePicker] formats and
+/// lays out the time controls.
+///
+/// The time picker provides layout configurations optimized for each of the
+/// enum values.
+enum TimeOfDayFormat {
+  /// Corresponds to the ICU 'HH:mm' pattern.
+  ///
+  /// This format uses 24-hour two-digit zero-padded hours. Controls are always
+  /// laid out horizontally. Hours are separated from minutes by one colon
+  /// character.
+  HH_colon_mm,
+
+  /// Corresponds to the ICU 'HH.mm' pattern.
+  ///
+  /// This format uses 24-hour two-digit zero-padded hours. Controls are always
+  /// laid out horizontally. Hours are separated from minutes by one dot
+  /// character.
+  HH_dot_mm,
+
+  /// Corresponds to the ICU "HH 'h' mm" pattern used in Canadian French.
+  ///
+  /// This format uses 24-hour two-digit zero-padded hours. Controls are always
+  /// laid out horizontally. Hours are separated from minutes by letter 'h'.
+  frenchCanadian,
+
+  /// Corresponds to the ICU 'H:mm' pattern.
+  ///
+  /// This format uses 24-hour non-padded variable-length hours. Controls are
+  /// always laid out horizontally. Hours are separated from minutes by one
+  /// colon character.
+  H_colon_mm,
+
+  /// Corresponds to the ICU 'h:mm a' pattern.
+  ///
+  /// This format uses 12-hour non-padded variable-length hours with a day
+  /// period. Controls are laid out horizontally in portrait mode. In landscape
+  /// mode, the day period appears vertically after (consistent with the ambient
+  /// [TextDirection]) hour-minute indicator. Hours are separated from minutes
+  /// by one colon character.
+  h_colon_mm_space_a,
+
+  /// Corresponds to the ICU 'a h:mm' pattern.
+  ///
+  /// This format uses 12-hour non-padded variable-length hours with a day
+  /// period. Controls are laid out horizontally in portrait mode. In landscape
+  /// mode, the day period appears vertically before (consistent with the
+  /// ambient [TextDirection]) hour-minute indicator. Hours are separated from
+  /// minutes by one colon character.
+  a_space_h_colon_mm,
+}

packages/flutter/lib/src/widgets/viewport.dart

@@ -43,7 +43,7 @@ AxisDirection _getDefaultCrossAxisDirection(BuildContext context, AxisDirection
 /// example, if the [axisDirection] is [AxisDirection.down], the first sliver
 /// before [center] is placed above the [center]. The slivers that are later in
 /// the child list than [center] are placed in order in the [axisDirection]. For
-/// example, in the preceeding scenario, the first sliver after [center] is
+/// example, in the preceding scenario, the first sliver after [center] is
 /// placed below the [center].
 ///
 /// [Viewport] cannot contain box children directly. Instead, use a

packages/flutter/test/material/time_picker_test.dart

@@ -2,19 +2,24 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import 'feedback_tester.dart';
 
 class _TimePickerLauncher extends StatelessWidget {
-  const _TimePickerLauncher({ Key key, this.onChanged }) : super(key: key);
+  const _TimePickerLauncher({ Key key, this.onChanged, this.locale }) : super(key: key);
 
   final ValueChanged<TimeOfDay> onChanged;
+  final Locale locale;
 
   @override
   Widget build(BuildContext context) {
     return new MaterialApp(
+      locale: locale,
       home: new Material(
         child: new Center(
           child: new Builder(
@@ -36,15 +41,18 @@ class _TimePickerLauncher extends StatelessWidget {
   }
 }
 
-Future<Offset> startPicker(WidgetTester tester, ValueChanged<TimeOfDay> onChanged) async {
-  await tester.pumpWidget(new _TimePickerLauncher(onChanged: onChanged));
+Future<Offset> startPicker(WidgetTester tester, ValueChanged<TimeOfDay> onChanged,
+    { Locale locale: const Locale('en', 'US') }) async {
+  await tester.pumpWidget(new _TimePickerLauncher(onChanged: onChanged, locale: locale,));
   await tester.tap(find.text('X'));
   await tester.pumpAndSettle(const Duration(seconds: 1));
   return tester.getCenter(find.byKey(const Key('time-picker-dial')));
 }
 
 Future<Null> finishPicker(WidgetTester tester) async {
-  await tester.tap(find.text('OK'));
+  final Element timePickerElement = tester.element(find.byElementPredicate((Element element) => element.widget.runtimeType.toString() == '_TimePickerDialog'));
+  final MaterialLocalizations materialLocalizations = MaterialLocalizations.of(timePickerElement);
+  await tester.tap(find.text(materialLocalizations.okButtonLabel));
   await tester.pumpAndSettle(const Duration(seconds: 1));
 }
 
@@ -197,4 +205,78 @@ void main() {
       expect(feedback.hapticCount, 3);
     });
   });
+
+  group('localization', () {
+    testWidgets('can localize the header in all known formats', (WidgetTester tester) async {
+      // TODO(yjbanov): also test `HH.mm` (in_ID), `a h:mm` (ko_KR) and `HH:mm น.` (th_TH) when we have .arb files for them
+      final Map<Locale, List<String>> locales = <Locale, List<String>>{
+        const Locale('en', 'US'): const <String>['hour h', 'string :', 'minute', 'period'], //'h:mm a'
+        const Locale('en', 'GB'): const <String>['hour HH', 'string :', 'minute'], //'HH:mm'
+        const Locale('es', 'ES'): const <String>['hour H', 'string :', 'minute'], //'H:mm'
+        const Locale('fr', 'CA'): const <String>['hour HH', 'string h', 'minute'], //'HH \'h\' mm'
+        const Locale('zh', 'ZH'): const <String>['period', 'hour h', 'string :', 'minute'], //'ah:mm'
+      };
+
+      for (Locale locale in locales.keys) {
+        final Offset center = await startPicker(tester, (TimeOfDay time) { }, locale: locale);
+        final List<String> actual = <String>[];
+        tester.element(find.byType(CustomMultiChildLayout)).visitChildren((Element child) {
+          final LayoutId layout = child.widget;
+          final String fragmentType = '${layout.child.runtimeType}';
+          final dynamic widget = layout.child;
+          if (fragmentType == '_MinuteControl') {
+            actual.add('minute');
+          } else if (fragmentType == '_DayPeriodControl') {
+            actual.add('period');
+          } else if (fragmentType == '_HourControl') {
+            actual.add('hour ${widget.hourFormat.toString().split('.').last}');
+          } else if (fragmentType == '_StringFragment') {
+            actual.add('string ${widget.value}');
+          } else {
+            fail('Unsupported fragment type: $fragmentType');
+          }
+        });
+        expect(actual, locales[locale]);
+        await tester.tapAt(new Offset(center.dx, center.dy - 50.0));
+        await finishPicker(tester);
+      }
+    });
+
+    testWidgets('uses single-ring 12-hour dial for h hour format', (WidgetTester tester) async {
+      // Tap along the segment stretching from the center to the edge at
+      // 12:00 AM position. Because there's only one ring, no matter where you
+      // tap the time will be the same. See the 24-hour dial test that behaves
+      // differently.
+      for (int i = 1; i < 10; i++) {
+        TimeOfDay result;
+        final Offset center = await startPicker(tester, (TimeOfDay time) { result = time; });
+        final Size size = tester.getSize(find.byKey(const Key('time-picker-dial')));
+        final double dy = (size.height / 2.0 / 10) * i;
+        await tester.tapAt(new Offset(center.dx, center.dy - dy));
+        await finishPicker(tester);
+        expect(result, equals(const TimeOfDay(hour: 0, minute: 0)));
+      }
+    });
+
+    testWidgets('uses two-ring 24-hour dial for H and HH hour formats', (WidgetTester tester) async {
+      const List<Locale> locales = const <Locale>[
+        const Locale('en', 'GB'), // HH
+        const Locale('es', 'ES'), // H
+      ];
+      for (Locale locale in locales) {
+        // Tap along the segment stretching from the center to the edge at
+        // 12:00 AM position. There are two rings. At ~70% mark, the ring
+        // switches between inner ring and outer ring.
+        for (int i = 1; i < 10; i++) {
+          TimeOfDay result;
+          final Offset center = await startPicker(tester, (TimeOfDay time) { result = time; }, locale: locale);
+          final Size size = tester.getSize(find.byKey(const Key('time-picker-dial')));
+          final double dy = (size.height / 2.0 / 10) * i;
+          await tester.tapAt(new Offset(center.dx, center.dy - dy));
+          await finishPicker(tester);
+          expect(result, equals(new TimeOfDay(hour: i < 7 ? 12 : 0, minute: 0)));
+        }
+      }
+    });
+  });
 }