Перейти к содержимому

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