“Ok Google, use my Flutter app!”

by Feb 26, 2018Flutter11 comments

In this post I would like to show you how I integrated Google Assistant/Google Now with my WeightTracker app written in Flutter (works only on Android).

First, let’s see what we are trying to accomplish:

(I had to type in the message because the recording tool was capturing mic input, so Google Assistant couldn’t hear what I was saying)

How to achieve this? Let’s walk through it!

Let your app catch the intent.

Google Assistant actions are based on Voice Actions. If we want to integrate your app with it we need to pick one from the list (you can find list of Voice Actions here). After we choose an action (for me it was Take a note) we can add a proper intent-filter to our AndroidManifest.xml:

. . .

Handle the intent

When our app is able to catch the intent, we need to handle it in MainActivity. For my Note intent it looks like this:

What happens here is if we get an ACTION_CREATE_NOTE intent and it is a text, we simply extract the value and store it in the private field.

. . .

Expose note to Dart

Since we cannot explicitly tell our Flutter app that we have a note, we can only return it when we are asked for it. To do that all we have to do is add new MethodChannel in MainActivity:

When MethodChannel “getSavedNote” is being invoked, we return savedNote and then set it to null.

. . .

Ask for data

You can do it in many ways, I stayed with the approach proposed on Flutter page.

Inside onInit function, I simply invoke MethodChannel method for saved note:

If there is any note saved I try to find a number there (I know it’s not perfect) and then return it. According to our app architecture, we can store that value in the database, use it in setState or do whatever we want.

When it comes to coding we’re all done. However saying “Ok Google, save a note my weight is 80” or just“Ok Google, note to self 80” may not work. We have to choose our app as a default one to use it. To do that with Google Assistant you need to say “Save a note”  and then press default app’s icon and choose WeightTracker (present on the right).

. . .

And that’s it!

Interesting facts:

  • You can say “save a note blabla in Evernote” and it will pick Evernote. However, if you say “save a note blabla in MyApp” it won’t work. Don’t ask me why.
  • If you call fetching function in onInit function, it won’t get invoked if you say “ok google…” while your app is in the foreground.
  • There is no option to create your own voice actions 🙁
  • If you download WeightTracker from Google Play and set it as default noting app, you should be able to use it with Google Assistant/Google Now. If not, please tell me!

If you would like to do it on your own, here are important materials: Voice Actions, Handling Intents.

If you are interested in full code, here are links to the repositoryMainActivity class, onInit method, and note handling method. (I am using Redux architecture)

If you have any questions, feel free to ask! 🙂

Cheers 🙂

Marcin Szałek

Founder of Fidev

Flutter enthusiast since Alpha release in 2017. Believes that sharing is caring, which lead him to start a technical blog dedicated fo Flutter in its early days. Loves to see beautiful designs become real apps and is willing to help make it happen. Enjoys sunny beaches far from home.

Join the newsletter!

Join the newsletter to keep track with latest posts and get my special Widget to animate views' entrances without any hassle for FREE!

Check out other posts!

Interacting with Widgets using Framy

Interacting with Widgets using Framy

Have you ever developed a widget or a page and you wanted to make sure it works correctly in different scenarios but then it turned out that you can’t just reproduce all the cases you want to cover? Framy may solve such problems!

Water Drop effect in Flutter

Water Drop effect in Flutter

In this post, I’d like to share with you how to achieve a water drop effect in Flutter. Why would you spend your time learning such skill? Well, I have no idea but it looks cool so let’s get started! 😀

3D Kinetic Type Poster in Flutter

3D Kinetic Type Poster in Flutter

In this post, we’re going to learn how to create probably the most useless effect on this blog. 😀 The design is named 3D CSS Kinetic Type Poster. It was created by Pete Barr, who shared the design on dribbble and the front-end implementation on codepen. Let’s see if we can do it in Flutter as well!

Share This

Share This

Share this post with your friends!