How to create a Chatbot with response options in flutter?

Question

See the image below:

How Can I implement auto responses using DialogFlow or any other chatbot frameworks in flutter.

I just want to know the method to get the desired result highlighted in the red region.

Solution 1

Edit: Using dialogflow_v2 it seems you could do something like this to get custom suggestions:

In the Dialogflow console you could add a custom payload to your messages, like this:

{"suggestions": ["Reply 1", "Reply 2"]}

Create a BotSuggestions class:

class BotSuggestions {
  List<String> suggestions = [];

  BotSuggestions(List<dynamic> messages) {
    messages.forEach((message) {
      if (message['payload'] != null) {
        List<dynamic> suggestionList = message['payload']['suggestions'];
        suggestionList.forEach((suggestion) => suggestions.add(suggestion));
      }
    });
  }
}

Then, you could use it like this:

var botSuggestions = BotSuggestions(response.getListMessage());
print(botSuggestions.suggestions);

---

Here is a complete example of how to use it:

var userMessage = "Hi!!!";
print('User: $userMessage');
response = await dialogflow.detectIntent(userMessage);
var botSuggestions = BotSuggestions(response.getListMessage());
print('Bot: ${response.getMessage()}');
print('Suggestions: ${botSuggestions.suggestions}');

userMessage = botSuggestions.suggestions.first;
print('User: $userMessage');
response = await dialogflow.detectIntent(userMessage);
botSuggestions = BotSuggestions(response.getListMessage());
print('Bot: ${response.getMessage()}');
print('Suggestions: ${botSuggestions.suggestions}');

And this would be the output:

I/flutter ( 5917): User: Hi!!!

I/flutter ( 5917): Bot: Hi! How are you doing?

I/flutter ( 5917): Suggestions: [Reply 1, Reply 2]

I/flutter ( 5917): User: Reply 1

I/flutter ( 5917): Bot: Sorry, what was that?

I/flutter ( 5917): Suggestions: []

---

I asked about this in the package repository to see if there's another way to do it, here you can follow the thread: How to get suggestions in v2?.

Solution 2

I may recommend u this guide

1. Here you will learn how to use dialogflow to your app

   https://medium.com/flutterpub/flutter-and-bots-dialogflow-d490fc7e5aaf

2. Here you will learn how to use Chip widget in flutter

   https://api.flutter.dev/flutter/material/Chip-class.html

3. Sample code

   how to create horizontal and vertical scrollable widgets in flutter

I hope all This Will help you.

Solution 3

You can use dialogflow to generate the reponse for the bot, then add the chip widegt to represent an actionable button as below:

Chip
(avatar: CircleAvatar(
backgroundColor: Colors.grey.shade800,
child: Text('AB'),
),
label: Text('Aaron Burr'),)

Also, you can build the chatbot using Dialogflow and provide the option buttons to the user.

There are many ways to add the option buttons such as custom payload, Google assistant, etc. Using custom payload you can add your custom rich message type.

To build the chatbot with option buttons and add it in your flutter app you can use the platform like Kommunicate that allows you to deploy your bot into mobile applications.

To integrate this chatbot into your flutter application you can check out this reference documentation.