yeasin50 / Rotary_phone_lock

Rotate Dial Lock

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Rotary dial Locker

Null_safety OK Flutter-v2.0.3 Dart-v2.12.2 channel-stable PyPI license

Dependencies :

dependencies dependencies dependencies


OutPut Gif

How it works

Most magic handle by GuesterDetector.

  • onPanEnd
  • onPanDown
  • onPanUpdate

SpringHouse, 1st we locate where users tap on screen using localPosition offset. for UI tap update Transform angle will update automatically until it reaches its max point. We also confirm the digit by angle. Then, using Timer, we minimize the value and change the UI until it reaches the original position.

UI State handle using Dot Provider.



Dots Animation

Dot Anime

For the Dot animation you can check anim_tester.dart


Text Animation


There are also different approaches that can be applied, like doing most parts just using CustomPainter. Best approach will be using images. Digit detection can handle touchPoint + radius. Rotate direction can be improved by calculating angles. I gave users more flexibility 😁.

But for wheels , it's easy to do with images. Also paint maker sites can help to make this shape with a short amount of time. There are some unnecessary methods for test & future use purposes.

inspiration LinkedIn Video

Know more about Rotary dial


License & copyright


Licensed under the MIT License.


About

Rotate Dial Lock

License:MIT License


Languages

Language:Dart 96.1%Language:HTML 2.9%Language:Swift 0.8%Language:Kotlin 0.2%Language:Objective-C 0.1%