A Flutter implementation of Google's Dialog Flow improved

Overview

logo

A Flutter implementation of DialogFlow, improved.

Build your integrations with DialogFlow easier and faster.

Pub Package Star on GitHub style: effective dart MIT License MIT License

About the package

Dialog Flow on Flutter, now with Null Safety support!

DialogFlowtter is a package that helps you to build integrations with DialogFlow easier and faster.

  • Authenticate with Google Auth Json
  • Get an authenticated http client so you can talk with your DialogFlow agent
  • Get access to all DialogFlow responses and models easily
  • Inspect what values a DialogFlow response could have

Why DialogFlowtter

The problem with the current DialogFlow integration packages that are available in Pub is that they're:

  • Completely abandoned
  • Not well documented
  • Lack functionality
  • Lack flexibility

This one is intended to solve those problems and add more features that I've seen the users want. Check the TO-DO section for more info on that.

Platform support

This package is fully supported in Android, iOS and Web. We have plans on testing and adding support for Windows, Linux and MacOS as this platforms mature in the Flutter SDK.

Installation

  1. Add the package to your flutter dependencies in you pubspec.yaml:

    dependencies:
        dialog_flowtter: ^0.3.1
  2. Make sure you add your dialog_flow_auth.json to the pubspec.yaml assets:

     flutter:
         uses-material-design: true
         assets:
             - assets/dialog_flow_auth.json
  3. Add your DialogFlow Auth JSON to the assets folder and rename it to dialog_flow_auth.json

You can change the name and Path of your JSON later in the code. Just make sure to use the same one in the pubspec.yaml

  1. Get the packages from:

    flutter packages get

Get your keys

Refer to Create a service account and download the private key file

How to use

Retrieve your keys

You can set your DialogFlow authentication keys in various ways.

  1. From an in-memory JSON
DialogAuthCredentials credentials = DialogAuthCredentials.fromJson(json);
  1. From a JSON file
DialogAuthCredentials credentials = await DialogAuthCredentials.fromFile(path);

This method is asynchronous!

  1. From the Network
DialogAuthCredentials credentials = await DialogAuthCredentials.fromNetwork(url);

This method is asynchronous!

Then, pass your credentials to you DialogFlowtter class

DialogFlowtter instance = DialogFlowtter(
  credentials: credentials,
);

You can also use the shorthand expression of these methods when instanciating the DialogFlowtter class

DialogFlowtter jsonInstance = DialogFlowtter.fromJson(json);

//! async
DialogFlowtter fileInstance = await DialogFlowtter.fromFile(path);

//! async
DialogFlowtter networkInstance = await DialogFlowtter.fromNetwork(url);

Detect intent

One of the core features of DialogFlow is to detect what a person is trying to say. You can do that by detecting an intent that you have defined in your DialogFlow console

  1. Create an instance of DialogFlowtter and set the sessionId that will be used to identify the current conversation of the user with DialogFlow.

It's highly recommended that you use a different sessionId for every conversation that the user establishes with the Assistant

  final DialogFlowtter dialogFlowtter = DialogFlowtter(
    credentials: credentials,
    sessionId: "YOUR_SESSION_ID_HERE",
  );
  1. Create a QueryInput where you can specify what data you want to send to DialogFlow.
  final QueryInput queryInput = QueryInput(
    text: TextInput(
      text: "Hi. How are you?",
      languageCode: "en",
    ),
  );
  1. Send your input to DialogFlow through the detectIntent function.
  DetectIntentResponse response = await dialogFlowtter.detectIntent(
    queryInput: queryInput,
  );

You can check the code for more info on what info you can send and receive

Get the info from the intent

You can access the info returned by DialogFlow from the DetectIntentResponse that the detectIntent function returns.

Get the text from the response

  DetectIntentResponse response = await dialogFlowtter.detectIntent(
    queryInput: QueryInput(text: TextInput(text: "Hi")),
  );
  
  String? textResponse = response.text;

  print(textResponse); // Hi, how may I help you?

