Dart Code for UI
Step 8:
Now, we need a chatbox at the bottom of the screen to type the text and a send button for sending the typed prompt to the chatbot for getting a response from it. Below is the Dart UI code for the same.
Dart
Row( children: [ Expanded( child: Padding( padding: const EdgeInsets.all(8.0), child: Container( width: double.infinity, height: 40, decoration: BoxDecoration( color: Colors.grey[200], borderRadius: BorderRadius.circular(10)), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 8), child: TextField( controller: controller, textCapitalization: TextCapitalization.sentences, onSubmitted: (value) { sendMsg(); }, textInputAction: TextInputAction.send, showCursor: true, decoration: const InputDecoration( border: InputBorder.none, hintText: "Enter text"), ), ), ), ), ), InkWell( onTap: () { sendMsg(); }, child: Container( height: 40, width: 40, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(30)), child: const Icon( Icons.send, color: Colors.white, ), ), ), const SizedBox( width: 8, ) ], ), |
Usage of the above code
- A Row is taken to arrange the chatbox and send button horizontally in a widget.
- A Container is taken and which is wrapped in an Expanded widget to make it expand within the row and give space for the user to type. It is also decorated by giving a grey colour and some rounded borders.
- A TextField is used inside the container, which helps the user to enter text and it’s stored/handled by the controller that we defined previously.
- An Icon widget is used which is wrapped inside another Container with a border having a send Icon wrapped inside InkWell widget to make it clickable, acting like a button.
- We can notice that if the text is submitted or send button is clicked, a function named sendMsg() is getting called which we will be implementing in the below steps.
Step 9:
Now we are remaining with adding chat bubbles (The individual rounded rectangular boxes that appear for each message). This can be achieved with the package that we imported previously – chat_bubbles. Below is the Dart UI code implementing it.
Dart
Expanded( child: ListView.builder( controller: scrollController, itemCount: msgs.length, shrinkWrap: true, reverse: true, itemBuilder: (context, index) { return Padding( padding: const EdgeInsets.symmetric(vertical: 4), child: isTyping && index == 0 ? Column( children: [ BubbleNormal( text: msgs[0].msg, isSender: true, color: Colors.blue.shade100, ), const Padding( padding: EdgeInsets.only(left: 16, top: 4), child: Align( alignment: Alignment.centerLeft, child: Text("Typing...")), ) ], ) : BubbleNormal( text: msgs[index].msg, isSender: msgs[index].isSender, color: msgs[index].isSender ? Colors.blue.shade100 : Colors.grey.shade200, )); }), ), |
Usage of the above code
- A ListView.builder() is used to render all the chat bubbles i.e. individual messages on the screen.
- It is given some parameters like
-> controller – For scroll controller
-> itemCount – Size of msgs List
-> shrinkWrap – Creates a scrollable, linear array of widgets that are created on demand.
-> reverse – To display the most recently added messages at the bottom of the list. - BubbleNormal widget is used to display individual messages with some colour.
- If isTyping is true and the index is 0, then typing… animation/text is shown, indicating to the user that the chatbot is typing something. Else, the message is shown based upon whether it is from the user or chatbot respectively.
Here is the final image of the UI that is coded up until now.
Dart Code for Functionality
Step 10:
The core function sendMsg() is implemented in this step. Add this function below the variables declared at the start. Below is the dart code for the same.
Note: Replace your-api-key with the API key that you generated and saved in past.
Dart
void sendMsg() async { String text = controller.text; String apiKey = "your-api-key"; controller.clear(); try { if (text.isNotEmpty) { setState(() { msgs.insert(0, Message(true, text)); isTyping = true; }); scrollController.animateTo(0.0, duration: const Duration(seconds: 1), curve: Curves.easeOut); var response = await http.post( Uri.parse("https://api.openai.com/v1/chat/completions"), headers: { "Authorization": "Bearer $apiKey", "Content-Type": "application/json" }, body: jsonEncode({ "model": "gpt-3.5-turbo", "messages": [ {"role": "user", "content": text} ] })); if (response.statusCode == 200) { var json = jsonDecode(response.body); setState(() { isTyping = false; msgs.insert( 0, Message( false, json["choices"][0]["message"]["content"] .toString() .trimLeft())); }); scrollController.animateTo(0.0, duration: const Duration(seconds: 1), curve: Curves.easeOut); } } } on Exception { ScaffoldMessenger.of(context).showSnackBar(const SnackBar( content: Text("Some error occurred, please try again!"))); } } |
Usage of the above code
- The text entered by the user is obtained using the controller.
- If the text is not empty, a message is inserted into the msgs list and isTyping is made true, also the list is scrolled to the bottom to make the newly inserted message appear.
- The ChatGPT API is called on the “completions” end-point with header (apiKey, content-type) and body (text given by the user).
- Response is then parsed and added to the msgs list and displayed to the user.
Step 11:
The final step remaining is to update the main.dart file where the application starts running the code. Add the following dart code in the main.dart file.
Dart
import 'package:chatbot/chat_screen.dart';import 'package:flutter/material.dart';void main() async { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: ChatScreen(), debugShowCheckedModeBanner: false, ); }} |
How to Create a ChatBot Application using ChatGPT API in Flutter?
A ChatBot is a computer program that uses Artificial Intelligence (AI) and Natural Language Processing (NLP) to understand customers’ questions and give responses to them simulating human behavior. Building our own ChatBot from scratch requires us to train the Machine Learning (ML) model with rigorous amounts of text-based data, providing it with different contexts of real-world conversations. Now we don’t need to perform that meticulous task, as OpenAI already developed ChatGPT which was trained on billions of words of textual data which made it very powerful.
In this article, we will explain the total process of building a Mobile ChatBot Application using ChatGPT API and Flutter. We will be using Flutter Framework to build the application for Android. Flutter is an open-source framework developed and supported by Google to build and deploy hybrid applications quickly.
A sample video is given below to get an idea about what we are going to do in this article.