Building a Mask Detection App: Using Flutter and TensorFlow Lite

Building a Mask Detection App Using Flutter and TensorFlow Lite (1)

In recent times, due to the effects of the pandemic, a mask detecting app is in great need. Such an app can go a long way in helping to contain the spread of the disease. How so?

The pandemic has brought to light the necessary steps one can take to help prevent the spread of the virus. One small yet highly effective measure is wearing masks. For the most part, many people do wear masks. However, it is not uncommon for people to wear masks in the wrong way.

The mask-detector app strives to help identify those individuals who fail to follow the health guidelines.

The app will be able to identify if the users have worn a mask and if they have worn it the right way. They will need to capture a picture from their camera, and the app will do the rest.

In this blog, we will take you through the various steps that went into building this app using Flutter and TensorFlow Lite. Let us start with understanding how we got the model to identify faces with or without masks.

Training the Model 

For training the model to identify faces with or without masks, we made use of Google’s teachable machine, which simplifies the entire process of model training and data classification.

We defined an image project and defined 3 classes of data to indicate the below 3 different labels as:

  1. You are Not Wearing Mask
  2. Good Job! Your mask is on!
  3. You have not worn your mask properly!

Next we defined the data using the webcam, captured data for the three categories and trained the model. When satisfied with the model performance, we exported the tflite format of the model which gives a zip file with the following 2 files:

  1. labels.txt – This file includes the class labels for which the model is trained to recognise and categorize.
  2. Model_unquant.tflite – The model file in tflite format.

This completes the training process and we are ready to consume this in our flutter application.

Creating a flutter application

Create a new flutter application named mask_detector using below command

This will create our application folder structure.

Adding the dependencies and assets

The dependencies will be added to the pubspec.yaml as belows

Also add an assets folder in the application top level. Add the training model related files generated earlier in the assets folder. Also add any app level images into the assets folder.

Add the assets section in the pubspec.yaml

Defining the App View

Now define the main.dart to load the Home page which will include the application view. If needed, you can also add a splash screen using the SplashScreen dependency.

The Home component will be the main component and will enable the user to pick an image from the gallery or capture a new image from the camera. 

The initState has the logic to load the model.

The view is defined to show the default image on the app loading. Later as the user selects an image from the gallery/camera, the picked image is shown and classified using the model.

On picking an image from the gallery or capturing from camera, the image is tested against the model as below

The {_output[0][‘label’]} shows the final result returned by the model after image classification.

We also need to dispose the model appropriately as below.

Now the app is ready to test.

Try testing out if you are wearing your mask properly.

You can find the complete code here.


This is an apt use case in the current times when wearing a mask has become the new norm. An app to identify if a mask is worn properly or not. This is a basic model which detects only a single face in the frame, but this can be enhanced and trained to identify and flag multiple faces with or without proper masks in a given frame.


Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.