Build Handwritten Digit Recognition Applications Using Flutter and Tensorflow

Author image By Manish Patel  |  Tuesday, November 26, 2019 03:08 PM  |  5 min read  |   1400

Flutter and Tensorflow

Flutter Tensorflow is rapidly becoming one of the most popular mobile app development tools in the market with businesses looking to hire flutter app developers for their custom app requirements. Any up-and-coming flutter app development company is looking to constantly innovate and experiment with the tech to progress.

Flutter app development is now expanding into the arena of machine learning where minor projects are being created based on machine learning. One such experimental project that you can work on is developing a handwriting digit recognizer app using Flutter and a machine learning tool Tensorflow.

Here’s how you can get started:

1. Develop the machine learning model using Tensorflow

This model will help the device recognize the number through its shape and match it with the relevant digit is drawn using machine learning. It will provide instructions to the app to display the drawn digit in the form of an image.

2. Develop the flutter mobile application for input based on the Tensorflow model

The second step is to develop the Flutter mobile app where

  1. Users can use a canvas for drawing up the desired numbers
  2. The drawn image will be matched with the relevant image as recognized by the device through the Tensorflow module

Begin with the Tensorflow Model

Tensorflow Model

Step 1- Get Started

For getting started with Tensorflow, you can either run the model locally using Python or use a notebook such as Jupiter, Colab by Google, or Azure Notebooks by Microsoft.

Pro-tip: Create an isolated virtual environment to run this project so that it doesn’t harm the other projects in case anything goes wrong.

In case you decide to run with Python, this is the code you would need to use to install Tensorflow Post, you would need to create a defined project structure to store your model in.

In the case of a notebook, you can start directly from the point of importing Tensorflow.

Step 2- Load Dataset for Number Recognition

You would require a dataset that would translate the hand-written numbers into an image format. Tensorflow already has preloaded datasets to do just this. You can load the MINST dataset from Tensorflow which stores numbers in 28X28 pixel format where the images are 20X20 pixels with 4 pixels of padding on each side. The images are greyscaled.

Once your dataset is loaded, you can assign the value to each image. There are 256 values as there are colors. Generalize these values whereby the input is directly translated into values from 0 to 9 to make space for more modification in the future.

Step 3- Compile and Train

The next step is to compile your model and train it for maximum accuracy. A callback must be coded into the model to stop the training process for the model once this accuracy is achieved.

The final code for your Tensorflow model must look something like this:

Tensorflow model

The Flutter App Development

The next step for your flutter app developers is to create a container app that will work with the model.

The flutter app development process is divided into two parts

  1. Importing the model and making it compatible with the app
  2. Developing a finger painting canvas for hand-written input of numbers

For importing the model, create your custom flutter app project and clean the main. dart file to start anew.

main.dart file

You must create another file where your custom code can work aside from the lib/main.dart file. This file will then be imported onto your project using the ‘home’ parameter. You can name it recognizer_screen.dart.

lib/main.dart file

Once your new project is all set up, you will need to import the Tensorflow model and the Tensorflow library by modifying the pubspec.yaml file. Along with this, you will also need to create a text file with digits from 0 to 9 which will be associated with the output of the file.

Once everything is set, you need to declare your assets within your pubsec.yaml files. You can either declare all your assets together or only select and insert the assets you wish to utilize.

pubsec.yaml files

Since you are doing this in yaml, indentation is of prime importance.

Post this, you need to import the TensorFlow lite library ‘tflite’ through pubsec.yaml.

TensorFlow lite library

Developing the App Layout and the Canvas

Once your model is set up, you need to define an app layout with a header and footer in the form of a flex container which is set to

1. The size of the canvas where the numbers will be finger-painted will remain fixed.

For developing the canvas, you will require three flutter tools for painting which are:

  • Custom Paint
  • Custom Painter
  • Canvas Widget

Canvas widget will provide a canvas for the input while CustomPainter helps the widget to run paint commands.

Create a subclass called drawing_painter.dart for your CustomPainter widget to include your custom code. You will be further required to import the flutter/material. Art in order to utilize any colors within the file.

To capture the data from the campus and pass it on to Drawing Painter where your custom code is located, you must use a Gesture Detector and a builder widget.

The code for the same should look something like this:

