📱 Read the story behind this build on LinkedIn
IMG_6814.MOV
A Motorola RAZR V3 recreated in Flutter — drawn entirely with the Canvas API (no image assets for the phone itself). Tap the closed phone to flip it open with a 3D clamshell animation, watch the boot animation, then use the keypad to navigate a small retro phone OS.
- Fully painted phone — the open and closed RAZR V3 are drawn with
CustomPainter(metallic gradients, glossy screen, buttons, hinge). - Interactive keypad — every key depresses with haptic feedback.
- Flip-open animation — tap to open (clamshell rotation), long-press to fold.
- Boot sequence — batwing + wordmark animation with a startup chime.
- Retro phone OS — home screen (live clock, signal, battery over a retro wallpaper), an app menu grid, a dialer, and a working calculator.
- Tap the closed phone to open it; long-press the open phone to close it.
- Home: number keys open the dialer; Menu (left soft key) or OK opens the app grid.
- Menu: D-pad moves the selection, OK opens, red end / right soft key goes back.
- Calculator: digits type,
*= decimal, D-pad picks the operator (▲ +, ▼ −, ◀ ÷, ▶ ×), OK /#= equals, left soft key clears.
| File | Purpose |
|---|---|
lib/main.dart |
App entry point |
lib/razr_flip.dart |
Closed→open flip animation, boot handoff |
lib/razr_phone.dart |
Interactive open phone + key hit-testing, LCD host |
lib/razr_phone_painter.dart |
Open phone painter (body / hinge / keypad) |
lib/razr_closed_painter.dart |
Closed cover painter |
lib/boot_screen.dart |
Power-on animation + chime |
lib/razr_home.dart |
Idle home screen |
lib/razr_os.dart |
Screen router + menu / dialer / app / call / calculator screens |
lib/calculator_engine.dart |
Pure calculator logic (unit-tested) |
flutter pub get
flutter runflutter test