Flutter UI challenge: rotary passcode (static design)

Retro rotary passcode input UI challenge made with Flutter. In the first part, the static design of the UI is implemented.

Some time ago, I implemented the rotary passcode UI and shared the code with the Flutter community. I may not be the sharpest tool in the shed, and I also promised to create an in-depth tutorial on how I implemented it. In this article, I will share the first part of the tutorial, which will cover the static design of the rotary passcode UI.

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

• Overview
• Common UI elements
• Passcode input
• Rotary dial input
• Passcode digits indicator
• Summary

Overview

This is the original Design challenge I found on Twitter: