Add Cupertino Countdown Timer Picker (flutter#20966)

Add a countdown timer picker as part of the Cupertino date picker.

Author: doxuanviet1996

examples/flutter_gallery/lib/demo/cupertino/cupertino_picker_demo.dart

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
 
 import 'cupertino_navigation_demo.dart' show coolColorNames;
 
@@ -20,8 +19,7 @@ class CupertinoPickerDemo extends StatefulWidget {
 class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
   int _selectedColorIndex = 0;
 
-  int _selectedHour = 0;
-  int _selectedMinute = 0;
+  Duration timer = new Duration();
 
   Widget _buildMenu(List<Widget> children) {
     return new Container(
@@ -74,63 +72,6 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
     );
   }
 
-  Widget _buildAlarmPicker() {
-    return new Row(
-      children: <Widget>[
-        new Expanded(
-          child: new CupertinoPicker(
-            scrollController: new FixedExtentScrollController(
-              initialItem: _selectedHour,
-            ),
-            offAxisFraction: -0.5,
-            useMagnifier: true,
-            magnification: 1.1,
-            itemExtent: _kPickerItemHeight,
-            backgroundColor: CupertinoColors.white,
-            onSelectedItemChanged: (int index) {
-              setState(() {
-                _selectedHour = index;
-              });
-            },
-            children: new List<Widget>.generate(24, (int index) {
-              return new Container(
-                alignment: Alignment.centerRight,
-                padding: const EdgeInsets.only(right: 32.0),
-                child: new Text(index.toString()),
-              );
-            }),
-            looping: true,
-          ),
-        ),
-        new Expanded(
-          child: new CupertinoPicker(
-            scrollController: new FixedExtentScrollController(
-              initialItem: _selectedMinute,
-            ),
-            offAxisFraction: 0.5,
-            useMagnifier: true,
-            magnification: 1.1,
-            itemExtent: _kPickerItemHeight,
-            backgroundColor: CupertinoColors.white,
-            onSelectedItemChanged: (int index) {
-              setState(() {
-                _selectedMinute = index;
-              });
-            },
-            children: new List<Widget>.generate(60, (int index) {
-              return new Container(
-                alignment: Alignment.centerLeft,
-                padding: const EdgeInsets.only(left: 32.0),
-                child: new Text(index.toString()),
-              );
-            }),
-            looping: true,
-          ),
-        ),
-      ],
-    );
-  }
-
   Widget _buildBottomPicker(Widget picker) {
     return new Container(
       height: _kPickerSheetHeight,
@@ -151,9 +92,41 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
     );
   }
 
+  Widget _buildCountdownTimerPicker(BuildContext context) {
+    return new GestureDetector(
+      onTap: () {
+        showCupertinoModalPopup<void>(
+          context: context,
+          builder: (BuildContext context) {
+            return _buildBottomPicker(
+              new CupertinoTimerPicker(
+                initialTimerDuration: timer,
+                onTimerDurationChanged: (Duration newTimer) {
+                  setState(() {
+                    timer = newTimer;
+                  });
+                },
+              ),
+            );
+          },
+        );
+      },
+      child: _buildMenu(
+          <Widget>[
+            const Text('Countdown Timer'),
+            new Text(
+              '${timer.inHours}:'
+                '${(timer.inMinutes % 60).toString().padLeft(2,'0')}:'
+                '${(timer.inSeconds % 60).toString().padLeft(2,'0')}',
+              style: const TextStyle(color: CupertinoColors.inactiveGray),
+            ),
+          ]
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
-    final String time = new DateFormat.Hm().format(new DateTime(2018, 1, 1, _selectedHour, _selectedMinute));
     return new Scaffold(
       appBar: new AppBar(
         title: const Text('Cupertino Picker'),
@@ -171,50 +144,30 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
               const Padding(padding: EdgeInsets.only(top: 32.0)),
               new GestureDetector(
                 onTap: () async {
-                  await showModalBottomSheet<void>(
+                  await showCupertinoModalPopup<void>(
                     context: context,
                     builder: (BuildContext context) {
                       return _buildBottomPicker(_buildColorPicker());
                     },
                   );
                 },
                 child: _buildMenu(
-                  <Widget>[
-                    const Text('Favorite Color'),
-                    new Text(
-                      coolColorNames[_selectedColorIndex],
-                      style: const TextStyle(
-                        color: CupertinoColors.inactiveGray
+                    <Widget>[
+                      const Text('Favorite Color'),
+                      new Text(
+                        coolColorNames[_selectedColorIndex],
+                        style: const TextStyle(
+                            color: CupertinoColors.inactiveGray
+                        ),
                       ),
-                    ),
-                  ]
-                ),
-              ),
-              new GestureDetector(
-                onTap: () async {
-                  await showModalBottomSheet<void>(
-                    context: context,
-                    builder: (BuildContext context) {
-                      return _buildBottomPicker(_buildAlarmPicker());
-                    },
-                  );
-                },
-                child: _buildMenu(
-                  <Widget>[
-                    const Text('Alarm'),
-                    new Text(
-                      time,
-                      style: const TextStyle(
-                        color: CupertinoColors.inactiveGray
-                      ),
-                    ),
-                  ]
+                    ]
                 ),
               ),
+              _buildCountdownTimerPicker(context),
             ],
           ),
         ),
       ),
     );
   }
-}
+}

packages/flutter/lib/cupertino.dart

@@ -13,6 +13,7 @@ export 'src/cupertino/app.dart';
 export 'src/cupertino/bottom_tab_bar.dart';
 export 'src/cupertino/button.dart';
 export 'src/cupertino/colors.dart';
+export 'src/cupertino/date_picker.dart';
 export 'src/cupertino/dialog.dart';
 export 'src/cupertino/icons.dart';
 export 'src/cupertino/localizations.dart';