Home / DialogFlow ES / How to integrate Dialogflow into your Flutter app
DialogFlow ES | Mobile App

How to integrate Dialogflow into your Flutter app

This is not a tutorial. But I want to provide some pointers because it seems people are not clear on an important aspect of Dialogflow integrations.

I got this question on YouTube:

Question about Flutter integration

The 4 Layers of a Dialogflow bot

I have explained the concept of the 4 layers in a Dialogflow bot before.

In the case of a Dialogflow + Flutter (mobile app) integration, you are responsible for both the middleware layer AND the UI layer. This is what makes it so complex (or at least so much more work).

How to create the integration

So here is what you need to do to integrate Dialogflow into your Flutter app:

1 Create the middleware code

The middleware code is responsible for forwarding the message from your Flutter app to your Dialogflow agent using the REST API. It can in theory be part of the Flutter app itself, but best practices usually dictate that you put the middleware code on a server so you don’t store the client secret JSON file on the local device.

2 Decide on the UI components which you will support

When you get started, you will probably be very happy to just see text messages going back and forth. 🙂

But eventually, you will probably want to add rich responses such as buttons, clickable hyperlinks, cards and other such rich responses.

As it turns out, Dialogflow doesn’t provide any defaults on this front. But you can get inspiration from a few channels to see the kind of rich responses which are useful in practice.

The Dialogflow Messenger integration supports buttons, clickable links, accordion etc.

Dialogflow Messenger

The Google Assistant integration supports a carousel control.

Google Assistant

But probably the best source of inspiration (IMO) is Zoho’s Dialogflow integration. They support a lot of rich responses, but more importantly, the rich responses are also very well implemented in practice.

In fact, they very neatly split the rich responses into input cards (user can interact and provide an “input”) and display cards (doesn’t support inputs, just show a response).

Input cards supported by Zoho’s Dialogflow integration
Display cards supported by Zoho’s Dialogflow integration

It goes without saying that this step also involves coming up with a suitable JSON payload format. For example, the JSON payload format for the multiple select option in Zobot (Zoho’s Dialogflow integration) looks like this:

{ "platform": "ZOHOSALESIQ", "replies": [ "We have the following loungers stacked up in our store" ], "input": { "type": "multiple-select", "options": [ "Classic", "Chalse", "Recliner", "Ploolside", "Wing" ], "max_selection": "3" } }
Code language: JSON / JSON with Comments (json)

And you will have to add this JSON into the Custom Payload textarea inside your Dialogflow intent.

Custom Payload corresponding to the multiple select option in Zobot

Usually, your middleware code should be able to parse this JSON format and send it to your Flutter app so your app can then render the appropriate widget (see next point).

3 Write the code to handle user interaction with your UI Component

This is likely to be the most challenging aspect of your integration.

Let us consider the multiple select option used in Zobots.

The multiple select option in Zoho’s Dialogflow integration

Notice that you will first select multiple options by using the checkboxes. And then there is a second step where you need to also click on the Confirm button (can you guess why this is?) before the options are sent across to your Dialogflow bot.

Now let us suppose you want to implement something similar. So in the Flutter widget that you create, you need to have all these things – rendering multiple options as checkboxes, having a confirmation button at the bottom of the widget, and finally, once the user clicks on the Confirm button, you need to read the list of options which were selected and construct the text (Zoho sends the list of values as a simple comma separated string) matching the selected options.


Building a Dialogflow integration for a Flutter bot which can also support rich responses is a fairly complex task. You should be prepared to invest a fair amount of developer time into such a project.

<— End of article —>

This website contains affiliate links. See the disclosure page for more details. 
"The magic key I needed as a non-programmer"

The custom payload generator was the magic key I needed (as a non-programmer) to build a good demo with rich responses in DialogFlow Messenger. I've only used it for 30 minutes and am thrilled. I've spent hours trying to figure out some of the intricacies of DialogFlow on my own. Over and over, I kept coming back to Aravind's tutorials available on-line. I trust the other functionalities I learn to use in the app will save me additional time and heartburn.

- Kathleen R
Cofounder, gathrHealth
"Much clearer than the official documentation to be honest"

Thanks a lot for the advice (of buying and following your videos)! They helped a lot indeed. Everything is very clear when you explain, much clearer than the official documentation to be honest 🙂

Neuraz T
Review for Learn Dialogflow CX
"I will strongly recommend this course because even I can learn how to design chatbot (no programming background)"

I think Aravind really did a great job to introduce dialogflow to people like me, without programming background. He organizes his course in very clear manner since I have been a college professor for 20 years. It is very easy for me to recognize how great Aravind’s course is! Very use-friend and very easy to follow. He doesn’t have any strong accent when he gives the lectures. It is so easy for me to understand. Really appreciate it.

Yes, I will strongly recommend this course because even I can learn how to design chatbot (no programming background) after studying Avarind’s course, you definitely can!

Ann Cai
Review for Learn Dialogflow ES

Similar Posts