To wrap it up, the last two things that you must define are the canvas area so that the user cannot draw outside it and highlight the painting area by decorating it.

Flutter and Tensorflow

Flutter app developers now have all the tools in place to pass on the image from the canvas to your machine learning model for it to predict the number in the form of an image.

In case you do not feel confident enough to venture out on your own, the next update on the working of the app will be coming soon!


Build Handwritten Digit Recognition App Using Flutter & Tensorflow

That’s exactly what we do

Contact Us



Author image

Manish Patel

Manish Patel is a Co-Founder of Concetto Labs, a leading mobile app development company specialized in android and iOS app development. We provide a one-stop solution for all IT related services.

Why Our Client Love Us?

  • Fast kick-off
  • Agile Ready
  • 98% Client Retention
  • 360-Degree solutions

Our integrity and process focuses largely on providing every customer the best recommendations for their respective business. Our clients become recurring customers because we always go beyond their expectations to deliver the best solutions.

Get In Touch
Kamika Kilgore
Customer for over 2 years Kamika Kilgore United States

Concetto Labs has been a fantastic partner in consistently delivering high quality, high value solutions to our organization. Their team does an excellent job of first understanding our processes and requirements, and then translating them into solutions that meet or exceed expectations. Concetto Labs has helped us simplify multiple processes and workflows as well as suggested additional improvements we had not considered. Their communication and follow-through are top tier. They have proven themselves to be a trusted partner and we look forward to leveraging their services on future projects.

Mr. Sieva Savko
Customer for over 4 years Mr. Sieva Savko Norway

Concetto Labs have provided us with a tremendous amount of help. Their competence in various IT fields led to a positive outcome while facing different challenges. A lot of value was given by their helpful professional staff. To describe this company in three words: effectiveness, collaboration, trust. I would also like to personally thank Mr. Tejas Patel for his positive, friendly, and highly competent approach. The all-around support provided by him made every task at hand a no-brainer.

Miss. Caroline Jack
Customer for over 4 years Miss. Caroline Jack South Africa

It has been an absolute pleasure working with the Concetto Labs team! We have worked together on a few projects now, all of which have been successful. You can rely on good communication and response times from these guys. And they go above and beyond to ensure that the result is achieved. Because of their great service, they have become an integral part of our business and we will continue to use them going forward.

Mr. Richard Bartlett
Customer for over 3 years Mr. Richard Bartlett United States

Concetto Labs is a group of incredibly talented individuals. They are very responsive and communicate with you each and every step of the process. I worked with Manish Patel throughout the entire process and must say that I have never conducted business with a more honest and professional individual. Together with his team, Manish created exactly how we envisioned it to be. Thanks for all of your hard work.

Mr. Conrad Abraham
Customer for over 2 years Mr. Conrad Abraham United States

Concetto Labs team is my go-to for any simple or complex development projects. They have risen to the challenge. Great project management, communication, and super quick turnaround. I've done multiple projects with them and don't plan on changing that.

Mr. Edward Chin
Customer for over 4 years Mr. Edward Chin Canada

Concetto Labs was able to bring my complex idea to life. Throughout the project, Concetto Labs maintained constant communications and was always professional - considering I had no experience in what I wanted to create their welcoming attitude, patience, and knowledge in the field created the perfect environment to work in. I was so impressed with their work that I've kept them on board as my go-to experts. Thanks for the worthwhile experience and the breathtaking product.

Karuna Govind
Karuna Govind CTO & Co Founder (Coupay) London, UK

We started working with Concetto Labs due to the influx of work on mobile (Flutter) and frontend (React.js). It's been fantastic working with them. Good, consistent communication and good quality of work means they may be our first choice for many projects to come.

Arunabha Choudhury
Arunabha Choudhury Director (Fuzzann Technologies Private Limited) India

We are a healthcare IT company and wanted to build a Mobile Application for both Android and IOS using Flutter. The Concetto Lab team has been very patient with our project requirements and made sure all our queries are answered. It was a great show of professionalism and customer relationship. Even during the project, the team was very accommodating of all the changes we requested. The project was delivered successfully and we deployed the app in the Android Play Store. Overall, the entire process has been very transparent and the team was able to deliver exactly what we had envisioned the project outcome to look like.

Good Firms Clutch App Futura Microsoft Associate Mobile App Top Developers Gesia