Flutter Tensorflow Tutorial

<p>![](../../../Uploads/64b566c3-492c-4436-aff3-6e042f6b7bee.pngwidth="50%height="auto]( Today let's color: rgb(13, 13, 13); font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap; background-color: rgb(249, 249, 249);](learn how to build a tensorflow model on Techable Machine and then run it on flutter app.color: rgb(13, 13, 13); font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap; background-color: rgb(249, 249, 249);]( color: rgb(13, 13, 13); font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap; background-color: rgb(249, 249, 249);](Source code : <a href="https://github.com/theindianappguy/machine_learning_flutter_app">https://github.com/theindianappguy/machine_learning_flutter_appfont-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";</a> Youtube Tutorial : <a href="https://www.youtube.com/watch?v=-5kUv47xKy0">https://www.youtube.com/watch?v=-5kUv47xKy0font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";</a> Here is how it works when we will press the floating action button we will select an image file and our model will tell if it is a dog or a cat</p> <p>![](https://fluttercentral.com/Uploads/eb77c251-d192-4924-b183-e19a06ac21ef.pngwidth="50%height="auto](</p> <p>For this first we will Create a new flutter project, then remove all the boiler plate code in the main.dart in lib Now first lets build our model for this we will use Teachable Machine it is a web platform by google where we can create model and can test, and export to run on mobile Step1: Visit <a href="https://teachablemachine.withgoogle.com/">https://teachablemachine.withgoogle.com/font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";</a> click "font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";](get startedfont-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";](then select Image Project ![](https://fluttercentral.com/Uploads/a8bce568-2d41-42b5-830b-f66b88e53b88.pngwidth="50%height="auto]( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem;](Step2: There will be two class class1 & class 2 rename them to cat and dog, then now we need images to train our model which you can get here <a href="https://www.kaggle.com/tongpython/cat-and-dog">https://www.kaggle.com/tongpython/cat-and-dogbackground-color: rgb(255, 255, 255); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem;</a> ![](https://fluttercentral.com/Uploads/d98832ee-37c0-4290-8766-6ae56b9b6f37.pngwidth="50%height="auto]( then upload the images which we download for cat and dog respectively Step3: Click train Model, let it train don't close or switch tab Step4: Click Export Model ![](https://fluttercentral.com/Uploads/9abcade4-124d-4ea6-9ab2-c343d9adc8a4.pngwidth="50%height="auto]( Step5: Click on Download my model, it will convert and download the model now we have the model lets work on Flutter app Step1: Visit the build.gradle file in app there inside android{font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";](} add this ![](https://fluttercentral.com/Uploads/90a5b6df-61b7-4a35-b1b2-ed07c332411f.pngwidth="50%height="auto]( Step2: Make sure the minSdkVersion is 19 ![](https://fluttercentral.com/Uploads/977eda3b-25d6-4155-a7ea-ef4425b0e278.pngwidth="50%height="auto]( Then now time to get packagesStep3: Get these packages ![](https://fluttercentral.com/Uploads/5011c750-1d27-4020-9760-50f83f1aeae2.pngwidth="50%height="auto]( Step4: Code for main.dart copy from here <a href="https://github.com/theindianappguy/machine_learning_flutter_app/blob/master/lib/main.dart">https://github.com/theindianappguy/machine_learning_flutter_app/blob/master/lib/main.dartfont-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";</a> Step5: Create a assets folder and add the file which we download , (obviously first extract) you will have two file one is model and the other is labes then add this in pubspec.yaml file ![](https://fluttercentral.com/Uploads/48a3d49a-2847-47e7-9a85-8a44c1cfc3d9.pngwidth="50%height="auto]( Now run, font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem;](Hurray we have finally create a Flutter app that runs Tensorflow lite modelfont-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem;]( If you like the blog and it helped then do consider Recommending me on Linkedin for respective skills <a href="https://www.linkedin.com/in/lamsanskar/">https://www.linkedin.com/in/lamsanskar/font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";</a> Thanks, have a great day aheadSanskar Tiwari</p>