Face Detection in Flutter using ML Kit (No Backend Required)
A production-grade guide to building real-time on-device face detection in Flutter using clean architecture and GetX.
Introduction
Face detection is one of the most widely used computer vision capabilities in modern mobile applications. From camera filters and augmented reality to identity verification and accessibility tools, detecting faces in real time is a foundational building block for many advanced features.
While many tutorials demonstrate how to detect a face in Flutter, most stop once the demo works on an emulator. Real applications require much more: stable camera streaming, correct coordinate transformations, efficient frame processing, and a maintainable architecture that can evolve with the application.
In this guide we will build a production-grade Flutter application that performs real-time face detection entirely on the device using Google ML Kit.
The application runs without:
• a backend server• API keys for inference• network connectivity
All processing occurs locally on the device.
Along the way we will explore several production concerns:
Structuring ML features with clean architecture
Managing camera streams and throttling frame processing
Mapping camera coordinates to screen coordinates correctly
Avoiding common state-management pitfalls with GetX
Debugging camera applications on physical devices
All code examples in this article were tested on a Samsung Galaxy M13 running Android 13, which revealed several edge cases that do not appear in emulators.
Project Demo
The final application performs real-time face detection directly from the device camera.
Features included in the demo:
Live camera preview
Real-time face detection
Bounding boxes over detected faces
Facial landmarks and contours
Smile and eye-open probability classification
Face tracking across frames
Front and rear camera switching
Because detection runs entirely on-device, the feature works offline with extremely low latency.
Typical performance on a mid-range Android device:
MetricObserved ValueDetection latency10–30 msCamera preview30 fpsDetection pipeline5–8 fpsNetwork usage0
Why On-Device Face Detection?
A traditional approach to computer vision involves sending camera frames to a cloud API for processing.
This architecture introduces several drawbacks:
Latency — every frame must travel to a server and back.
Offline failure — the feature stops working without connectivity.
Privacy concerns — captured images are transmitted to third-party infrastructure.
Google ML Kit provides an alternative: on-device machine learning inference.
The face detection model runs locally within the mobile application process. This eliminates network overhead and ensures that user data never leaves the device.
ApproachLatencyOfflinePrivacyCloud API80–400 msNoImages leave deviceML Kit On-Device10–30 msYesImages stay in memory
For camera-based experiences that require real-time interaction, on-device inference is the only practical solution.
Application Architecture
The application follows a three-layer clean architecture where dependencies always flow inward.
Presentation Layer│├── FaceDetectionScreen├── FaceDetectionController (GetX)└── FaceOverlayPainterDomain Layer│├── Entities├── Repository Interfaces└── Use CasesData Layer│├── CameraDataSource├── FaceDetectorDataSource└── FaceDetectionRepositoryImpl
Each layer has a clearly defined responsibility:
Data Layer
Responsible for interacting with external frameworks and services.This is the only layer that imports ML Kit and camera libraries.
Domain Layer
Contains pure Dart business logic including entities, repository interfaces, and use cases.The domain layer has no dependency on Flutter or platform APIs.
Presentation Layer
Responsible for user interaction, UI rendering, and state management through GetX.
This separation ensures the detection pipeline can be tested independently of camera hardware.
Setting Up ML Kit
Dependencies
Add the following packages to your pubspec.yaml.
dependencies: google_mlkit_face_detection: ^0.11.0 camera: ^0.10.5 permission_handler: ^11.3.0 get: ^4.6.6 get_it: ^7.6.7
Android Configuration
ML Kit requires a minimum SDK version of 21 and camera permission.
AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA" />
build.gradle
android { defaultConfig { minSdkVersion 21 }}
iOS Configuration
Add camera permission to Info.plist.
<key>NSCameraUsageDescription</key><string>Camera access is required to detect faces on this device.</string>
Initializing the Face Detector
The ML Kit detector should be created once and reused across frames.
final detector = FaceDetector( options: FaceDetectorOptions( enableLandmarks: true, enableClassification: true, enableTracking: true, minFaceSize: 0.1, performanceMode: FaceDetectorMode.fast, ),);
Enabling tracking allows ML Kit to maintain a stable ID for each detected face across frames.
Camera Setup
The camera stream provides raw frames that are processed by the detection pipeline.
One critical detail is selecting the correct image format depending on the platform.
CameraController( camera, ResolutionPreset.medium, enableAudio: false, imageFormatGroup: Platform.isAndroid ? ImageFormatGroup.nv21 : ImageFormatGroup.bgra8888,);
Using an incorrect format results in zero detections with no visible error, making it one of the most confusing bugs during development.
Converting Camera Frames to InputImage
The camera frame must be converted into an ML Kit InputImage.
InputImage _convertCameraImage(CameraImage image) { final WriteBuffer allBytes = WriteBuffer(); for (final plane in image.planes) { allBytes.putUint8List(plane.bytes); } final bytes = allBytes.done().buffer.asUint8List(); final Size imageSize = Size( image.width.toDouble(), image.height.toDouble(), ); final camera = cameras[currentCameraIndex]; final rotation = InputImageRotationValue.fromRawValue( camera.sensorOrientation) ?? InputImageRotation.rotation0deg; final format = InputImageFormatValue.fromRawValue( image.format.raw) ?? InputImageFormat.nv21; final metadata = InputImageMetadata( size: imageSize, rotation: rotation, format: format, bytesPerRow: image.planes.first.bytesPerRow, ); return InputImage.fromBytes( bytes: bytes, metadata: metadata, ); }
Frame Throttling
Camera streams often deliver frames at 30 frames per second.
Running detection on every frame can overload mid-range devices.
A simple flag ensures only one detection runs at a time.
if (_isProcessing) return;_isProcessing = true;await detectFaces(image);_isProcessing = false;
This maintains smooth camera preview while keeping inference latency under control.
The Coordinate Transform Problem
Face coordinates returned by ML Kit are expressed in image space, not screen space.
The overlay must therefore transform coordinates from the camera image buffer to the device display.
Three operations are required:
Rotate coordinates based on the camera sensor orientation.
Scale coordinates to match the screen dimensions.
Mirror the x-axis when using the front camera.
Failing to apply these transformations correctly leads to bounding boxes appearing offset, stretched, or mirrored.
Handling this mapping correctly is essential for building reliable camera overlays.
State Management with GetX
GetX provides a lightweight approach to managing application state.
However, several pitfalls can cause runtime issues.
Observable Values
Reactive variables must be wrapped using Rx types.
final rawImageSize = Rxn<Size>();
Assignments update the .value property:
rawImageSize.value = Size(width, height);
Using Obx Correctly
Obx widgets rebuild automatically when observables change.
Obx(() { final imgSize = controller.rawImageSize.value; if (imgSize == null) return const SizedBox.shrink(); return CustomPaint( painter: FaceOverlayPainter(imageSize: imgSize), );})
Async Cleanup
Camera streams must be stopped before disposing the controller.
@overrideFuture<void> onClose() async { await cameraController?.stopImageStream(); await cameraController?.dispose(); super.onClose();}
Failing to await cleanup often causes platform exceptions during hot reload or navigation.
Drawing the Face Overlay
The overlay is rendered using a CustomPainter.
Performance considerations are important when drawing overlays on every frame.
Paint objects should be reused instead of created inside the paint() method to avoid unnecessary garbage collection.
The shouldRepaint method must also compare actual face data rather than list references to ensure updates occur correctly.
Performance on Real Devices
Testing on a Samsung Galaxy M13 (Exynos 850) produced the following measurements:
MetricValueSingle face detection12–18 msThree faces detection20–28 msDetection pipeline5–8 fpsCamera preview30 fps
Because detection runs on a background thread internally, the UI thread remains responsive during inference.
For mid-range hardware, ResolutionPreset.medium provides the best balance between image clarity and detection speed.
Testing the Detection Pipeline
The architecture allows the face detection pipeline to be tested without camera hardware.
A mock repository can simulate detection results.
class MockFaceDetectionRepository extends Mock implements FaceDetectionRepository {}
Unit tests can verify controller behavior using predetermined detection outputs.
This significantly improves maintainability and confidence when refactoring.
Conclusion
On-device face detection is now practical on modern mobile hardware. Using ML Kit, Flutter applications can implement real-time computer vision features without relying on external infrastructure.
However, building a reliable camera feature requires careful attention to several details: camera image formats, sensor orientation, coordinate transforms, state management, and asynchronous lifecycle handling.
By structuring the application around clean architecture principles and isolating ML dependencies in the data layer, the resulting system becomes easier to maintain, test, and extend.
The patterns presented in this article provide a solid foundation for integrating advanced computer vision capabilities into Flutter applications.
Future Improvements
Possible extensions for this project include:
Face mesh rendering for augmented reality effects
Face recognition using embedding models
Real-time emotion detection
GPU-accelerated inference pipelines
Recording annotated video streams
These additions would transform the demo into a fully featured real-time computer vision toolkit for Flutter applications.
Source Code
The full source code is available in the project repository, accompanying this article.
https://github.com/RitutoshAeologic/face_detection
Thanks for reading this article
If I got something wrong? Let me know in the comments. I would love to improve.
Clap
If this article helps you.
Feel free to connect with us:And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project hourly or full-time as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
Need help building production-grade Flutter apps? FlutterDevs helps teams ship faster with solid architecture, better UX, and practical AI features. Reach us at support@flutterdevs.com.
