Flutter Challenge: Egg Timer (full code exercise)

Flutter Challenge: Egg Timer UI

This post is one in a series of Flutter explorations. In my Flutter Challenges I will attempt to stress test Flutter’s promise of a highly customizable, rapid development UI framework.

I found a mockup of an egg timer UI on Dribbble by user ultranoir. In this Flutter Challenge I create a Flutter implementation of ultranoir’s mockup.

Mockup credit to Dribbble user ultranoir
Mockup credit to Dribbble user ultranoir

Learnings

Canvas Rendering: this Flutter Challenge requires working directly with a Canvas to render the individual tick marks, minute text, and timer arrow.

Circles: this Flutter Challenge needs to display a number of circles on the screen — those circles also require gradient fills and shadows. In some environments working with circles can be difficult, but in Flutter the Container Widget comes with everything we need.

Animation: this Flutter Challenge requires a number of basic animations for fading in/out, sliding, and turning the dial on “reset.”

New Dart/Flutter Package

I’ve created a Package called “fluttery” where I have started collecting prototyping tools that I build during Flutter Challenges.

You can find fluttery here:

https://pub.dartlang.org/packages/fluttery

Flutter vs Android/iOS

An experienced Android or iOS developer could probably build this UI in roughly the same amount of time that it took me to do it in Flutter. However, I got 2 platforms for the price of 1. Therefore, this project is a legitimate 50% time reduction vs traditional development.

One big improvement that Flutter offers over Android in general is the ability to quickly and easily compose user interfaces. In Android if you want a custom View then you need to assemble a bunch of style attributes in an XML file and then process those attributes in the constructor. This friction leads many developers to avoid custom View composition at all, and instead drop huge hierarchies of SDK widgets into a single XML file that is then managed by a single View or Fragment. These are poor decisions that are promoted by a high friction API. This Flutter Challenge clearly demonstrates how easily Widgets can be composed. There is no cost to breaking out a custom Widget. You can literally sketch in code without even paying a cost in render quality or janky animations. That’s a game changer.

Suggestions? Requests?

Did I do something stupid in my implementation? Let me know the smart way to do it in the comments.

Have an interesting UI that would make for a good challenge? Post a link and maybe I’ll get to it at some point.

If you watched the YouTube video and enjoyed the content, please give the video a Like. Be sure to Subscribe to the YouTube channel to be notified of future Flutter Challenges.

Project References

Flutter documentation for the CustomPaint widget: https://docs.flutter.io/flutter/widgets/CustomPaint-class.html

Flutter documentation for visual effect widgets: https://flutter.io/widgets/painting/

Flutter documentation for gesture control: https://flutter.io/gestures/

Flutter tutorial for animations: https://flutter.io/tutorials/animation/

DaFont for free fonts: https://www.dafont.com