AuraApp — Flutter + Swift Native + Apple Vision Framework

Overview

AuraApp adalah project eksplorasi Flutter yang membuktikan decoupled architecture antara Flutter UI dan native iOS computation. Aplikasi memilih banyak foto dari galeri, mengirim path ke Swift via MethodChannel, lalu Swift menjalankan VNDetectFaceLandmarksRequest dari Apple Vision Framework untuk memetakan koordinat wajah dan menghitung skor berdasarkan Golden Ratio (Phi = 1.618).

Hasilnya dikembalikan ke Flutter sebagai leaderboard.

Tech & Libraries

Teknologi dan library yang dipakai atau disentuh di project ini:

Problem

Eksplorasi Flutter-to-Native bridging yang jujur membutuhkan kasus nyata di mana native computation tidak bisa digantikan oleh Dart. Apple Vision Framework (VNDetectFaceLandmarksRequest) adalah contoh ideal: face landmark detection berjalan di Neural Engine iPhone secara offline, tidak ada Dart library yang setara, dan hasilnya harus dikembalikan ke Flutter UI untuk dirender.

Ini memaksa pemahaman MethodChannel, serialisasi data lintas bahasa, dan Clean Architecture yang memisahkan bridge dari business logic.

My Role & Ownership

Solo builder: Clean Architecture Flutter + Swift, MethodChannel bridge, Apple Vision integration, Golden Ratio algorithm, animasi UI.

Technical Approach

Membangun iOS app Flutter dengan Clean Architecture tiga lapisan. Di sisi Swift (AppDelegate.swift), MethodChannel menangkap request, mengkonversi path ke UIImage, menjalankan VNDetectFaceLandmarksRequest, mengekstrak koordinat wajah (mata, bibir, hidung, kontur), menghitung Euclidean distance antar titik, membandingkan rasio dengan Phi (1.618), dan mengembalikan array Dictionary ke Flutter.

Di sisi Flutter, NativeAuraDataSource memanggil MethodChannel.invokeMethod(), AuraModel mem-parse Map dari Swift ke entity Dart, AuraRepositoryImpl mengkonversi model ke AuraEntity, CalculateAuraUseCase mengorkestrasikan eksekusi, dan AuraCubit mengelola state (Initial, Scanning, Success, Error). UI menampilkan animasi laser scanner saat Scanning dan glassmorphism leaderboard card saat Success.

Architecture Notes

Tiga lapisan Clean Architecture: Data (NativeAuraDataSource memanggil MethodChannel, AuraModel mem-parse Map dari Swift, AuraRepositoryImpl mengkonversi ke Entity), Domain (AuraEntity, IAuraRepository, CalculateAuraUseCase), dan Presentation (AuraCubit dengan state Initial/Scanning/Success/Error, UI yang murni reaktif terhadap state).

Domain layer tidak tahu bahwa data berasal dari Apple Vision atau MethodChannel. IAuraRepository hanya mendefinisikan kontrak calculateAuraScores(List<String> paths), dan implementasinya di Data layer yang mengurus detail bridge. Ini memungkinkan unit test Domain dan UseCase tanpa menyentuh native code.

Trade-offs

Memilih MethodChannel alih-alih FFI untuk kasus ini karena Apple Vision Framework adalah Objective-C/Swift API yang tidak expose C function pointer, sehingga FFI tidak applicable. MethodChannel asynchronous cocok di sini karena Vision processing memang butuh waktu dan tidak perlu synchronous seperti audio DSP.

Platform eksklusif iOS karena Vision Framework adalah teknologi Apple; Android tidak punya equivalent yang bisa dipakai dengan cara yang sama. Input terbatas ke galeri (bukan live camera) untuk menjaga scope MVP tetap fokus pada demonstrasi bridge dan Vision integration.

Implementation Highlights

• MethodChannel sebagai bridge: Flutter mengirim list path via invokeMethod(), Swift menangkap di AppDelegate, menjalankan Vision, dan mengembalikan array Dictionary secara asynchronous.
• Vision-Phi Symmetry Engine: VNDetectFaceLandmarksRequest mengekstrak koordinat wajah, Swift menghitung Euclidean distance antar titik, membandingkan rasio dengan Phi (1.618), dan mengkonversi deviasi ke skor 0-100.
• Satu binary tunggal: Swift sebagai native host, Flutter dikompilasi ke C++ dan ditanam di dalam host yang sama; MethodChannel berkomunikasi via internal RAM bukan localhost.
• Clean Architecture: NativeAuraDataSource sebagai satu-satunya caller MethodChannel, AuraRepositoryImpl sebagai konverter Model ke Entity, CalculateAuraUseCase sebagai orkestrator, AuraCubit sebagai state manager.
• Animasi laser scanner via CustomPaint + AnimationController dipicu saat state Scanning, glassmorphism leaderboard card via BackdropFilter saat state Success.

Results

• Menunjukkan pemahaman cara kerja Flutter-to-Native bridge via MethodChannel, bagaimana data diserialkan dari Dart ke Swift dan kembali, serta bagaimana memisahkan native computation dari business logic lewat Clean Architecture sehingga layer Domain tidak tahu bahwa data berasal dari Apple Vision.
• Face landmark detection offline via Apple Vision Framework (VNDetectFaceLandmarksRequest) di Neural Engine iPhone.
• Golden Ratio scoring: Euclidean distance antar titik wajah dibandingkan dengan Phi (1.618) untuk menghasilkan skor 0-100.
• Clean Architecture dengan MethodChannel sebagai satu-satunya titik kontak ke native iOS, terisolasi di Data layer.
• Animasi laser scanner (CustomPaint + AnimationController) dan glassmorphism leaderboard card (BackdropFilter).
• Satu binary iOS: Swift dan Flutter dikompilasi bersama, MethodChannel berkomunikasi via internal RAM bukan network.
• Face landmark detection offline via Apple Neural Engine, tanpa internet.
• Public proof: repo publik di GitHub dengan dokumentasi TRD dan flowchart MethodChannel bridge.

Links

• GitHub Repository