Flutter UI challenge: rotary passcode (animations)

Retro rotary passcode input UI challenge made with Flutter. The main focus of this part is motion design — animations.

In the previous part, we implemented all the static elements of the rotary passcode UI. In this article, I will cover the motion design part of the challenge — animations, gestures, transitions and other fancy eye candies visible on the screen.

Note: I moved this blog to my personal website. For a better reading experience, up to date articles, interactive code examples and some extra content FOR FREE, check kazlauskas.dev.

Table of Contents

• Animations overview
• Input mode button animation
• Passcode digits indicator animations
• Rotary dial animation
• Input mode change animation
• Summary

Animations overview

In Flutter, there are two types of code-based animations — implicit and explicit ones. For implicit animations, just select and use one of the pre-defined animation widgets from the Flutter library.