Developer Thoughts - Flutter Clock Challenge

Hello Everyone, I am Tommy, developer from Xenyo and I am writing this post to share some of my experiences in Flutter Apps. As Flutter becomes more and more popular in 2020, I think using flutter in app development will be the trend and mainstream, therefore I take the Flutter Clock Challenge organized by Google & Lenovo, and build my “Hello World” flutter starter app.

My first impression of Flutter is that it is extremely easy. Although I am a web developer for my company, it is simple for me to learn on Flutter since Flutter already has many built-in widget (like component). Once you know about them, you can easily build whatever the things you want (Even animation, they have plenty of widget to handle it). Flutter is all about “Widget”, “Widget” and “Widget” …

Here is some widgets in Flutter: https://flutter.dev/docs/development/ui/widgets

Once it is a widget, you can reuse it as many times as you want.

Taking the Flutter Clock Challenge

Actually, nothing is hard in Flutter or Dart.

BUT in order to make a clock that people will really choose and watch it day by day, it must be some attractive things from the clock. So our team had thought about the animation on this clock for a couple of days. We finally decided to make a ripple effect background to tell people if it is raining outside as this animation will only show when the weather condition is rainy and thunderstorm.

I first plan to use Rive Flare to handle the animation. Flare really impresses me too. It is similar to Flash, but the crazy thing is their skeletal animation. It really makes Flare stand out and you can use them to animate anything.

After testing Flare for a while, I realized that I can simply use Flutter to draw the ripple effect since I want to control the variety of animation by different variables. It is new insight for me since we seldom do a big animation from programming in the Web Development world. Combing animation widget and the custom painter in Flutter produces my nice looking water ripple effect and I can change any parameters as I want. That’s moved my clock to the next level.

Animation with control variables
 

Conclusion

I really like Flutter since it really makes things simpler (Android & IOS native support, dart package management, hot reload debugging, plenty of built-in widgets, even web support).  I believe Flutter will become the mainstream in app development as it has more and more features coming out. Everyone should start to learn on it and build your first Flutter app.

My Final Flutter Clock

Thanks for reading and stay tuned!