Updated on December 15, 2023

What is Flutter?

Flutter is Google’s Open-Source UI development software kit. Developers use Flutter to build an application’s user interface (UI) using Flutter. The advantage of Flutter is that there is a single codebase for both Android and iOS.

Build natively compiled apps for mobile, web or desktop using Flutter. Adding new features and functionality is also a breeze because the framework is extensible. Flutter also gives you access to widgets that let you build custom user interfaces.

Google Ads, Xianyu by Alibaba, and Postmuse are some of the big names that have used Flutter. Ever since its introduction in 2018, Flutter has been going from strength to strength.

generative-ai-book-a-demo-cta

A brief introduction to ChatGPT

ChatGPT is an Artificial Intelligence chatbot developed by OpenAI. When it came into mainstream on November 30, 2022, it took the internet by storm. It became the fastest growing consumer application in history, reaching one million users in just 5 days since its launch (for comparison, it took Instagram about 2.5 years to hit this milestone).

The training for ChatGPT took place on a lot of training data, including the web. ChatGPT can act as a powerful coding assistant, giving you detailed step by step instructions on building websites or mobile apps.

We asked ChatGPT to build a simple calculator app using Flutter, for a complete novice to coding. This is what the response looks like.

ChatGPT also gave us the entire code snippet to create the calculator, which looks like this:

As you can see, anyone who has a basic understanding of computers can use ChatGPT to learn and build apps using Flutter chatbot.

Let us see how you can integrate ChatGPT with Flutter chatbot, using you can follow this steps:

Step 1: Log in to the Kommunicate dashboard.

Go to your Kommunicate dashboard and navigate to the Bot Integration section.

Look for the Kompose section and click on Integrate Bot.

Next, complete the setup of your bot by specifying its name, language, and human handoff setting. Once you configure these, proceed to finalize the bot setup.

Step 2: Create Welcome Message & Intents for your Flutter chatbot

Navigate to the ‘Manage Bots‘ section and choose the bot you have created.

Next, you need to set up the welcome message for your chatbot. The welcome message is the initial message that the chatbot sends to the user who starts a conversation.

Click on the “Welcome Message” section, then, type the message that your chatbot should show to the users when they open the chatbot and save the welcome intent.

After creating the welcome message, the next step in chatbot building is to create Intents (questions and answers). In the “Answer” section, you can add all the possible user’s questions and the chatbot’s corresponding responses.

To get started, click on the “+Add” button and provide an “Intent name”.

  • “Step 1: User Says”, you need to specify the phrases/questions that will trigger the chatbot’s response. In the
  • “Step 2: Bot Says” section, you need to specify the chatbot’s response to the user’s message. You can add multiple answers and follow-up responses to make the chatbot more interactive.

You can also refer to this document for Kompose chatbot integration with Kommunicate.

Step 3: Activate ChatGPT


On the same page, you will find ⚙️Settings (top right corner of the page).

Click on Settings, the first option would be “Connect with OpenAI ChatGPT”, enable it.

And lastly, disable Small Talk (the last option on the same page).

Step 4: Activating the Chatbots

After creating a bot, you can activate it by setting it as the default bot in the conversation routing rules section.

Follow the steps below to do this:

Click on the Settings icon (below the profile picture) and select “Conversation and then Rules”

Next, look for “Routing rules for bots.”

Then, select the desired bot from the list and set it as the default bot.

rom now on, this bot will automatically respond to all of the conversations.

Step 4: Install Kompose Chatbot into Flutter App

With Kommunicate Flutter SDK, you can effortlessly incorporate personalized live chat in your applications. It has support for numerous hybrid platforms that are widely used at present. This SDK offers a quick and efficient method to develop native apps for both Android and IOS.

Before you begin using Kommunicate, ensure that your applications are compatible with Xcode 11 or higher and that AndroidX is installed.

Add Flutter SDK to your app

  1. Add the below dependency in your pubspec.yaml file:
dependencies:
  //other dependencies
  kommunicate_flutter: ^1.6.4

2. Install the package as below:

flutter pub get

3. Import the kommunicate_flutter in your .dart file to use the methods from Kommunicate:

import 'package:kommunicate_flutter/kommunicate_flutter.dart';

4. For iOS, navigate to YourApp/iOS directory from the terminal and run the below command:

pod install

Note: Kommunicate iOS requires minimum iOS platform version 12 and uses dynamic frameworks. Make sure you have the below settings at the top of your iOS/Podfile:

 platform :ios, '12.0'
 use_frameworks!

Get your Application Id

Navigate to the Install section to get your APP_ID. This APP_ID is used to create/launch conversations.

Generative AI Powered Chatbot

Launch conversation

With Kommunicate’s build conversation function, you can create and launch conversations directly, without the need for authentication, initialization, and extra steps. You can customize the process by building the conversation object based on your specific requirements.

To launch a conversation, you need to create a conversation object, which ypu then need to pass to the build conversation function. Based on the parameters of the object, the conversation is created and launched.

Here’s an example of how to launch a conversation:

dynamic conversationObject = {
'appId': '',// The APP_ID obtained from kommunicate dashboard.
};
KommunicateFlutterPlugin.buildConversation(conversationObject) .then((clientConversationId) { print("Conversation builder success : " + clientConversationId.toString()); }).catchError((error) { print("Conversation builder error : " + error.toString()); });

Now you are ready to chat with the ChatGPT powered bot on your Flutter app!

ChatGPT bot on your Flutter app

Kommunicate Sample application: 

Download the sample app from here which includes ready-to-use Kommunicate Flutter SDK.

Go ahead and explore the Flutter chatbot integration with the Kompose chatbot.


At Kommunicate, we envision a world-beating customer support solution to empower the new era of customer support. We would love to have you on board to have a first-hand experience of Kommunicate. You can signup here and start delighting your customers right away.

Write A Comment

Close

Devashish Mamgain

I hope you enjoyed reading this blog post.

If you want the Kommunicate team to help you automate your customer support, just book a demo.

Book a Demo

You’ve unlocked 30 days for $0
Kommunicate Offer

Upcoming Webinar: Conversational AI in Fintech with Srinivas Reddy, Co-founder & CTO of TaxBuddy.

X