Mask Detection App in Flutter
Last Updated :
11 Jun, 2021
Nowadays in the situation of Covid, it is very important to wear a Mask and protect yourself and others. So this App helps to detect whether the person has worn the Mask or Not. In this Application, the Mask detection is done with the help of TensorFlow Lite.
Follow the steps to implement Mask Detection in our Flutter App
- Add the dependency to pubspec.yaml file.
- Import the dependency to the main.dart file
Step 1: First add the following dependency in your pubspec.yaml file
Add the given dependency in pubspec.yaml file
Dart
dependencies:
cupertino_icons: ^1.0.2
image_picker: ^0.7.4
tflite:
google_fonts:
Step 2: Now navigate to main.dart() file and return Material App().
First, we have declared MyApp() in runApp in the main function. Then we have created StatelessWidget for MyApp in which we have returned MaterialApp(). In this MaterialApp() we have given the title of our App then declared the theme of our App as primaryColor as blue. Then we have given our first screen of or slider app in the home: HomePage()
Dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
// Material App
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
brightness: Brightness.dark,
primaryColor: Color(0xff01AEBC),
),
// Main Screen in our app
home: HomePage(),
);
}
}
Step 3: Now declare StatefulWidget() for HomePage() class.
In this StatefulWidget() we have declared various variable under state function. And after that we have declare methods for loadImageGallery() and loadImageCamera(). These methods are used for picking the images from the gallery and camera with the help of the image_picker library which we have imported.
Dart
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// Variables Declared
bool _loading = true;
File _image;
final imagePicker = ImagePicker();
List _predictions = [];
// Methods to pick the image from Camera and Gallery
Future loadImageGallery() async {
final image = await imagePicker.getImage(source: ImageSource.gallery);
detectImage(image);
}
Future loadImageCamera() async {
final image = await imagePicker.getImage(source: ImageSource.camera);
detectImage(image);
}
Step 4: Now Go On Google Teachable Machine.
Now Go On a Google Teachable Machine. Where you have o train the Model for Mask Detection. Now Click On Image Project. Here You have to create Two Classes One for Mask and the other for No Mask. Now in the Mask Class click on WebCam to record your face Mask from all Angles. In the same way you will record your face Without Mask in the No Mask Class from all Angles. Now click on Train Model.
After completing that you will click on Export Model.
Step 1:
Step 2:
Step 3:
After that click on Tensorflow Lite and in that select Floating point and then click on Download my model. Now After Downloading the Model Extract the file. Now add the extracted files to the assets folder in pubspec.yaml file.
Step 5: Now Add the Following Lines of Code to import your Model into your App.
Now we have created loadModel() in this we have added extracted files of our downloaded file in this method. And we have initialized the loadModel() in initState(). After that, we have created detectImage() for detecting the image. After that, we have set the state to update the image.
And we have Ended the function using dispose().
Dart
//Initialize the state
@override
void initState() {
// TODO: implement initState
super.initState();
loadModel();
}
// Added extracted files in loadModel() function
loadModel() async{
Tflite.close();
await Tflite.loadModel(model: 'assets/model_unquant.tflite',
labels: 'assets/labels.txt');
}
// Created detectImage() for detecting the image
Future detectImage(image) async {
var prediction = await Tflite.runModelOnImage(
path: image.path,
numResults: 2,
threshold: 0.6,
imageMean: 127.5,
imageStd: 127.5,
);
setState(() {
_loading = false;
if (image != null) {
_image = File(image.path);
_predictions = prediction;
} else {
print('No image selected.');
}
});
}
// Ended the function
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
Step 6: After that, we have given the UI of our Application.
In this StateFulWidget() we have declared Scaffold(). In which we have declared Appbar() in this appbar we have given the title of our app in Text Widget. After the appbar in the body section, we have declared Column() in which the image and the buttons will appear one below another. When we click on Capture Image Button the camera of the device will open, and you have to capture the image that will detect the mask.
In the same way when you click on Pick Image from Gallery. Your File manager will open from where you can select Image which will be used for detecting the mask.
Dart
@override
Widget build(BuildContext context) {
return Scaffold(
// Appbar declared
appBar: AppBar(
title: Text('Mask Detection',
style: GoogleFonts.robotoCondensed(),
),
),
body: SingleChildScrollView(
// Column containing images and buttons
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Image will display here
_loading == false ? Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
child: Column(
children: [
Container(
height: 280,
width: 220,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Image.file(_image)),
),
SizedBox(height: 10),
Text(_predictions[0]['label'].toString().substring(2),
style: GoogleFonts.robotoCondensed(
fontSize: 20,
),
),
SizedBox(height: 10),
// Text('Safer: '+"${(_predictions[0]
// ['confidence']*100).toString()}%"),
],
),
),
):Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
height: 300,
width: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.grey,
),
child: Center(child: Text('Image Appears here')),
),
),
SizedBox(height: 10),
// Capture Image from Camera
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
height: 50,
width: double.infinity,
child: RaisedButton(
onPressed: (){
// Methods we created above
loadImageCamera();
},
child: Text('Capture Image'),
color: Color(0xff01AEBC),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
),
SizedBox(height: 10),
// Capture Image from Gallery
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
height: 50,
width: double.infinity,
child: RaisedButton(
onPressed: (){
// Methods we created above
loadImageGallery();
},
child: Text('Pick Image from Gallery'),
color: Color(0xff01AEBC),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
),
],
),
),
);
Full Code for Mask Detection App:
Dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:image_picker/image_picker.dart';
import 'package:tflite/tflite.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool _loading = true;
File _image;
final imagePicker = ImagePicker();
List _predictions = [];
// For picking image from Gallery
Future loadImageGallery() async {
final image = await imagePicker.getImage(source: ImageSource.gallery);
detectImage(image);
}
// For picking image from Camera
Future loadImageCamera() async {
final image = await imagePicker.getImage(source: ImageSource.camera);
detectImage(image);
}
@override
void initState() {
// TODO: implement initState
super.initState();
loadModel();
}
// LoadModel() for connection app with TensorFlow Lite
loadModel() async{
Tflite.close();
await Tflite.loadModel(model: 'assets/model_unquant.tflite',
labels: 'assets/labels.txt');
}
// Method for Image detection
Future detectImage(image) async {
var prediction = await Tflite.runModelOnImage(
path: image.path,
numResults: 2,
threshold: 0.6,
imageMean: 127.5,
imageStd: 127.5,
);
setState(() {
_loading = false;
if (image != null) {
_image = File(image.path);
_predictions = prediction;
} else {
print('No image selected.');
}
});
// setState(() {
// _loading = false;
// _predictions = prediction;
// });
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
// Appbar displayed here
appBar: AppBar(
title: Text('Mask Detection',
style: GoogleFonts.robotoCondensed(),
),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Image will display here
_loading == false ? Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
child: Column(
children: [
Container(
height: 280,
width: 220,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Image.file(_image)),
),
SizedBox(height: 10),
Text(_predictions[0]['label'].toString().substring(2),
style: GoogleFonts.robotoCondensed(
fontSize: 20,
),
),
SizedBox(height: 10),
// Text('Safer: '+"${(_predictions[0]['confidence']*100).toString()}%"),
],
),
),
):Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
height: 300,
width: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.grey,
),
child: Center(child: Text('Image Appears here')),
),
),
SizedBox(height: 10),
// Button for taking Image from Camera
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
height: 50,
width: double.infinity,
child: RaisedButton(
onPressed: (){
loadImageCamera();
},
child: Text('Capture Image'),
color: Color(0xff01AEBC),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
),
SizedBox(height: 10),
// Button for taking Image from Gallery
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
height: 50,
width: double.infinity,
child: RaisedButton(
onPressed: (){
loadImageGallery();
},
child: Text('Pick Image from Gallery'),
color: Color(0xff01AEBC),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
),
],
),
),
);
}
}
Output:
Similar Reads
Flutter - Creating App Intro Screens
Flutter is known for its easiness to create cross-platform applications. Either it is creating introduction screens for the app or any screen. We got an easy way to create Intros for the app using the intro_slider library of Flutter. In this article, we are going to implement it in the sample app.
4 min read
Flutter - Blurred Decoration Image
In this article, we will implement how to Blur an image in flutter. A sample image is given below to get an idea about what we are going to do in this article. Â Step By Step Implementation Step 1: Create a New Project in Android Studio To set up Flutter Development on Android Studio please refer to
3 min read
EBook reader Application in Flutter
EBook reader Application brings the library to your fingertips. This application will be the travel partner of every book lover who loves to read books of their choice. The app is developed using Flutter and provider state management. It uses the Google Books API to fetch the data of books. The app
8 min read
Application Localization in Flutter
In mobile applications, Localization is the process of adapting an application to support multiple languages and regional settings. This allows your app to be more accessible to users from different parts of the world. In Flutter, for implementing Localization flutter_localization is a package used
4 min read
Basic Quiz App In Flutter
Flutter SDK is an open-source software development kit for building beautiful UI that is natively compiled. Currently, it is available as a stable version for iOS and Android OS. In this app, we are going to have the features or modules mentioned below:Five multiple-choice questions ( more questions
8 min read
Floating SnackBar in Flutter
The floating_snackbar in Flutter is used to display a temporary message to users, often as feedback after an action.We know how to show the snack bar in a flutter, but everybody wants the application must look more interactive and user-friendly, that's why we can use animations or new designs in the
3 min read
Fitness App using Flutter
The Fitness app is an essential companion for fitness enthusiasts who want to keep track of their exercises. In this article, we will learn how to build a Fitness App using Flutter for mobile devices. The app features a list of common exercises, allowing users to start and record the time spent on e
10 min read
Flutter - Hidden Bottom AppBar
Bottom AppBar or Bottom Navigation Bar is mostly used in every Android IOS Application, Bottom Navigation Bar is an AppBar containing Tabs which is used to show more pages on a single screen. We are going to Hide the bottom App Bar on scroll down and show it in scroll up. Â What will we do?We will s
3 min read
Clipping in Flutter
In computer graphics, the act of restricting the rendering to a particular area is called Clipping. As developers, we use clipping to create awesome-looking, custom user interfaces with special effects. We have two types of Clipping that are ClipOval and ClipRRect. ClipOval A widget that clips its c
2 min read
Photo Editing Application in Flutter
With the introduction of the powerful image_editor_plus package, editing images directly within your Flutter app has become significantly more accessible. In this article, we'll dive deep into building a user-friendly image editor app. Users will have the ability to select an image from their camera
7 min read