On-Device ML in Flutter: Tflite Model integration in flutter

Flutter has been a game-changer in the mobile development world, offering a rich set of features for creating beautiful apps. But what if you want to take your Flutter app to the next level by integrating machine learning (ML) models? I recently came across the problem of integrating a custom TFLite model(TensorFlow Lite models are ML models that are optimised to run on mobile devices) in an app. I have searched bit but doesn’t find an updated and working example, so I have tried few things and after that I found an easy and updated solution. I decided to write this article to help others understand easily.

We need ML models to process the images mostly in our flutter like Face Recognition, Object detection etc.

In flutter you can achieve this with few steps and its super easy. We will need to add few dependencies to our project(Assuming that you have setup the flutter project ready).

Firstly find a suitable pre-trained tflite model for your need . Here i am using a custom tflite model which is already trained on “y = mx+c”.
It takes single floating point number in the form of array and outputs the floating point number in similar way.

Lets start integrations of tflite in flutter.

Step 1: Add Dependencies

Firstly we will add depency for TFLITE into our flutter project.

tflite_flutter | Flutter Package

Run flutter pub get to install the packages.

Step 2: Import the Model into Your Project

Place your .tflite model in the assets (Create one in project root directory if not already created) folder and declare it in the pubspec.yaml:

Here number_predictor.tflite is the name of my model and its placed inside assets folder.

Step 3: Prepare User Interface

I have prepared a simple user interface for the user to input any number and a button to process the input and showed output at bottom.

Step 4: Make Predictions

Use the model to make predictions. This is actually the step which we need to focus and it does the trick. Import tflite_flutter depency in your file where you wanted to you as.

import 'package:tflite_flutter/tflite_flutter.dart' as tfl;

Now use the tflite interpreter to use your model and process the data .

runModel(double no) async {
    //create interpreter for you model
    final interpreter =
        await tfl.Interpreter.fromAsset('assets/number_predictor.tflite');
    //prepare input as required by your model 
    //in my case it required a single number and i am requiring it from user
    //passing user entered number to model as input 
    final input = [
      [no]
    ];
    //Prepare output set and use reshape method from the plugin.
    //Input and output preparing guide comes with the model documentation.
    var output = List.filled(1, 0).reshape([1, 1]);
    //run the inpterpreter on prepared input and output.
    interpreter.run(input, output);
    //model process the input and updates the output
    //Result variable to show output to user
    result = output[0][0];
    print(output);
    setState(() {});
  }

Here is the complete code for this.

import 'package:flutter/services.dart';
import 'package:tflite_flutter/tflite_flutter.dart' as tfl;
import 'package:flutter/material.dart';
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: const MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  double result = 0.0;
  runModel(double no) async {
    final interpreter =
        await tfl.Interpreter.fromAsset('assets/number_predictor.tflite');
    final input = [
      [no]
    ];
    var output = List.filled(1, 0).reshape([1, 1]);
    interpreter.run(input, output);
    result = output[0][0];
    print(output);
    setState(() {});
    // return  as double;
  }
  TextEditingController noController = TextEditingController();
  FocusNode noFocus = FocusNode();
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.grey.shade700,
          title: const Text("Number predictor"),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: TextFormField(
                onTapOutside: (event) {
                  noFocus.unfocus();
                  FocusManager.instance.primaryFocus?.unfocus();
                },
                controller: noController,
                inputFormatters: [
                  FilteringTextInputFormatter.allow(RegExp(r'(^\d*\.?\d*)'))
                ],
                decoration: const InputDecoration(
                    border: OutlineInputBorder(), hintText: 'Enter a Number'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(20),
              child: MaterialButton(
                  color: Colors.black,
                  child: const Text('Process'),
                  onPressed: () {
                    runModel(double.parse(noController.text));
                  }),
            ),
            Text(
              result.toString(),
              style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
            )
          ],
        ),
      ),
    );
  }
}

Find the full code and trained model(.tflite) in my github Repo.

Clap the heck out of it to motivate me to write more and continue sharing with the community.

Cheers!.