Machine Learning in Flutter!

3 min readJul 25, 2021

Passionate about Machine Learning? How about creating an app in Flutter which uses Machine Learning Model ❤

We all know that Machine Learning is one of the most popular domain in IT. So let’s integrate TensorFlow with Flutter and have our app garnished with Machine Learning.

For this purpose, we will use tflite package that is available at pub.dev. We will also use image_picker to get image from device and pass to our image classifier model. You can get this package from pub.dev.

Now, first thing you need is an image classifier model. You can get one from google or ask some of your friends to create one for you. If you know Machine Learning, feel free to create a model and export it in the form of tflite. For ease, you can also use Teachable Machine. In teachable machine, you can train your own image classifier model by uploading images and giving labels to each class. Once the training is completed, you need to export in the form of tflite. Add this model and label file inside assets folder of your project.

Once you have added the files in assets folder and have added required packages in pubspec.yaml, let’s start with our main code!

Step 1: Load the model

The first step is to load our model in the flutter app. Don’t forget to add assets in pubspec.yaml file. Then, import tflite package and load the model in initState method. Let’s create a method to load our model.

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

The model needs to be loaded in initState() method of our page.

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

Step 2: Create 2 variables, one for image and other for output.

List _outputs;  
File _image;

Step 3: Open Gallery or Camera to get an Image using `image_picker`

To open camera:

Future openCamera() async {
    var image = await ImagePicker.pickImage(
      source: ImageSource.camera,
    );
    setState(() {
      _image = image;
    });
    classifyImage(image);
  }

To open gallery:

Future openGallery() async {
    var image;
    image = await ImagePicker.pickImage(
      source: ImageSource.gallery,
    );
    setState(() {
      _image = image;
    });
    classifyImage(image);
  }

You can see we have used a function called classifyImage and it takes the image that we have captured/selected. So let’s now define this function.

Step 4: Pass image to our classifier model

classifyImage(File image) async {
    var output = await Tflite.runModelOnImage(
       path: filepath,   // required
       imageMean: 0.0,   // defaults to 117.0
       imageStd: 255.0,  // defaults to 1.0
       numResults: 2,    // defaults to 5
       threshold: 0.2,   // defaults to 0.1
       asynch: true      // defaults to true
    );
    setState(() {
      _outputs = output;
    });
  }

Step 5: Print the class name!

Once the model classifies the image, you can directly print the class name!

Text('${_outputs[0]["label"]}')

Step 6: Finally, you need to close the TFlite model in dispose() method

@override
  void dispose() async {
    await Tflite.close();
    super.dispose();
  }
}

Wohoo!! Congratulations! Now you are ML & Flutter Expert 😉

Hope you enjoyed this article!

If you loved it, you can Buy Me A Coffee!

Don’t forget to connect with me on:

Don’t stop, until you are breathing!💙
- Abhishek Doshi