{"id":15642852,"url":"https://github.com/rishit-dagli/face-recognition_flutter","last_synced_at":"2025-04-18T13:32:48.439Z","repository":{"id":56701401,"uuid":"239958658","full_name":"Rishit-dagli/Face-Recognition_Flutter","owner":"Rishit-dagli","description":"A sample Face recognition app using Flutter and Firebase ML Kit","archived":false,"fork":false,"pushed_at":"2020-10-24T08:15:54.000Z","size":28640,"stargazers_count":63,"open_issues_count":0,"forks_count":21,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-29T16:02:52.180Z","etag":null,"topics":["face-recognition","face-recognition-flutter","firebase","firebase-ml-vision","firebase-mlkit","flutter","flutter-apps","flutter-examples","machine-learning","mlkit"],"latest_commit_sha":null,"homepage":"","language":"Makefile","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rishit-dagli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.buymeacoffee.com/rishitdagli","http://paypal.me/alpadagli"]}},"created_at":"2020-02-12T08:12:35.000Z","updated_at":"2024-06-04T09:27:44.000Z","dependencies_parsed_at":"2022-08-15T23:31:38.795Z","dependency_job_id":null,"html_url":"https://github.com/Rishit-dagli/Face-Recognition_Flutter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rishit-dagli%2FFace-Recognition_Flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rishit-dagli%2FFace-Recognition_Flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rishit-dagli%2FFace-Recognition_Flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rishit-dagli%2FFace-Recognition_Flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rishit-dagli","download_url":"https://codeload.github.com/Rishit-dagli/Face-Recognition_Flutter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223779728,"owners_count":17201287,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["face-recognition","face-recognition-flutter","firebase","firebase-ml-vision","firebase-mlkit","flutter","flutter-apps","flutter-examples","machine-learning","mlkit"],"created_at":"2024-10-03T11:57:49.235Z","updated_at":"2024-11-09T03:15:03.908Z","avatar_url":"https://github.com/Rishit-dagli.png","language":"Makefile","funding_links":["https://www.buymeacoffee.com/rishitdagli","http://paypal.me/alpadagli"],"categories":[],"sub_categories":[],"readme":"# Face Recognition_Flutter [![Twitter](https://img.shields.io/twitter/url?style=social\u0026url=https%3A%2F%2Fgithub.com%2FRishit-dagli%2FFace-Recognition_Flutter)](https://twitter.com/intent/tweet?text=Wow:\u0026url=https%3A%2F%2Fgithub.com%2FRishit-dagli%2FFace-Recognition_Flutter)\n\n![Flutter CI](https://github.com/Rishit-dagli/Face-Recognition_Flutter/workflows/Flutter%20CI/badge.svg)\n[![Twitter Follow](https://img.shields.io/twitter/follow/rishit_dagli?style=social)](https://twitter.com/intent/follow?screen_name=rishit_dagli)\n[![GitHub followers](https://img.shields.io/github/followers/Rishit-dagli?label=Follow\u0026style=social)](https://github.com/Rishit-dagli)\n\nA project which shows you how you code use AI algorithms with Flutter, here I show the example of a Face recognition application with \nFlutter and FireBase. I also gave a talk about this at [Flutter Mumbai Community](https://www.meetup.com/Mumbai-Flutter/) and \n[Flutter Bangalore](https://www.meetup.com/flutter-bangalore-group/events/272057891/). I strongly \nadvise you to check out the [talk](https://github.com/Rishit-dagli/Face-Recognition_Flutter/tree/master/talk) folder which has details\nregarding the talk.\n\n## Table of contents\n\n- [Introduction](#introduction)\n- [Key capabilities](#key-capabilities)\n- [Example (Face detection)](#example--face-detection-)\n  * [Adding Firebase to Flutter project](#adding-firebase-to-flutter-project)\n    + [Prerequisites](#prerequisites)\n    + [Create a Firebase project](#create-a-firebase-project)\n    + [Register your app with Firebase](#register-your-app-with-firebase)\n    + [Add a Firebase configuration file](#add-a-firebase-configuration-file)\n    + [Add FlutterFire plugins](#add-flutterfire-plugins)\n  * [Some Dependencies](#some-dependencies)\n  * [A simple Home Page UI](#a-simple-home-page-ui)\n    + [Startup UI](#startup-ui)\n    + [Adding a FAB](#adding-a-fab)\n  * [Work Flow](#work-flow)\n  * [Select an image](#select-an-image)\n  * [Load image for processing](#load-image-for-processing)\n  * [Perform face detection](#perform-face-detection)\n    + [Customising faceDetector](#customising-facedetector)\n    + [Get the bounding Box](#get-the-bounding-box)\n    + [Fixing a minor problem](#fixing-a-minor-problem)\n  * [Drawing over the image](#drawing-over-the-image)\n    + [Load images in canvas](#load-images-in-canvas)\n    + [Paint the faces](#paint-the-faces)\n    + [Another minor problem](#another-minor-problem)\n- [Examples](#examples)\n- [What next!](#what-next-)\n\n## Introduction\nA face recognition app using FLutter to demonstrate the use of Firebase SDKs and edge AI with Flutter\n\nML Kit is a mobile SDK that brings Google's machine learning expertise to Android and iOS apps in a powerful yet easy-to-use package. Whether you're new or experienced in\nmachine learning, you can implement the functionality you need in just a few lines of code. There's no need to have deep knowledge of neural networks or model optimization to \nget started. On the other hand, if you are an experienced ML developer, ML Kit provides convenient APIs that help you use your custom TensorFlow Lite models in your mobile apps.\n\nWatch this video for a better understanding-\n\n[![youtube.com/watch?v=ejrn_JHksws](http://img.youtube.com/vi/ejrn_JHksws/0.jpg)](http://www.youtube.com/watch?v=ejrn_JHksws \"Introducing ML Kit\")\n\n## Key capabilities\n\n1. Production-ready for common use cases \t\n\nML Kit comes with a set of ready-to-use APIs for common mobile use cases: recognizing text, detecting faces, identifying landmarks, scanning barcodes, labeling images, and identifying the language of text. Simply pass in data to the ML Kit library and it gives you the information you need.\n\n2. On-device or in the cloud \t\n\nML Kit’s selection of APIs run on-device or in the cloud. Our on-device APIs can process your data quickly and work even when there’s no network connection. Our cloud-based APIs, on the other hand, leverage the power of Google Cloud Platform's machine learning technology to give you an even higher level of accuracy.\n\n3. Deploy custom models \t\n\nIf ML Kit's APIs don't cover your use cases, you can always bring your own existing TensorFlow Lite models. Just upload your model to Firebase, and we'll take care of hosting and serving it to your app. ML Kit acts as an API layer to your custom model, making it simpler to run and use.\n\n![](https://github.com/Rishit-dagli/MLKit-Firebase/blob/master/images/ML%20kit%20capabilities.png)\n\n## Example (Face detection) \n\n### Adding Firebase to Flutter project\n\n#### Prerequisites\n\n*   Install your preferred editor or IDE.\n\n*   Make sure that your app meets the following requirements:\u003cbr\u003e\n        - Flutter SDK\u003cbr\u003e\n        - Uses Gradle 4.1 or later\u003cbr\u003e\n\n*    Set up a device or emulator for running your app. Emulators must use an emulator image with Google Play.\n\n*    [Install Flutter](https://flutter.io/get-started/install/) for your specific operating system, including the following:\u003cbr\u003e\n        - Flutter SDK\u003cbr\u003e\n        - Supporting libraries\u003cbr\u003e\n        - Platform-specific software and SDKs\u003cbr\u003e\n\n*    [Sign into Firebase](https://console.firebase.google.com/) using your Google account.\n\nIf you don't already have a Flutter app, you can complete the [Get Started: Test Drive](https://flutter.io/get-started/test-drive/#androidstudio) to create a new Flutter app using your preferred editor or IDE.\n\n#### Create a Firebase project\n\nBefore you can add Firebase to your Flutter app, you need to create a Firebase project to connect to your app. Visit Understand Firebase Projects to learn more about Firebase projects.\n\n\n*    In the Firebase console, click Add project, then select or enter a Project name.\n\n*    If you have an existing Google Cloud Platform (GCP) project, you can select the project from the dropdown menu to add Firebase resources to that project.\n\n*    (Optional) If you are creating a new project, you can edit the Project ID.\n\n*    Firebase automatically assigns a unique ID to your Firebase project. Visit Understand Firebase Projects to learn about how Firebase uses the project ID.\n*    After Firebase provisions resources for your Firebase project, you cannot change your project ID.\n*    To use a specific identifier, you must edit your project ID during this setup step.\n\n*    Click Continue.\n\n *   (Optional) Set up Google Analytics for your project, which enables you to have an optimal experience using any of the following Firebase products:\u003cbr\u003e\n    - Firebase Crashlytics\u003cbr\u003e\n    - Firebase Predictions\u003cbr\u003e\n    - Firebase Cloud Messaging\u003cbr\u003e\n    - Firebase In-App Messaging\u003cbr\u003e\n    - Firebase Remote Config\u003cbr\u003e\n    - Firebase A/B Testing\u003cbr\u003e\n\n *   When prompted, select to use an existing Google Analytics account or to create a new account.\n *   If you choose to create a new account, select your Analytics reporting location, then accept the data sharing settings and Google Analytics terms for your project.\n *   You can always set up Google Analytics later in the Integrations tab of your settings Project settings.\n\n*    Click Create project (or Add Firebase, if you're using an existing GCP project).\n\n*    Firebase automatically provisions resources for your Firebase project. When the process completes, you'll be taken to the overview page for your Firebase project in the Firebase console.\n\n#### Register your app with Firebase\n\nImportant: If you're releasing your Flutter app on both iOS and Android, register both the iOS and Android versions of your app with the same Firebase project.\n\n*    In the center of the Firebase console's project overview page, click the Android icon (plat_android) to launch the setup workflow.\n\n*    If you've already added an app to your Firebase project, click Add app to display the platform options.\n\n*    Enter your app's package name in the Android package name field.\n*    Make sure that you enter the ID that your app is actually using. You cannot add or modify this value after you register your app with your Firebase project.\n*        A package name is sometimes referred to as an application ID.\n\n*        Find this package name in your module (app-level) Gradle file, usually `app/build.gradle` (example package name: `com.yourcompany.yourproject`).\n\n*    (Optional) Enter other app information as prompted by the setup workflow.\u003cbr\u003e\n\n        - App nickname: An internal, convenience identifier that is only visible to you in the Firebase console\u003cbr\u003e\n\n        - Debug signing certificate SHA-1: A SHA-1 hash is required by Firebase Authentication (when using Google Sign In or phone number sign in) and Firebase Dynamic Links.\u003cbr\u003e\n\n*    Click Register app.\n\n#### Add a Firebase configuration file\n\n *   Click Download `google-services.json` to obtain your Firebase Android config file (`google-services.json`).\u003cbr\u003e\n        - You can download your Firebase Android config file again at any time.\u003cbr\u003e\n        - Make sure the config file is not appended with additional characters, like (2).\u003cbr\u003e\n        \n        \n*   Note: The Firebase config file contains unique, but non-secret identifiers for your project.\n\n*    Move your config file into the android/app directory of your Flutter app.\n\n*    To enable Firebase services in your Android app, add the google-services plugin to your Gradle files, as follows:\u003cbr\u003e\n\n      - In your root-level (project-level) Gradle file (android/build.gradle), add rules to include the Google Services Gradle plugin. Check that you have Google’s Maven repository, as well.\u003cbr\u003e\n\n```\nbuildscript {\n\n\trepositories {\n\t  // Check that you have the following line (if not, add it):\n\t  google()  // Google's Maven repository\n\t}\n\n\t// ...\n\n\tdependencies {\n\t  // ...\n\n\t  // Add the following line:\n\t  classpath 'com.google.gms:google-services:4.3.3'  // Google Services plugin\n\t}\n}\n\nallprojects {\n\t// ...\n\n\trepositories {\n\t  // Check that you have following line (if not, add it):\n\t  google()  // Google's Maven repository\n\t  // ...\n\t}\n}\n```\n\nIn your module (app-level) Gradle file (usually `android/app/build.gradle`), apply the Google Services Gradle plugin.\n\n```\n// Add the following line:\napply plugin: 'com.google.gms.google-services'  // Google Services plugin\n\nandroid {\n  // ...\n}\n\n// ...\n```\n\n*    Run flutter packages get.\n\n*    Back in the Firebase console setup workflow, click Next to skip the remaining steps.\n\n*    Continue to Add FlutterFire plugins.\n\n#### Add FlutterFire plugins\n\nFlutter uses plugins to provide access to a wide range of platform-specific services, such as Firebase APIs. Plugins include platform-specific code to access services and APIs on each platform.\n\nFirebase is accessed through a number of different libraries, one for each Firebase product (for example: Realtime Database, Authentication, Analytics, or Storage). Flutter provides a set of Firebase plugins, which are collectively called FlutterFire.\n\nSince Flutter is a multi-platform SDK, each FlutterFire plugin is applicable for both iOS and Android. So, if you add any FlutterFire plugin to your Flutter app, it will be used by both the iOS and Android versions of your Firebase app.\n\nBe sure to check the FlutterFire docs for the most up-to-date list of FlutterFire plugins.\n\n\u003e Note: The steps in this section are an example of how to add Flutter-supported Firebase products) to your Flutter-Firebase app (both the iOS and Android versions).\n\n*    Ensure that your app is not currently running in your emulator or on your device.\n\n*    From the root directory of your Flutter app, open your `pubspec.yaml` file.\n\n*    Add the FlutterFire plugin for the Firebase Core Flutter SDK.\n\n\u003eNote: All Flutter-Firebase apps, both iOS and Android versions, require the `firebase_core plugin` for Flutter.\n\n```yaml\ndependencies:\n  flutter:\n    sdk: flutter\n  # Add the dependency for the Firebase Core Flutter SDK\n  firebase_core: ^0.4.0+9\n```\n\n*   Add the FlutterFire plugins for the Firebase products that you want to use in your app.\u003cbr\u003e\n(Analytics enabled)\n\n```yaml\ndependencies:\n  flutter:\n    sdk: flutter\n  # Check that you have this dependency (added in the previous step)\n  firebase_core: ^0.4.0+9\n\n  # Add the dependency for the FlutterFire plugin for Google Analytics\n  firebase_analytics: ^5.0.2\n\n  # Add the dependencies for any other Firebase products you want to use in your app\n  # For example, to use Firebase Authentication and Cloud Firestore\n  firebase_auth: ^0.14.0+5\n  cloud_firestore: ^0.12.9+5\n```\n\n*    Run flutter packages get.\n\n*    If you added Analytics, run your app to send verification to Firebase that you've successfully integrated Firebase. Otherwise, you can skip the verification step.\n\nYou’re all set! Your Flutter app is registered and configured to use Firebase\n\n### Some Dependencies\n\nWe need the-\n* [image_picker](https://pub.dev/packages/image_picker) - So we can easily upload images or  click photos\n* [firebase_ml_vision](https://pub.dev/packages/firebase_ml_vision) - To provide us the core Firebase capabilities\n\nSo, now my `pubsec.yaml` looks like this-\n\n```yaml\n...\n...\n\ndependencies:\n  flutter:\n    sdk: flutter\n  image_picker: ^0.6.1+4\n  firebase_ml_vision: ^0.9.2+1\n  \n...\n....\n```\n\n### A simple Home Page UI\n\n#### Startup UI\n\n```\nclass FacePage extends StatefulWidget {\n  @override\n  _FacePageState createState() =\u003e _FacePageState();\n}\n\nclass _FacePageState extends State\u003cFacePage\u003e {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Face Detector')\n      ),\n      body: Container(),\n    );\n}\n```\n\nHere, we are making a `FacePage` class as a `StatefulWidget`\n\n#### Adding a FAB\n\nNow, you need to add a FLoating Action Button to allow the user to pick an image\n\n```\nfloatingActionButton: FloatingActionButton(\n        onPressed: (){},\n        tooltip: 'Pick Image',\n        child: Icon(Icons.add_a_photo)\n```\n\nWe will fill the `onPressed` part later\n\n### Work Flow\n\n1. Select an image\n2. Load image for processing\n3. Perform face detection\n\n### Select an image\n\nSelecting aan image is very easy in Flutter\n\n```\nfinal imageFile = await ImagePicker.pickImage(\n  source: ImageSource.gallery,\n);\n```\n\nYou can change it to\n\n```\nsource: ImageSource.camera\n```\n\nTo allow the user to use a camera to upload the image\n\n### Load image for processing\n\n```\nfinal image = FirebaseVisionImage.fromFile(imageFile);\n```\n\nThis code will load my image file in a format suitable for us to work on it\n\n### Perform face detection\n\n```\nfinal faceDetector = FirebaseVision.instance.faceDetector();\n```\n\nHere we are simply initializing an instancce of `FirebaseVision` class with `faceDetector`\n\nYou can also try these other models-\n\n```\nFirebaseVision.instance.faceDetector();\nFirebaseVision.instance.barcodeDetector();\nFirebaseVision.instance.labelDetector();\nFirebaseVision.instance.textDetector();\nFirebaseVision.instance.cloudLabelDetector();\n```\n\n#### Customising faceDetector\n\n```\nfinal faceDetector = FirebaseVision.instance.faceDetector(\n      FaceDetectorOptions(\n        mode: FaceDetectorMode.fast,\n        enableLandmarks: true,\n)\n```\n\nYou can make these changes to code to customise the `faceDetector`, you can also experiment with different modes like `fast` and \n`accurate`. The `enableLandmarks` also allows you to detect eyes, ears and nose in a face.\n\n#### Get the bounding Box\n\nThis is the `Face` class-\n\n```\nclass Face{\n  final Rectangle\u003cint\u003e boundingBox;\n  final double headEulerAngleY;\n  final double headEulerAngleZ;\n  final double leftEyeOpenProbability;\n  final double rightEyeOpenProbability;\n  final double smilingProbability;\n  final int trackingId;\n  FaceLadmark getLandmark(\n    FaceLandmarkType landmark,\n ) =\u003e _landmarks[landmark]\n}\n```\n\nWe are most interested in the `Rectangle\u003cint\u003e boundingBox` variable and we can easily get its value.\n\n#### Fixing a minor problem\n\nNote: We have 2 `await` while getting image from user and getting faces list. The face page  widget might not be mounted, the \nuser could have closed the app too and we could be wasting compute power\n\nSo, we will first check if the widget is `mounted` and thenn call `setState()`\n\n```\nif (mounted) {\n      setState(() {\n        _imageFile = imageFile;\n        _faces = faces;\n     });\n\n```\n\n### Drawing over the image\n\nWe will use the `customPaint` widget to do this\n\nA sample `customPaint` widget-\n\n```\nfinal customPaint = CustomPaint(\n  painter: myPainter(),\n  child: AnyWidget(),\n)\n\nclass MyPainter extends CustomPainter{\n  @override\n  void paint(ui.Canvas canvas, ui.Size size){\n    // implement paint\n  }\n  @override\n  void shouldRepaint(CustomPainter oldDelegate){\n    // implement shoudRepaint\n  }\n}\n\n```\n\n#### Load images in canvas\n\nWe first need to load the images in the `customPainter` canvas before we can draw over them.\n\n```\nFuture\u003cui.Image\u003e _loadImage(File file) async {\n  final data = await file.readAsBytes();\n  return await decodeImageFromList(data);\n}\n\n```\n\nSo, now my code looks like this\n\n```\nclass FacePainter extends CustomPainter{\n  FacePainter(this.image, this.faces);\n  final ui.Image image;\n  final List\u003cRect\u003e faces;\n\n  @override\n  void paint(ui.Canvas canvas, ui.Size size){}\n  @override\n  void shouldRepaint(CustomPainter oldDelegate){\n    return null;\n }\n\n```\n\n#### Paint the faces\n\nThis is a very simple self explanatory code-\n\n```\n@override\n  void paint(ui.Canvas canvas, ui.Size size) {\n  canvas.drawImage(image, Offset.zero, Paint());\n    for (var i = 0; i \u003c faces.length; i++) {\n      canvas.drawRect(rects[i], paint);\n    }\n  }\n\n```\n\nWe will now implement `shouldRepaint` \n\n```\n@override\n  bool shouldRepaint(FacePainter oldDelegate) {\n    return image != oldDelegate.image || faces != oldDelegate.faces;\n  }\n\n```\n\n#### Another minor problem\n\nFlutter is not good when you try to draw something out of canvas and your image can go outside of your canvas\n\n```\nSizedBox(\n            width: _image.width.toDouble(),\n            height: _image.height.toDouble(),\n            child: CustomPaint(\n              painter: FacePainter(_image, _faces),\n            ),\n\n```\n\nPlacing custom paint in a container and trying to size it is a bad idea!!! So we will use another widget.\n\n```\nFittedBox(\n          child: SizedBox(\n            width: _image.width.toDouble(),\n            height: _image.height.toDouble(),\n            child: CustomPaint(\n              painter: FacePainter(_image, _faces),\n            ),\n\n```\n\n## Examples\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003cimg src=\"https://github.com/Rishit-dagli/Face-Recognition_Flutter/blob/master/Screenshots/example1.png\" height = 400\u003e\n\u003cimg src=\"https://github.com/Rishit-dagli/Face-Recognition_Flutter/blob/master/Screenshots/example2.jpeg\" height = 400\u003e\n\n## What next!\n\nYou can contribute to this project, all you need to do is submit a pull request. Be sure to first read [CONTRIBUTING.md](https://github.com/Rishit-dagli/Face-Recognition_Flutter/blob/master/CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frishit-dagli%2Fface-recognition_flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frishit-dagli%2Fface-recognition_flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frishit-dagli%2Fface-recognition_flutter/lists"}