Complete Dart Code (Chat Screen)
Here is the total Dart code representing the chat screen.
Dart
import 'dart:convert';import 'package:chatbot/message.dart';import 'package:chat_bubbles/bubbles/bubble_normal.dart';import 'package:flutter/material.dart';import 'package:http/http.dart' as http;class ChatScreen extends StatefulWidget { const ChatScreen({super.key}); @override State<ChatScreen> createState() => _ChatScreenState();}class _ChatScreenState extends State<ChatScreen> { TextEditingController controller = TextEditingController(); ScrollController scrollController = ScrollController(); List<Message> msgs = []; bool isTyping = false; void sendMsg() async { String text = controller.text; String apiKey = "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"; 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!"))); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("Chat Bot"), ), body: Column( children: [ const SizedBox( height: 8, ), 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, )); }), ), 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, ) ], ), ], ), ); }} |
Voila, your application is coded entirely and ready to be built, and run to get the output.
Step 12:
To run your app, select Run from the toolbar and click on Run Without Debugging or CTRL + F5 then select your preferred device to test the app. You can modify the code and update the UI as per your choice.
Output
Congratulations on building our chatbot. Here is the final output of the app.
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.