response.text returns null if there's no text returned by DialogFlow or if the first message returned it's not of type MessageType.text

Get the message from the response

See Message for more info on what the model properties can be Also, check this issue to see how to create and use Rich Responses like cards and carousels

  DetectIntentResponse response = await dialogFlowtter.detectIntent(
    queryInput: QueryInput(text: TextInput(text: "Hi")),
  );
  
  Message? messageResponse = response.message;

Get audio from the response

  1. Set the audio configuration in the detectIntent function
  DetectIntentResponse response = await dialogFlowtter.detectIntent(
    queryInput: QueryInput(text: TextInput(text: "Hi")),
    
    // You can set your own configuration with the OutputAudioConfig class
    audioConfig: OutputAudioConfig(),
  );
  1. Retrieve the audio from the response
  String? audioBase64 = response.outputAudio;
  Uint8List? audioBytes = response.outputAudioBytes;
  1. Play the audio response with your favorite plugin!

Check Soundpool for playing the audio from memory

Get the response type of the message

  MessageType? messageType = response.message.type;

  print(messageType); /// MessageType.card

response.message returns null if there's no messages returned by DialogFlow

Be sure to dispose the instance when you're done using it

  dialogFlowtter.dispose();

Change the project id

You can change the Project ID that DialogFlowtter will use to find your intents in DialogFlow.

  1. Create an instance of DialogFlowtter
  final DialogFlowtter dialogFlowtter = DialogFlowtter(
    credentials: credentials,
  );
  1. Change the projectId prop of the instance;
  dialogFlowtter.projectId = "deimos-apps-0905";
  • Pro tip. You can do the exact same thing as above with the special Dart's cascade notation.

      final DialogFlowtter dialogFlowtter = DialogFlowtter(
        credentials: credentials,
      )..projectId = "deimos-apps-0905";

Make authenticated http requests to your DialogFlow project

You can access the authenticated http client generated by the package by calling the client attribute in your instance.

Keep in mind that this can become null if you have disposed your instance before.

Create your own authenticated http client

You can get an authenticated, auto refreshing http client with your custom json data if you call the static function

final credentials = DialogAuthCredentials.fromJson(yourJson);
final client = DialogFlowtter.getClient(credentials)

Keep in mind that this only authenticates with json provided by Google.

Check googleapis_auth for more info.

Further considerations

Every time you instanciate DialogFlowtter, the class creates an authenticated http client, with the credentials obtained from the DialogFlow Auth JSON. Be sure to save this instance and reuse it to avoid memory leaks

Memory leaks

Make sure to dispose your DialogFlowtter instance whenever you're done using it. This makes sure to close the authenticated http client and all its StreamSubscriptions to avoid memory leaks.

Too many models

We have coded almost every Dialog Flow model that you may need to use when implementing this package so you don't have to work with annoying Map<String, dynamic> objects. Feel free to ask for any model that is missing to be added to the package.

The models that were not coded are included as annoying Map<String, dynamic> and are tagged with the //? Create model if necessary.

TO-DO

  • Add support for null safety
  • Add support for cards, images, etc.
  • Memory, file and remote auth JSON
  • Secure DialogFlow auth JSON
  • Support audio queries
  • Add a catalog of supported languages
  • Add direct access to common used attributes
  • Support use of custom HTTP Client

Starware

DialogFlowtter is Starware.
This means you're free to use the project, as long as you star its GitHub repository.
Your appreciation makes us grow and glow up.

Contribute

Your help is always appreciated.

You can contribute by checking our contributing guide or opening an issue.

