The future is now, and the new tools like AI, chatbots and computer vision has showed to all the tech industry that we need to learn it for our job, college or just for not stay behind the rest.
I’ll help you showing how to use computer vision with Flutter to make an Push up counter using Pose Detection builded with MlKit.
After generate you flutter project you need to import the following packages into your pubspec.yaml
flutter_bloc:^8.1.3
google_ml_kit: ^0.16.2
image_picker: ^1.0.1
camera: ^0.10.5+2
path: ^1.8.3
path_provider: ^2.0.15
google_mlkit_commons: ^0.5.0
(optional) lottie: ^2.6.0
At this time we will download the necessary files from the following link.
With this action we are making a copy from the documentation of google_ml_kit repository package from github.
This action are inside the /example folder from the official repo of the package we will copy and/or download the following files:
painters:
- coordinates_translator.dart
- pose_painter.dart
views:
- camera_view.dart
- detector_view.dart
- gallery_view.dart
- pose_detection_view.dart
And a main.dart and utils.dart modified from myself.
And Finally you need to add the camera and gallery permissions for IOS and/or Android, at this time we will use IOS.
<key>NSCameraUsageDescription</key>
<string>Esta aplicación necesita acceso a la cámara para tomar fotos y grabar videos.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Esta aplicación necesita acceso a la galería para guardar y seleccionar fotos y videos.</string>
For android we modify the AndroidManifest.xml adding the next lines:
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
For implement the feature you need to understand the pose detection and their landmarks.
As you can see, the tool make an abstraction of your body. Now the question its how we can work together with this.
Well, this tool offers your a method to calculate the angle from 3 landmarks, but you can only see this for IOS and Android.
The code for Flutter/Dart its very similar, just take a look:
Once you got this we can use for our personal projects like an Push Up Counter.
You can learn how to do it on the tutorial on youtube.
Happy coding!
Be the first to comment