Blog

On-Device AI: How to Use TensorFlow Lite for Image Classification in Flutter

Learn how to build a Flutter application that performs real-time image classification on-device using TensorFlow Lite. No internet connection required!

Posted on: 2026-03-31 by AI Assistant

Introduction (The “Why”)

Running machine learning models on-device has several advantages over cloud-based solutions: lower latency, enhanced privacy, and offline capabilities. In this tutorial, you’ll learn how to leverage the power of TensorFlow Lite to build a Flutter application that can classify images in real-time, directly on the user’s device.

We’ll build a simple app that allows the user to pick an image from their gallery or take a picture with their camera, and the app will identify the object in the image using a pre-trained image classification model.

Key Technologies:

Prerequisites (The “What You Need”)

Core Content (The “How”)

1. Setting Up the Project

First, create a new Flutter project:

flutter create on_device_ai_app
cd on_device_ai_app

Next, add the necessary dependencies to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  tflite_flutter: ^0.10.0
  image_picker: ^0.8.4+4

Then, run flutter pub get to install the dependencies.

2. Adding the TensorFlow Lite Model

For this tutorial, we’ll use the MobileNetV2 model, which is a pre-trained image classification model. You can download the model and its labels from the TensorFlow Hub.

Create a new directory named assets in the root of your project, and place the downloaded mobilenet_v2_1.0_224.tflite and labels.txt files inside it.

Then, declare the assets in your pubspec.yaml file:

flutter:
  uses-material-design: true
  assets:
    - assets/mobilenet_v2_1.0_224.tflite
    - assets/labels.txt

3. Building the UI

Now, let’s build the user interface for our app. Replace the content of lib/main.dart with the following code:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:tflite_flutter/tflite_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Classification',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File? _image;
  List? _output;
  final picker = ImagePicker();

  @override
  void initState() {
    super.initState();
    loadModel();
  }

  loadModel() async {
    // TODO: Load the model and labels
  }

  classifyImage(File image) async {
    // TODO: Classify the image
  }

  pickImage() async {
    var image = await picker.pickImage(source: ImageSource.gallery);
    if (image == null) return null;

    setState(() {
      _image = File(image.path);
    });

    classifyImage(_image!);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Classification'),
      ),
      body: Container(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            _image == null
                ? Container()
                : Image.file(_image!),
            const SizedBox(height: 20),
            _output == null
                ? const Text('')
                : Text(
                    '${_output![0]['label']}'.replaceAll(RegExp(r'[0-9]'), ''),
                    style: const TextStyle(fontSize: 20),
                  ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: pickImage,
        tooltip: 'Pick Image',
        child: const Icon(Icons.add_a_photo),
      ),
    );
  }
}

This code sets up a simple UI with a floating action button to pick an image, and a text widget to display the classification result.

4. Loading the Model and Classifying Images

Now, let’s implement the loadModel and classifyImage methods.

First, we need to load the TensorFlow Lite model and the labels from the assets. Add the following code to your _MyHomePageState class:

  loadModel() async {
    await Tflite.loadModel(
      model: 'assets/mobilenet_v2_1.0_224.tflite',
      labels: 'assets/labels.txt',
    );
  }

Next, implement the classifyImage method to run the inference on the selected image:

  classifyImage(File image) async {
    var output = await Tflite.runModelOnImage(
      path: image.path,
      numResults: 2,
      threshold: 0.5,
      imageMean: 127.5,
      imageStd: 127.5,
    );

    setState(() {
      _output = output;
    });
  }

This code runs the model on the selected image and returns a list of predictions. We then update the UI with the top prediction.

Putting It All Together

You now have a complete Flutter application that can classify images on-device using TensorFlow Lite. You can find the full source code for this tutorial on GitHub Gist.

Here is a screenshot of the final application:

On-device image classification

Conclusion & Next Steps (The “What’s Next”)

In this tutorial, you learned how to build a Flutter application that performs real-time image classification on-device using TensorFlow Lite. This is a powerful technique that can be used to build a wide variety of intelligent mobile applications.

Here are some ideas for your next steps:

Happy fluttering!

Flutter Dart Machine Learning TensorFlow Lite Mobile Development