Flutter Image classification using TensorFlow in 4 steps

Photo by Alexander Sinn on Unsplash
  • TensorFlow: the core open course library that is the foundation of developing and training machine learning models.
  • TensorFlow.js: similar to TensorFlow but focus purely on JavaScript
  • TensorFlow Lite: as the name suggests, it is a lightweight version of TensorFlow for deploying models on mobile devices. It has limited functions where it only accepts pre-trained model injections and loads the model into a mobile device. You can use it for image classifications, object detection, and question/answer based on the natural language model.
  • TensorFlow Production: it is an extension of TensorFlow for large production environments.

Step 1: Get yourself a model

unzip some-image-classification-model.tflite

Step 2: Create a Flutter Project

name: tensorflow
description: A new Flutter application.
version: 1.0.0+1
sdk: ">=2.12.0 <3.0.0"

sdk: flutter
tflite: 1.1.2
image_picker: 0.7.4

sdk: flutter

uses-material-design: true
- assets/model.tflite
- assets/label.txt

Step 3: Coding time

  • Create a Flutter main app
void main() => runApp(MaterialApp(
home: ImageDetectApp(),

class ImageDetectApp extends StatefulWidget {
_ImageDetectState createState() => _ImageDetectState();
  • Create an _ImageDetectState class and init the Tflite library
class _ImageDetectState extends State<ImageDetectApp> {
List? _listResult;
PickedFile? _imageFile;
bool _loading = false;

void initState() {
_loading = true;

void _loadModel() async {
await Tflite.loadModel(
model: "assets/model.tflite",
labels: "assets/label.txt",
).then((value) {
setState(() {
_loading = false;
  • Inside this class, create a floating button (or any click events) to receive user action of image selection
floatingActionButton: FloatingActionButton(
onPressed: _imageSelection,
backgroundColor: Colors.blue,
child: Icon(Icons.add_photo_alternate_outlined),
  • Add image selection function
void _imageSelection() async {
var imageFile = await ImagePicker().getImage(source: ImageSource.gallery);
setState(() {
_loading = true;
_imageFile = imageFile;
  • Add image classification function
void _imageClasification(PickedFile image) async {
var output = await Tflite.runModelOnImage(
path: image.path,
numResults: 2,
threshold: 0.5,
imageMean: 127.5,
imageStd: 127.5,
setState(() {
_loading = false;
_listResult = output;
  • Last but not least: dispose of the Tflite lib
void dispose() {

Step 4 Bouns: Train your own model

  • First, install packages as prerequisites
!pip install -q tflite-model-maker
import os
import numpy as np
import tensorflow as tf
assert tf.__version__.startswith('2')
from tflite_model_maker import model_spec
from tflite_model_maker import image_classifier
from tflite_model_maker.config import ExportFormat
from tflite_model_maker.config import QuantizationConfig
from tflite_model_maker.image_classifier import DataLoader
from tflite_model_maker.image_classifier import ModelSpec
import matplotlib.pyplot as plt
  • Second, upload your data set
!unzip food_images.zip
  • Load data to an on-device ML app, and split it into training and testing data (with new code block and execution)
data = DataLoader.from_folder(‘/content/food_images’)
train_data, test_data = data.split(0.9)

from google.colab import drive
  • Customize the TensorFlow model and evaluate it
model = image_classifier.create(train_data)
loss, accuracy = model.evaluate(test_data)
  • Export the TensorFlow Lite model and its label
model.export(export_dir=’.’, export_format=ExportFormat.LABEL)



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Teresa Wu

Enthusiastic about cloud technology, data, clean code, Flutter, and Agile