“Ok Google, use my Flutter app!”

by | Feb 26, 2018 | Flutter | 11 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!

Thanos Snap Effect in Flutter

Have you ever woken up and thought “How awesome would it be to create Thanos snap effect in Flutter”? Probably not. Well… following Google’s Easter Egg I did. 🙂 And I’ve found out that no one did it in Flutter yet so why not give it a try! In this post, I will explain how I created a Thanos snap effect coming from Avengers: Infinity War movie. Enjoy 🙂

Advanced transitions – UI Tickets Challenge

As developers, we have always get into situations where the designers require some fancy transitions which look awesome on the design but are extremely difficult to implement. Being Flutter developer makes it different, makes it fun because we have tools to do it! To prove it in this post, I will continue implementing awesome Buy Tickets design by Dldp and add bottom sheet transitions!

Parallax effect in PageView – UI Tickets Challenge

Parallax effects are awesome. Having elements move in the different speed during scrolling can easily provide the unique feeling for the application and they can make the user think that your app is well-polished. In this post, I will try to achieve parallax effect using PageView, Transforms, Alignments and some basic math.

Share This

Share This

Share this post with your friends!