How to create an image classification app in Flutter?

· 4 min read
How to create an image classification app in Flutter?

It’s difficult to implement machine learning models into mobile applications. So, in this article, we will see how to create an image classification app in Flutter.

How to create an image classification app in Flutter?

For recognizing images, go to the Teachable machine web tool. After that, you have to select the image project. But, before training the model gather data for image classification. You can find these datasets on Kaggle. After collecting the data, we have to arrange it into relevant labels (i.e. Class).

So, in this application, we have to divide our dataset into 4 classes(i.e. Labels). Downloaded dataset having four different folders depending on the four labels. Into a teachable machine, we have to provide four folders into four different classes by adding new classes.

After training the model, you can preview it by input file or webcam. Later analyze the output of the trained model. Export the model, download it. Now, create a new flutter app to get started with implementation.

Flutter packages you need

  • image_picker,
  • tflite
  • meta.

For the model that we trained from the teachable machine, we have to put those files into the assets folder and add them into pubspec.yaml file.

assets:
- assets/labels.txt
- assets/model_unquant.tflite

If you do not specify the version in the file it will automatically download the latest package. So, as shown below in main.dart file, make HomePage.dart file into the lib folder.

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'HomePage.dart';
void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image Picker Demo',
debugShowCheckedModeBanner: false,
home:HomePage() ,
);
}
}

Also, for Stateful widget HomePage create three variables where _image variable for uploaded File, List of _outputs variable, for errors checking boolean variable _loading. Load the tflite model into HomePage.dart file. So, now make final Ui, widgets for applications.

Example:

//camera method
Future<void> _optiondialogbox() {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
backgroundColor: Colors.purple,

content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
GestureDetector(
child: Text(
"Take a Picture",
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
onTap: openCamera,
),
Padding(padding: EdgeInsets.all(10.0)),
GestureDetector(
child: Text(
"Select image ",
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
onTap: openGallery,
)
],
),
),
);
});
}

Future openCamera() async {
var image = await _picker.getImage(source: ImageSource.camera);

setState(() {
_image = image ;
});
}

//camera method
Future openGallery() async {
var piture = await _picker.getImage(source: ImageSource.gallery);
setState(() {
_image = piture;
}

);
classifyImage(piture);
}
}

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen what is the lifecycle of Flutter Widgets. Also, feel free to comment and provide any other suggestions regarding Flutter.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. Also, the portal is full of cool resources from Flutter like Flutter Widget GuideFlutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply