Added countdown constructor and did some refactoring.

example/lib/main.dart

@@ -16,6 +16,7 @@ class MyApp extends StatelessWidget {
       routes: {
         'flip_image': (_) => AnimatedImagePage(),
         'flip_clock': (_) => FlipClockPage(),
+        'countdown_clock': (_) => CountdownClockPage(),
       },
       home: HomePage(),
     );
@@ -40,6 +41,10 @@ class HomePage extends StatelessWidget {
             title: Text('FlipClock'),
             onTap: () => Navigator.of(context).pushNamed('flip_clock'),
           ),
+          ListTile(
+            title: Text('CountdownClock'),
+            onTap: () => Navigator.of(context).pushNamed('countdown_clock'),
+          ),
         ],
       ),
     );
@@ -157,3 +162,25 @@ class FlipClockPage extends StatelessWidget {
     );
   }
 }
+
+class CountdownClockPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('FlipClock'),
+      ),
+      body: Container(
+        child: Center(
+          child: FlipClock.countdown(
+            duration: Duration(minutes: 1),
+            digitColor: Colors.white,
+            backgroundColor: Colors.black,
+            digitSize: 48.0,
+            borderRadius: const BorderRadius.all(Radius.circular(3.0)),
+          ),
+        ),
+      ),
+    );
+  }
+}

example/pubspec.lock

@@ -42,7 +42,7 @@ packages:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.14.6"
+    version: "1.14.11"
   convert:
     dependency: transitive
     description:
@@ -63,7 +63,7 @@ packages:
       name: csslib
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.14.4+1"
+    version: "0.14.5"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -77,7 +77,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.5"
+    version: "0.0.6"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -108,7 +108,7 @@ packages:
       name: html
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.13.3+2"
+    version: "0.13.3+3"
   http:
     dependency: transitive
     description:
@@ -171,14 +171,14 @@ packages:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.2+1"
+    version: "0.12.3+1"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.5"
+    version: "1.1.6"
   mime:
     dependency: transitive
     description:
@@ -323,7 +323,7 @@ packages:
       name: string_scanner
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.3"
+    version: "1.0.4"
   term_glyph:
     dependency: transitive
     description:
@@ -337,14 +337,14 @@ packages:
       name: test
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.41"
+    version: "1.3.0"
   typed_data:
     dependency: transitive
     description:
       name: typed_data
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.5"
+    version: "1.1.6"
   utf:
     dependency: transitive
     description:
@@ -388,4 +388,4 @@ packages:
     source: hosted
     version: "2.1.15"
 sdks:
-  dart: ">=2.0.0-dev.62.0 <=2.0.0-dev.69.5.flutter-eab492385c"
+  dart: ">=2.0.0-dev.68.0 <3.0.0"

lib/flip_panel.dart

@@ -13,13 +13,22 @@ class FlipClock extends StatelessWidget {
   final DateTime startTime;
   final EdgeInsets spacing;
 
+  /// Set countdown to true to have a countdown timer.
+  final bool countdown;
+  final bool _showHours;
+
+  /// Called when the countdown clock hits zero.
+  VoidCallback onDone;
+
   FlipClock({
     Key key,
     @required DigitBuilder digitBuilder,
     @required Widget separator,
     @required this.startTime,
+    this.countdown = false,
     this.spacing = const EdgeInsets.symmetric(horizontal: 2.0),
-  })  : _digitBuilder = digitBuilder,
+  })  : _showHours = true,
+        _digitBuilder = digitBuilder,
         _separator = separator;
 
   FlipClock.simple({
@@ -30,7 +39,54 @@ class FlipClock extends StatelessWidget {
     @required double digitSize,
     BorderRadius borderRadius = const BorderRadius.all(Radius.circular(0.0)),
     this.spacing = const EdgeInsets.symmetric(horizontal: 2.0),
-  }) {
+  })  : countdown = false,
+        _showHours = true {
+    _digitBuilder = (context, digit) => Container(
+          alignment: Alignment.center,
+          width: 44.0,
+          height: 60.0,
+          decoration: BoxDecoration(
+            color: backgroundColor,
+            borderRadius: borderRadius,
+          ),
+          child: Text(
+            '$digit',
+            style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: digitSize,
+                color: digitColor),
+          ),
+        );
+    _separator = Container(
+      decoration: BoxDecoration(
+        color: backgroundColor,
+        borderRadius: borderRadius,
+      ),
+      width: 24.0,
+      height: 60.0,
+      alignment: Alignment.center,
+      child: Text(
+        ':',
+        style: TextStyle(
+          fontSize: digitSize,
+          color: digitColor,
+        ),
+      ),
+    );
+  }
+
+  FlipClock.countdown({
+    Key key,
+    @required Duration duration,
+    @required Color digitColor,
+    @required Color backgroundColor,
+    @required double digitSize,
+    BorderRadius borderRadius = const BorderRadius.all(Radius.circular(0.0)),
+    this.spacing = const EdgeInsets.symmetric(horizontal: 2.0),
+    this.onDone,
+  })  : countdown = true,
+        startTime = DateTime(2018, 1, 0, 0, 0, duration.inSeconds),
+        _showHours = duration.inHours > 0 {
     _digitBuilder = (context, digit) => Container(
           alignment: Alignment.center,
           width: 44.0,
@@ -67,91 +123,72 @@ class FlipClock extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    int seconds = startTime.second;
-    int minutes = startTime.minute;
-    int hours = startTime.hour;
     var time = startTime;
 
     final timeStream =
         Stream<DateTime>.periodic(Duration(milliseconds: 1000), (_) {
-      time = time.add(const Duration(seconds: 1));
+      var oldTime = time;
+      time = time.add(Duration(seconds: countdown ? -1 : 1));
+      if (oldTime.day != time.day) {
+        time = oldTime;
+        if (onDone != null) onDone();
+      } 
       return time;
     }).asBroadcastStream();
 
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        // Hours
-        Padding(
-          padding: spacing,
-          child: FlipPanel<int>.stream(
-            itemStream: timeStream.map((time) => time.hour ~/ 10),
-            itemBuilder: _digitBuilder,
-            duration: const Duration(milliseconds: 450),
-            initValue: hours ~/ 10,
-          ),
-        ),
-        Padding(
-          padding: spacing,
-          child: FlipPanel<int>.stream(
-            itemStream: timeStream.map((time) => time.hour % 10),
-            itemBuilder: _digitBuilder,
-            duration: const Duration(milliseconds: 450),
-            initValue: hours % 10,
-          ),
-        ),
+    var digitList = <Widget>[];
+    // TODO(efortuna): Instead, allow the user to specify the format of time instead.
+    // Add hours if appropriate.
+    if (_showHours) {
+      digitList.addAll([_buildSegment(timeStream, (DateTime time) => time.hour ~/ 10,
+            (DateTime time) => time.hour % 10, startTime),
 
         Padding(
           padding: spacing,
           child: _separator,
-        ),
-
+        )]);
+    }
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: digitList..addAll([
         // Minutes
-        Padding(
-          padding: spacing,
-          child: FlipPanel<int>.stream(
-            itemStream: timeStream.map((time) => time.minute ~/ 10),
-            itemBuilder: _digitBuilder,
-            duration: const Duration(milliseconds: 450),
-            initValue: minutes ~/ 10,
-          ),
-        ),
-        Padding(
-          padding: spacing,
-          child: FlipPanel<int>.stream(
-            itemStream: timeStream.map((time) => time.minute % 10),
-            itemBuilder: _digitBuilder,
-            duration: const Duration(milliseconds: 450),
-            initValue: minutes % 10,
-          ),
-        ),
+        _buildSegment(timeStream, (DateTime time) => time.minute ~/ 10,
+            (DateTime time) => time.minute % 10, startTime),
 
         Padding(
           padding: spacing,
           child: _separator,
         ),
 
         // Seconds
-        Padding(
-          padding: spacing,
-          child: FlipPanel<int>.stream(
-            itemStream: timeStream.map((time) => time.second ~/ 10),
-            itemBuilder: _digitBuilder,
-            duration: const Duration(milliseconds: 450),
-            initValue: seconds ~/ 10,
-          ),
+        _buildSegment(timeStream, (DateTime time) => time.second ~/ 10,
+            (DateTime time) => time.second % 10, startTime)
+      ]),
+    );
+  }
+
+  _buildSegment(Stream<DateTime> timeStream, Function tensDigit,
+      Function onesDigit, DateTime startTime) {
+    return Row(children: [
+      Padding(
+        padding: spacing,
+        child: FlipPanel<int>.stream(
+          itemStream: timeStream.map<int>(tensDigit),
+          itemBuilder: _digitBuilder,
+          duration: const Duration(milliseconds: 450),
+          initValue: tensDigit(startTime),
         ),
-        Padding(
-          padding: spacing,
-          child: FlipPanel<int>.stream(
-            itemStream: timeStream.map((time) => time.second % 10),
-            itemBuilder: _digitBuilder,
-            duration: const Duration(milliseconds: 450),
-            initValue: seconds % 10,
-          ),
+      ),
+      Padding(
+        padding: spacing,
+        child: FlipPanel<int>.stream(
+          itemStream: timeStream.map<int>(onesDigit),
+          itemBuilder: _digitBuilder,
+          duration: const Duration(milliseconds: 450),
+          initValue: onesDigit(startTime),
         ),
-      ],
-    );
+      ),
+    ]);
   }
 }