Shazam for food: let’s code Jian Yang app!

If you have watched Silicon Valley you’ll remember the app to detect (almost) every foods. Let’s write it using Flutter!

Silicon Valley 4x04 scene

Some weeks ago I was asked to give a talk about Flutter, but I didn’t want to make a classic talk explaining the general features of the framework.

So, what about making a sort of codelab using Flutter and the new ML Kit for Firebase? This is the written version of that talk.

Install Flutter

Go here to install Flutter for your OS. I won’t explain this, the official guide is good enough.

Create a new Flutter app

Use the Cli to create a new Flutter app: $ flutter create hotdog_detector

or

Open Android Studio and create a new Flutter app

Remember to remove all the boilerplate. You should keep just the main, MyApp and MyHomePage with the state and an empty Scaffold .

Add the camera plugin

An essential feature of our app is the camera.

We have to use a plugin.

Go to the pub!

Yay! Pub!

No, not that pub. This pub.

There you can search for Dart/Flutter packages and install it easily.

Let’s search for a camera package!

The first seems fine.

Add it to the pubspec.yaml file.

Paste camera: ^0.2.4 under dependencies.

Ios setup

Add two rows to the ios/Runner/Info.plist :

one with the key Privacy - Camera Usage Description and a usage description (for example “We need to use your camera to detect hotdogs!”.

and a usage description (for example “We need to use your camera to detect hotdogs!”. and one with the key Privacy - Microphone Usage Description and a usage description (event if we won’t use it).

Something like this:

<key>NSCameraUsageDescription</key>

<string>Can I use the camera please?</string>

<key>NSMicrophoneUsageDescription</key>

<string>Can I use the mic please?</string>

Android setup

Regarding Android you should only raise the minimum Android sdk to 21 (or higher) in the android/app/build.gradle file.

Use the plugin in the app

In _MyHomePageState add a CameraController needed to control the camera:

Override the initState method and use it to initialize our new variables:

Override the dispose method to dispose the camera:

Now fill the body property of the Scaffold with this code:

_isReady() is a method that checks if the camera plugin is initialized. Add it to _MyHomePageState :

_loading is a variable that contains the loading state of the app. Even this should be added to _MyHomePageState :

Set the backgroundColor to Colors.black to have a better look.

Nice 😉

We’re not yet done. Now we should take the photo.

Before taking the photo we should get a path (a temporary one should be good) to write the photo in.

There is a plugin even for that! https://pub.dartlang.org/packages/path_provider

Add path_provider: ^0.4.1 in the pubspec.yaml file in the dependencies section.

Add a FAB to the FloatingActionButton property of the Scaffold :

_elaborateImage is the method that takes and elaborates the photo setting a new state:

Add the variable _itsHotDog that holds the state of the detection in _MyHomePageState

As you can see we’re setting the _loading property to true in order to show the CircularProgressIndicator

But we’re missing the FirebaseML plugin!

Yes, you will often use plugins in flutter

Add FirebaseML plugin

Go here to read about FirebaseML plugin.

Add firebase_ml_vision: ^0.2.0+2 to the dependencies and import it in main.dart

The FirebaseML service takes as input and image and gives as output a list of labels. We’re searching for hot dogs so we’ll search the “Hot dog” label!

Add Firebase

To add Firebase read out the official guide. Follow it and everything will be ok.

Add the result labels

Take body of the HomePage Scaffold and modify it in this way:

AnimatedContainer is a Container that animates itself when a property changes, interpolating the translation in a smooth and nice way.

Done!