[Gallery] Implement cupertino pickers demo (#251)

gallery/gallery/lib/data/demos.dart

@@ -12,6 +12,7 @@ import 'package:gallery/demos/cupertino/cupertino_activity_indicator_demo.dart';
 import 'package:gallery/demos/cupertino/cupertino_alert_demo.dart';
 import 'package:gallery/demos/cupertino/cupertino_button_demo.dart';
 import 'package:gallery/demos/cupertino/cupertino_navigation_bar_demo.dart';
+import 'package:gallery/demos/cupertino/cupertino_picker_demo.dart';
 import 'package:gallery/demos/cupertino/cupertino_refresh_demo.dart';
 import 'package:gallery/demos/cupertino/cupertino_segmented_control_demo.dart';
 import 'package:gallery/demos/cupertino/cupertino_slider_demo.dart';
@@ -651,6 +652,21 @@ List<GalleryDemo> cupertinoDemos(BuildContext context) {
         ),
       ],
     ),
+    GalleryDemo(
+      title: localizations.demoCupertinoPickerTitle,
+      icon: GalleryIcons.event,
+      subtitle: localizations.demoCupertinoPickerSubtitle,
+      configurations: [
+        GalleryDemoConfiguration(
+          title: localizations.demoCupertinoPickerTitle,
+          description: localizations.demoCupertinoPickerDescription,
+          documentationUrl:
+              '$_docsBaseUrl/cupertino/CupertinoDatePicker-class.html',
+          buildRoute: (_) => CupertinoPickerDemo(),
+          code: CodeSegments.cupertinoPickersDemo,
+        ),
+      ],
+    ),
     GalleryDemo(
       title: localizations.demoCupertinoPullToRefreshTitle,
       icon: GalleryIcons.cupertinoPullToRefresh,

gallery/gallery/lib/demos/cupertino/cupertino_picker_demo.dart

@@ -0,0 +1,241 @@
+// Copyright 2019 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/cupertino.dart';
+import 'package:gallery/l10n/gallery_localizations.dart';
+import 'package:intl/intl.dart';
+
+// BEGIN cupertinoPickersDemo
+
+class CupertinoPickerDemo extends StatefulWidget {
+  @override
+  _CupertinoPickerDemoState createState() => _CupertinoPickerDemoState();
+}
+
+class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
+  Duration timer = const Duration();
+
+  // Value that is shown in the date picker in date mode.
+  DateTime date = DateTime.now();
+
+  // Value that is shown in the date picker in time mode.
+  DateTime time = DateTime.now();
+
+  // Value that is shown in the date picker in dateAndTime mode.
+  DateTime dateTime = DateTime.now();
+
+  Widget _buildDatePicker(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        showCupertinoModalPopup<void>(
+          context: context,
+          builder: (context) {
+            return _BottomPicker(
+              child: CupertinoDatePicker(
+                backgroundColor:
+                    CupertinoColors.systemBackground.resolveFrom(context),
+                mode: CupertinoDatePickerMode.date,
+                initialDateTime: date,
+                onDateTimeChanged: (newDateTime) {
+                  setState(() => date = newDateTime);
+                },
+              ),
+            );
+          },
+        );
+      },
+      child: _Menu(children: [
+        Text(GalleryLocalizations.of(context).demoCupertinoPickerDate),
+        Text(
+          DateFormat.yMMMMd().format(date),
+          style: TextStyle(color: CupertinoColors.inactiveGray),
+        ),
+      ]),
+    );
+  }
+
+  Widget _buildTimePicker(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        showCupertinoModalPopup<void>(
+          context: context,
+          builder: (context) {
+            return _BottomPicker(
+              child: CupertinoDatePicker(
+                backgroundColor:
+                    CupertinoColors.systemBackground.resolveFrom(context),
+                mode: CupertinoDatePickerMode.time,
+                initialDateTime: time,
+                onDateTimeChanged: (newDateTime) {
+                  setState(() => time = newDateTime);
+                },
+              ),
+            );
+          },
+        );
+      },
+      child: _Menu(
+        children: [
+          Text(GalleryLocalizations.of(context).demoCupertinoPickerTime),
+          Text(
+            DateFormat.jm().format(time),
+            style: TextStyle(color: CupertinoColors.inactiveGray),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildDateAndTimePicker(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        showCupertinoModalPopup<void>(
+          context: context,
+          builder: (context) {
+            return _BottomPicker(
+              child: CupertinoDatePicker(
+                backgroundColor:
+                    CupertinoColors.systemBackground.resolveFrom(context),
+                mode: CupertinoDatePickerMode.dateAndTime,
+                initialDateTime: dateTime,
+                onDateTimeChanged: (newDateTime) {
+                  setState(() => dateTime = newDateTime);
+                },
+              ),
+            );
+          },
+        );
+      },
+      child: _Menu(
+        children: [
+          Text(GalleryLocalizations.of(context).demoCupertinoPickerDateTime),
+          Text(
+            DateFormat.yMMMd().add_jm().format(dateTime),
+            style: TextStyle(color: CupertinoColors.inactiveGray),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildCountdownTimerPicker(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        showCupertinoModalPopup<void>(
+          context: context,
+          builder: (context) {
+            return _BottomPicker(
+              child: CupertinoTimerPicker(
+                backgroundColor:
+                    CupertinoColors.systemBackground.resolveFrom(context),
+                initialTimerDuration: timer,
+                onTimerDurationChanged: (newTimer) {
+                  setState(() => timer = newTimer);
+                },
+              ),
+            );
+          },
+        );
+      },
+      child: _Menu(
+        children: [
+          Text(GalleryLocalizations.of(context).demoCupertinoPickerTimer),
+          Text(
+            '${timer.inHours}:'
+            '${(timer.inMinutes % 60).toString().padLeft(2, '0')}:'
+            '${(timer.inSeconds % 60).toString().padLeft(2, '0')}',
+            style: TextStyle(color: CupertinoColors.inactiveGray),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: CupertinoNavigationBar(
+        automaticallyImplyLeading: false,
+        middle: Text(GalleryLocalizations.of(context).demoCupertinoPickerTitle),
+      ),
+      child: DefaultTextStyle(
+        style: CupertinoTheme.of(context).textTheme.textStyle,
+        child: ListView(
+          children: [
+            const SizedBox(height: 32),
+            _buildDatePicker(context),
+            _buildTimePicker(context),
+            _buildDateAndTimePicker(context),
+            _buildCountdownTimerPicker(context),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _BottomPicker extends StatelessWidget {
+  const _BottomPicker({
+    Key key,
+    @required this.child,
+  })  : assert(child != null),
+        super(key: key);
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 216,
+      padding: const EdgeInsets.only(top: 6),
+      color: CupertinoColors.systemBackground.resolveFrom(context),
+      child: DefaultTextStyle(
+        style: TextStyle(
+          color: CupertinoColors.label.resolveFrom(context),
+          fontSize: 22,
+        ),
+        child: GestureDetector(
+          // Blocks taps from propagating to the modal sheet and popping.
+          onTap: () {},
+          child: SafeArea(
+            top: false,
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _Menu extends StatelessWidget {
+  const _Menu({
+    Key key,
+    @required this.children,
+  })  : assert(children != null),
+        super(key: key);
+
+  final List<Widget> children;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        border: const Border(
+          top: BorderSide(color: CupertinoColors.inactiveGray, width: 0),
+          bottom: BorderSide(color: CupertinoColors.inactiveGray, width: 0),
+        ),
+      ),
+      height: 44,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: children,
+        ),
+      ),
+    );
+  }
+}
+
+// END

gallery/gallery/lib/l10n/gallery_localizations.dart

@@ -1866,6 +1866,56 @@ class GalleryLocalizations {
         desc: r'Title for the cupertino navigation bar component demo.');
   }
 
+  String get demoCupertinoPickerDate {
+    return Intl.message('Date',
+        locale: _localeName,
+        name: 'demoCupertinoPickerDate',
+        desc: r'Label to open a date picker.');
+  }
+
+  String get demoCupertinoPickerDateTime {
+    return Intl.message('Date and Time',
+        locale: _localeName,
+        name: 'demoCupertinoPickerDateTime',
+        desc: r'Label to open a date and time picker.');
+  }
+
+  String get demoCupertinoPickerDescription {
+    return Intl.message(
+        'An iOS-style picker widget that can be used to select dates, times, or both date and time.',
+        locale: _localeName,
+        name: 'demoCupertinoPickerDescription',
+        desc: r'Description for the cupertino pickers component demo.');
+  }
+
+  String get demoCupertinoPickerSubtitle {
+    return Intl.message('iOS-style date and time pickers',
+        locale: _localeName,
+        name: 'demoCupertinoPickerSubtitle',
+        desc: r'Subtitle for the cupertino pickers component demo.');
+  }
+
+  String get demoCupertinoPickerTime {
+    return Intl.message('Time',
+        locale: _localeName,
+        name: 'demoCupertinoPickerTime',
+        desc: r'Label to open a time picker.');
+  }
+
+  String get demoCupertinoPickerTimer {
+    return Intl.message('Timer',
+        locale: _localeName,
+        name: 'demoCupertinoPickerTimer',
+        desc: r'Label to open a countdown timer picker.');
+  }
+
+  String get demoCupertinoPickerTitle {
+    return Intl.message('Pickers',
+        locale: _localeName,
+        name: 'demoCupertinoPickerTitle',
+        desc: r'Title for the cupertino date and time pickers component demo.');
+  }
+
   String get demoCupertinoPullToRefreshDescription {
     return Intl.message(
         'A widget implementing the iOS-style pull to refresh content control.',

gallery/gallery/lib/l10n/intl_en_US.arb

@@ -1001,6 +1001,34 @@
   "@demoCupertinoNavigationBarDescription": {
     "description": "Description for the cupertino navigation bar component demo."
   },
+  "demoCupertinoPickerTitle": "Pickers",
+  "@demoCupertinoPickerTitle": {
+    "description": "Title for the cupertino date and time pickers component demo."
+  },
+  "demoCupertinoPickerSubtitle": "iOS-style date and time pickers",
+  "@demoCupertinoPickerSubtitle": {
+    "description": "Subtitle for the cupertino pickers component demo."
+  },
+  "demoCupertinoPickerDescription": "An iOS-style picker widget that can be used to select dates, times, or both date and time.",
+  "@demoCupertinoPickerDescription": {
+    "description": "Description for the cupertino pickers component demo."
+  },
+  "demoCupertinoPickerTimer": "Timer",
+  "@demoCupertinoPickerTimer": {
+    "description": "Label to open a countdown timer picker."
+  },
+  "demoCupertinoPickerDate": "Date",
+  "@demoCupertinoPickerDate": {
+    "description": "Label to open a date picker."
+  },
+  "demoCupertinoPickerTime": "Time",
+  "@demoCupertinoPickerTime": {
+    "description": "Label to open a time picker."
+  },
+  "demoCupertinoPickerDateTime": "Date and Time",
+  "@demoCupertinoPickerDateTime": {
+    "description": "Label to open a date and time picker."
+  },
   "demoCupertinoPullToRefreshTitle": "Pull To Refresh",
   "@demoCupertinoPullToRefreshTitle": {
     "description": "Title for the cupertino pull-to-refresh component demo."

gallery/gallery/lib/l10n/intl_en_US.xml

@@ -949,6 +949,34 @@
     name="demoCupertinoNavigationBarDescription"
     description="Description for the cupertino navigation bar component demo."
     >An iOS-styled navigation bar. The navigation bar is a toolbar that minimally consists of a page title, in the middle of the toolbar.</string>
+  <string
+    name="demoCupertinoPickerTitle"
+    description="Title for the cupertino date and time pickers component demo."
+    >Pickers</string>
+  <string
+    name="demoCupertinoPickerSubtitle"
+    description="Subtitle for the cupertino pickers component demo."
+    >iOS-style date and time pickers</string>
+  <string
+    name="demoCupertinoPickerDescription"
+    description="Description for the cupertino pickers component demo."
+    >An iOS-style picker widget that can be used to select dates, times, or both date and time.</string>
+  <string
+    name="demoCupertinoPickerTimer"
+    description="Label to open a countdown timer picker."
+    >Timer</string>
+  <string
+    name="demoCupertinoPickerDate"
+    description="Label to open a date picker."
+    >Date</string>
+  <string
+    name="demoCupertinoPickerTime"
+    description="Label to open a time picker."
+    >Time</string>
+  <string
+    name="demoCupertinoPickerDateTime"
+    description="Label to open a date and time picker."
+    >Date and Time</string>
   <string
     name="demoCupertinoPullToRefreshTitle"
     description="Title for the cupertino pull-to-refresh component demo."

gallery/gallery/lib/l10n/messages_en_US.dart

@@ -491,6 +491,18 @@ class MessageLookup extends MessageLookupByLibrary {
             MessageLookupByLibrary.simpleMessage("iOS-style navigation bar"),
         "demoCupertinoNavigationBarTitle":
             MessageLookupByLibrary.simpleMessage("Navigation Bar"),
+        "demoCupertinoPickerDate": MessageLookupByLibrary.simpleMessage("Date"),
+        "demoCupertinoPickerDateTime":
+            MessageLookupByLibrary.simpleMessage("Date and Time"),
+        "demoCupertinoPickerDescription": MessageLookupByLibrary.simpleMessage(
+            "An iOS-style picker widget that can be used to select dates, times, or both date and time."),
+        "demoCupertinoPickerSubtitle": MessageLookupByLibrary.simpleMessage(
+            "iOS-style date and time pickers"),
+        "demoCupertinoPickerTime": MessageLookupByLibrary.simpleMessage("Time"),
+        "demoCupertinoPickerTimer":
+            MessageLookupByLibrary.simpleMessage("Timer"),
+        "demoCupertinoPickerTitle":
+            MessageLookupByLibrary.simpleMessage("Pickers"),
         "demoCupertinoPullToRefreshDescription":
             MessageLookupByLibrary.simpleMessage(
                 "A widget implementing the iOS-style pull to refresh content control."),