Heart Beat Tracker App using Flutter

In this article, we will learn how to measure our heart rate using the camera on our mobile phone in a Flutter app. To do this, we will use a special package called heart_bpm.

Here's how it works:

When you place your finger in front of the camera, the app will turn on the flash. The light from the flash helps the camera detect changes in the color of your finger as blood flows through it. These changes allow the app to calculate your heart rate.

We will go step by step to set up the Flutter app and use the heart_bpm package so you can easily track your heart rate anytime and anywhere. Let’s get started!

Let's watch a demo video to get a better idea of what we’re going to create.

Demo Video

Step-by-Step Implementation

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2: Adding the Dependency

To add the dependency to the pubspec.yaml file, add  heart_bpm as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

Now, run the below command in the terminal.

flutter pub get

Or

Run the below command in the terminal.

flutter pub add heart_bpm

Step 3: Import dependencies

To use libraries, import all of them in the respective .dart file.

import 'package:heart_bpm/heart_bpm.dart'; 

Step 4: Start Coding

Let's start writing code in the main.dart:

- : import required packages at the top of the file.

- : Define the main method and invoke a stateless widget using the runApp() method within it.

- : MyApp is a Stateless widget that returns a MaterialApp with a title, theme, debugShowCheckedModeBanner, and a home, which navigates to a Stateful widget called MyHomePage.

- : Define a MyHomePage stateful class and return a scaffold with some body.

- :

- : Write the required method inside the stateful class MyHomePage.

- : Use the below UI code inside the Scaffold body.

Program Flow

• When you open the app, you will see a column in the center of the screen. It says, "Cover both the camera and flash with your finger." Below that, there is a favorite icon with a "-" next to it in a row, and an elevated button that says, "Start 1 min Measurement." as mentioned in below image.

• When you tap the ElevatedButton below, it will call the startMeasurement function. This function starts a timer for 60 seconds, activates the camera with the flash, and updates the display by replacing the "-" with a number. The button will be hidden, and a stop button will become visible.

• If the user clicks the "Stop" button or the time left, it will round the entire BPM values noted and present this as a result instead of the camera and text. It will then display the "Start 1 Min Measurement" button again.

Complete Source Code

main.dart:

Output: