Building an Eyewear App in Flutter | 10-Day Challenge Day 6
Isah Neziru Dev
0:00 / 0:00
Building an Eyewear App in Flutter | 10-Day Challenge Day 6
16 просмотров · 5 дн. назад
Isah Neziru Dev
2 подписчика
16 просмотров · 5 дн. назад
Day 6 of my 10-day Flutter challenge: 10 days, 10 brands, 10 apps. Day 6 is IRIDEL, a fictional eyewear house. The onboarding is an eye test: every answer (name, face shape, where you'll wear them, lens tint) brings the next line of a blurred chart into focus, with Skip always visible. Then a "you're 20/20" reveal draws your frame on, the home is a lookbook ranked for you, and the signature feature is the Try-On Mirror: drag the frames, let go near the eyes and they spring-snap into place, with a live fit readout in millimetres. Then look through the lens at your place, in your tint.
In this video I walk you through how I built it, step by step:
• A fictional brand, palette and type (Instrument Serif, Inter and DM Mono)
• Project setup with flutter_bloc and strict analysis rules
• Feature-first architecture: wearer, catalog, onboarding, reveal, lookbook, try_on
• Theme tokens and global widgets: AppText, AppButton, AppTextField
• Bloc: WearerBloc, OnboardingBloc, TryOnBloc, with drag offsets kept in a ValueNotifier
• An eye-test onboarding with animated blur per line
• A 20/20 reveal: one controller, three intervals, and a frame drawn on with computeMetrics/extractPath
• A lookbook ranked by a pure, unit-tested LookbookCurator, plus a radial menu
• The Try-On Mirror: spring snap, FitMath and a live fit score
• Look through the lens: a ClipPath circle reveal and a single ColorFilter.matrix tint
• 29 tests: unit, bloc_test and widget flow tests
Chapters
0:00 The final app
0:55 The brand
2:09 Project setup and strict lints
2:37 Feature-first folder structure
3:11 Global widgets
3:27 Why Bloc, and narrow rebuilds
4:34 Personalised eye-test onboarding
6:20 The personalised lookbook
7:21 Signature: the Try-On Mirror
9:37 Performance decisions
10:11 Tests
10:57 The code
11:16 The final app, again
Code (MIT): https://github.com/isah27/iridel-flut...
Note: IRIDEL is a fictional brand created for this challenge. It is not a real company and is not affiliated with any eyewear maker. All frame names and prices are invented, and the try-on is a drawn portrait, not a camera.
Which brand should I build for Day 7? Tell me in the comments.
#Flutter #FlutterDev #10DayChallenge