Comments
  • Unhandled Exception: type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'List<dynamic>?' in type cast

    Unhandled Exception: type '_InternalLinkedHashMap' is not a subtype of type 'List?' in type cast

    It happens with this code initialization even it is out of the Future<>() or make it look like the the document. image

    There is no any error with one response text. But always with many text responses text and it does not give any response but the error

    image

    Most of my intent contain more than 1 text responses and pictures.

    I use version 0.3.1

    I'm struggling with it for many days ...

    bug wontfix 
    opened by 61130500217 13
  • [BUG] HandshakeException (HandshakeException: Connection terminated during handshake)

    [BUG] HandshakeException (HandshakeException: Connection terminated during handshake)

    Describe the bug The app works fine for 1-2 minutes, but after running either my implementation or the one downloaded from the latest Github branch, it crashes...

    Contry: Romania.

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots image image image

    Smartphone (please complete the following information):

    • Device: [e.g. iPhone6]
    • Pixel 2
    • OS: [e.g. iOS8.1]
    • Version [e.g. 22]

    Package version

    • Version [e.g. 0.1.0] 0.3.0-nullsafety.0 And the latest version of the Github Branch.... Stack Trace E/flutter (23676): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: HandshakeException: Connection terminated during handshake

    Flutter Doctor Info Add the flutter doctor command output

    Additional context Add any other context about the problem here.

    bug 
    opened by AlexandruFilipescu 7
  • Creating a message type to access in the library

    Creating a message type to access in the library

    I see you have your message types, and can also see you have the card showing in the example. But when using Dialogflow to create responses, what does the library Message components expect to see to set its Message type? For instance, using the Default response, you are given two options, Text and Payload. Action on Google has many more options, but the library doesn't seem to work well with it, not being able to read its response type.

    What Dialogflow response's should we use to allow for the library to extract the message type. Do you have an example?

    opened by SmiffyKMc 6
  • Event input

    Event input

    When i try to raise event input from dialog_flowtter, it shows field input not set. Please help me.

    DetectIntentResponse response = await dialogFlowtter.detectIntent(
          queryInput: QueryInput(
            eventInput: EventInput.fromJson(event),
          ),
          audioConfig: OutputAudioConfig(),
        );
    
    E/flutter (17956): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: Exception: INVALID_ARGUMENT: Field input not set., (400)
    E/flutter (17956): #0      DialogFlowtter.detectIntent
    package:dialog_flowtter/src/dialog.dart:209
    E/flutter (17956): <asynchronous suspension>
    E/flutter (17956): #1      _HomeScreenState.setDialog
    package:email_password_login/screens/home_screen.dart:282
    E/flutter (17956): <asynchronous suspension>
    
    wontfix 
    opened by ramya6016 4
  • To work with webhook payloads

    To work with webhook payloads

    1.The query result parameter of the dialogflow contains two other fields namely webhook source and webhook payload. I have added these two fields in query_result.dart and query_result.g.dart

    "webhookStatuses": [
        {
          object (Status)
        }
      ],
      "webhookPayloads": [
        {
          object
        }
      ],
    

    The structure of the query result can be seen in https://cloud.google.com/dialogflow/cx/docs/reference/rest/v3/QueryResult

    1. Event input works with the event rather than event input.
    {
      "query_input": {
        "event": {
          "name": "username",
          "parameters":{"username":name},
          "languageCode": "en-US"
        }
      }
    }
    

    Changing eventinput in query_input and query_input.g into event made it work.

    opened by ramya6016 4
  • Pass context to Dialogflow with Query Input

    Pass context to Dialogflow with Query Input

    I there a way to pass a context to Dialogflow using the QueryInput? There is a EventInput field to pass an event in. But is it also possible to predefine the conversation context from the flutter app when sending a query?

    And if not, how would it be possible to continue a Dialogflow conversation after a certain period of time (The session of a conversation only lasts for about 20 minutes)?

    I am thankful for any answer.

    opened by finnborchers 4
  • com.google.apps.framework.request.NotFoundException: No DesignTimeAgent found

    com.google.apps.framework.request.NotFoundException: No DesignTimeAgent found

     DetectIntentResponse response = await dialogFlowtter.detectIntent(
          queryInput: QueryInput(text: TextInput(text: text)),
        );
    

    exception arising from this line of code here.

    bug wontfix 
    opened by Nandan-Wewhare 4
  • Google assistance suggestion chip

    Google assistance suggestion chip

    Can you help me to integrate google asistance suggestion chip also how to get the welcome intent. I have a default welcome intent which has some google assistance suggestion chip it's not working when I type manually it gives result.

    wontfix 
    opened by reconftw010101 2
  • Webhook payload

    Webhook payload

    Hi! I am trying to receive the payload from the flask webhook. It gets stored in the webhook payload. But the library API response doesn't show that!

    "webhookSource": "webhook",
        "webhookPayload": {
          "suggestions": [
            "chennai",
            "mumbai",
            "kolkata"
          ]
    
    wontfix 
    opened by abcdef6016 2
  • [BUG ?]  detectIntent throws Exception

    [BUG ?] detectIntent throws Exception

    Describe the bug Using the code provided in the Example, whenever I try to use

        DetectIntentResponse response = await dialogFlowInstance.detectIntent(
          queryInput: queryInput,
        );
    

    I get this;

    Exception has occurred.
    ArgumentError (Invalid argument(s): Invalid internet address accounts.google.com)
    

    Forcing the execution to continue throws the same Exception again, then it seems to go through as I get a real response.

    flutter: DetectIntentResponse(a3b83791-23b1-411a-9156-c31726a8b27c-48f56f2f, QueryResult(how are you?, en, null, smalltalk.greetings.how_are_you, {}, true, [Message(DialogPlatform.PLATFORM_UNSPECIFIED, DialogText([I'm doing very well. Thanks!]), null, null, null, null, null, null, null, null, null, null, null, null, null)], null, Intent(null, null, null, null, null, null, null, null, null, null, null, null, null, null), 1.0, null, null), null, null)

    Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.5.1, on macOS 11.5.2 20G95 darwin-arm, locale en-FR) [!] Android toolchain - develop for Android devices (Android SDK version 30.0.3) ✗ cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest" See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run flutter doctor --android-licenses to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#androi d-setup for more details. [✓] Xcode - develop for iOS and macOS [✓] Chrome - develop for the web [✓] Android Studio (version 4.1) [✓] VS Code (version 1.60.2) [✓] Connected device (4 available)

    I am not targeting Android for now.

    Any idea what's going on here?

    bug wontfix 
    opened by cto-leaps 2
  • Send KnowledgeBase path with queryInput function

    Send KnowledgeBase path with queryInput function

    Is it possible somehow to send KnowledgeBase name/path through queryInput function? or is there any other way to get knowledgebase working. It is working fine in DialogFlow console. So will be helpful if any

    enhancement wontfix 
    opened by faheem4797 2
  • [FEATURE] Browse Carousel Card

    [FEATURE] Browse Carousel Card

    Is your feature request related to a problem? Please describe. I would like to enable users to tap the card when dialog flow response Google assistance browse carousel card so they can open a browser.

    Describe the solution you'd like A clear and concise description of what you want to happen. Displaying multiple options through the browse carousel so user can tap and redirect to an external browser. This is a good feature so we can provide rich media messages to users.

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered. I'm also thinking of create a custom model for the Google Assistance response

    Additional context Add any other context or screenshots about the feature request here. Screenshot 2022-12-28 at 1 22 10 PM Screenshot 2022-12-28 at 1 21 56 PM

    enhancement 
    opened by vidalbenjoe 0
Owner
Deimos
Deimos
Adaptive dialog - Show alert dialog or modal action sheet adaptively according to platform.

adaptive_dialog Show alert dialog or modal action sheet adaptively according to platform. showOkAlertDialog Convenient wrapper of showAlertDialog. iOS

Masayuki Ono (mono) 244 Dec 17, 2022
A flutter plugin for improved row and column widgets with added spacing and optional interleaved dividers

flutter_series A flutter plugin for improved row and column widgets with added s

null 0 Nov 1, 2021
Raden Saleh 53 Jul 27, 2023
Pokedex-Flutter - Pokedex demonstrates modern Flutter development with GetX, Hive, Flow, Adaptive/Responsive Design

Pokedex-Flutter Pokedex demonstrates modern Flutter development with GetX, Hive,

Khoujani 3 Aug 17, 2022
App that simulates a flow of screens for the course of navigation and routes with nuvigator through Flutter

Rotas app App que simula um fluxo de telas para o curso de navegação e rotas com

Heliomar P. Marques 1 Dec 19, 2021
Weibo@Flow - A third party Weibo client for Android with Material You theming (iOS version later). 💪 Powered by Flutter 💪

Weibo@Flow - A third party Weibo client for Android with Material You theming (iOS version later). ?? Powered by Flutter ??

妇校长 6 Sep 19, 2022
Onboarding flow and login screen made with flutter 💖.

?? ?? Flutter Animated Onboarding And Login Page Flutter project for creating animated onboarding and login screen. Star ⭐ the repo if you like what y

Manish Dayma 5 Nov 26, 2022
A #Flutter package that let you draw a flow chart diagram with different kind of customizable elements

Flutter Flow Chart A package that let you draw a flow chart diagram with different kind of customizable elements. Dashboards can be saved for later us

Marco Bavagnoli 50 Jan 1, 2023
Animation Examples: stepper Counter loading Ripple Circle Generator water Flow Animation Wave

AnimatioExamples(stepperCounter-loadingRippleCircleGenerator-waterFlowAnimationWave) A new Flutter project. Getting Started This project is a starting

Ahmed Abdelkader Khedr 9 Nov 1, 2022
Learn how to build a multi-step form flow and how to use bloc to effectively isolate the presentation layer from the business logic layer.

Multi-page Form Flow Learn how to build a multi-step form flow and how to use bloc to effectively isolate the presentation layer from the business log

Sandip Pramanik 15 Dec 19, 2022
Get It - Simple direct Service Locator that allows to decouple the interface from a concrete implementation and to access the concrete implementation from everywhere in your App. Maintainer: @escamoteur

❤️ Sponsor get_it This is a simple Service Locator for Dart and Flutter projects with some additional goodies highly inspired by Splat. It can be used

Flutter Community 1k Jan 1, 2023
Custom calendar dialog widget for flutter with (multi select, single select, date range) mode

some calendar Custom calendar with Multi-select & range configurable calendar New Features Added View Mode Somecalendar #15 Help Maintenance I've take

Irvan Lutfi Gunawan 69 Jan 3, 2023
A wrapper on top of alert dialog provided by flutter.

material_dialog A wrapper on top of alert dialog provided by flutter. Demo Use this package as a library 1. Depend on it Add this to your package's pu

Zubair Rehman 28 Aug 8, 2022
A simple flutter app that downloads a file from the internet, shows a custom-made download progress dialog and saves the file to device's internal storage

http_downloader A simple flutter app that downloads a file from the internet using the http plugin. It has a custom-designed progress dialog which dis

Akora Ing. Debrah Kwesi Buabeng 4 Apr 6, 2021
A simple screen that is shown when your app gets crashed instead of the normal crash dialog. It's very similar to the one in Flutter.

Red Screen Of Death What A simple screen that is shown when your app gets crashed instead of the normal crash dialog. It's very similar to the one in

Ahmad Melegy 178 Dec 9, 2022
A beautiful and customizable Star Rating Dialog package for Flutter

rating_dialog A beautiful and customizable Rating Dialog package for Flutter! Supports all platforms that flutter supports! Import the rating_dialog p

Oliver Martinez 40 Jul 13, 2022
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

Karan Soni 8 Jan 8, 2022
A dialog queue for you to manage your dialogs to display on flutter platform

A dialog queue for you to manage your dialogs to display on flutter platform 中文 Features Support pop dialog orderly Support pop dialog by priority Sup

Raymond 4 Nov 1, 2022
Internationalized dialog for picking a single month from an infinite list of years.

month_picker_dialog Internationalized material style dialog for picking a single month from an infinite list of years. This package makes use of the i

Dimitri Krivoj 65 Nov 30, 2022