{"id":2715,"date":"2019-11-26T15:08:23","date_gmt":"2019-11-26T09:38:23","guid":{"rendered":"https:\/\/www.concettolabs.com\/blog\/?p=2715"},"modified":"2019-11-26T15:08:23","modified_gmt":"2019-11-26T09:38:23","slug":"build-a-handwriting-number-recognition-app-using-flutter-and-tensorflow","status":"publish","type":"post","link":"https:\/\/websitelaravel.concettoprojects.com\/blog\/build-a-handwriting-number-recognition-app-using-flutter-and-tensorflow\/","title":{"rendered":"A Guide to Building a Handwriting Number Recognition App Using Flutter and Tensorflow"},"content":{"rendered":"

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

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 recognizer app<\/strong> using Flutter and a machine learning tool Tensorflow.<\/p>\n

<\/span>Here\u2019s how you can get started:<\/span><\/h2>\n

<\/span>1. Develop the machine learning model using Tensorflow<\/span><\/h3>\n

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.<\/p>\n

<\/span>2. Develop the flutter mobile application for input based on the Tensorflow model<\/span><\/h3>\n

The second step is to develop the Flutter mobile app where<\/strong><\/p>\n

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

    <\/span>Begin with the Tensorflow Model<\/span><\/h3>\n

    \"Tensorflow<\/p>\n

    Step 1- Get Started<\/strong><\/p>\n

    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.<\/p>\n

    Pro-tip:<\/strong> Create an isolated virtual environment to run this project so that it doesn\u2019t harm the other projects in case anything goes wrong.<\/p>\n

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

    In the case of a notebook, you can start directly from the point of importing Tensorflow.<\/p>\n

    Step 2- Load Dataset for Number Recognition<\/a><\/span><\/strong><\/p>\n

    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.<\/p>\n

    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.<\/p>\n

    Step 3- Compile and Train<\/strong><\/p>\n

    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.<\/p>\n

    <\/span>The final code for your Tensorflow model must look something like this:<\/span><\/h3>\n

    \"Tensorflow<\/p>\n

    <\/span>The Flutter App Development<\/span><\/h3>\n

    The next step for your flutter app developers<\/strong> is to create a container app that will work with the model.<\/p>\n

    The flutter app development process is divided into two parts<\/strong><\/p>\n

      \n
    1. Importing the model and making it compatible with the app<\/li>\n
    2. Developing a finger painting canvas for hand-written input of numbers<\/li>\n<\/ol>\n

      For importing the model, create your custom flutter app project and clean the main. dart file to start anew.<\/p>\n

      \"main.dart<\/p>\n

      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 \u2018home\u2019 parameter. You can name it recognizer_screen.dart.<\/p>\n

      \"lib\/main.dart<\/p>\n

      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.<\/p>\n

      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.<\/p>\n

      \"pubsec.yaml<\/p>\n

      Since you are doing this in yaml, indentation is of prime importance.<\/p>\n

      Post this, you need to import the TensorFlow lite library \u2018tflite\u2019 through pubsec.yaml.<\/p>\n

      \"TensorFlow<\/p>\n

      <\/span>Developing the App Layout and the Canvas<\/span><\/h3>\n

      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<\/p>\n

      1. The size of the canvas where the numbers will be finger-painted will remain fixed.<\/p>\n

      For developing the canvas, you will require three flutter tools for painting which are:<\/strong><\/p>\n