Mostafa Ead

Posted on Oct 11, 2023

Integration of Machine Learning Models in Flutter: A Comprehensive Guide

Introduction

Flutter has been a game-changer in the mobile development world, offering a rich set of features for creating beautiful and functional apps. But what if you want to take your Flutter app to the next level by integrating machine learning (ML) models? This article aims to guide you through the process, considering the latest Flutter documentation.

Prerequisites

Basic understanding of Flutter and Dart
Familiarity with Machine Learning concepts
Flutter SDK installed and set up

Why Integrate Machine Learning in Flutter?

Machine learning can enhance your Flutter app in various ways:

Personalization: Tailor user experiences based on their behavior.
Automation: Automate tasks like sorting, tagging, and filtering.
Enhanced Features: Add capabilities like image recognition, language translation, and more.

Steps to Integrate ML Models in Flutter

Step 1: Choose the Right ML Model

Before you start coding, decide what kind of ML model suits your needs. You can either train a model from scratch or use pre-trained models.

Step 2: Convert the Model to a Mobile-Friendly Format

If your model is not in a mobile-friendly format like .tflite for TensorFlow Lite, you'll need to convert it. Tools like TensorFlow Lite Converter can help.

Step 3: Add Dependencies

Add the necessary dependencies to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  tflite: ^latest_version

Run flutter pub get to install the packages.

Step 4: Import the Model into Your Project

Place your .tflite model in the assets folder and update the pubspec.yaml:

flutter:
  assets:
    - assets/my_model.tflite

Step 5: Load the Model

Import the TFLite package and load your model:

import 'package:tflite/tflite.dart';

void loadModel() async {
  await Tflite.loadModel(
    model: "assets/my_model.tflite",
  );
}

Step 6: Make Predictions

Use the model to make predictions:

void makePrediction(input) async {
  var output = await Tflite.runModelOnFrame(
    bytesList: input,
  );
  print(output);
}

Step 7: Dispose of the Model

Don't forget to dispose of the model when you're done:

void disposeModel() {
  Tflite.close();
}

Example: Image Classification App

Here's a simple example of an image classification app in Flutter:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageClassifier(),
    );
  }
}

class ImageClassifier extends StatefulWidget {
  @override
  _ImageClassifierState createState() => _ImageClassifierState();
}

class _ImageClassifierState extends State<ImageClassifier> {
  File? _image;
  List? _output;

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

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

  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;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Classifier'),
      ),
      body: Container(
        child: Column(
          children: [
            _image == null ? Container() : Image.file(_image!),
            SizedBox(height: 20),
            _output == null ? Text('') : Text('${_output![0]['label']}')
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          var image = await ImagePicker().pickImage(source: ImageSource.gallery);
          if (image == null) return;
          setState(() {
            _image = File(image.path);
          });
          classifyImage(_image!);
        },
        child: Icon(Icons.image),
      ),
    );
  }
}

Conclusion

Integrating machine learning models into your Flutter app can significantly enhance its capabilities. The process is straightforward, thanks to Flutter's flexibility and the power of TensorFlow Lite. Happy coding!

I hope you found this guide useful. If you have any questions or suggestions, feel free to leave a comment below.

DEV Community