How integrate chatGPT openAI in flutter
What is chatGPT?
ChatGPT is a chatbot launched by OpenAI in November 2022. It is built on top of OpenAIβs GPT-3 family of large language models, and is fine-tuned with both supervised and reinforcement learning techniques.
in pubspec.yaml
chat_gpt_sdk: ^1.0.2+1
velocity_x: ^3.6.0
main.dart
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Chat GPT',
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
primarySwatch: Colors.blue,
),
home: ChatScreen(),
);
}
}
chatscreen.dart
import 'dart:async';
import 'package:chat_gpt_sdk/chat_gpt_sdk.dart';
import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';
import 'chat_message.dart';
class ChatScreen extends StatefulWidget {
const ChatScreen({Key? key}) : super(key: key);
@override
State<ChatScreen> createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
final TextEditingController _textEditingController = TextEditingController();
final List<ChatMessage> _messages = [];
ChatGPT? chatGPT;
StreamSubscription? _subscription;
@override
void initState() {
chatGPT = ChatGPT.instance;
super.initState();
}
@override
void dispose() {
_subscription?.cancel();
super.dispose();
}
void sendMessage() {
/* final String text = _textEditingController.text;
if (text.isNotEmpty) {
_textEditingController.clear();
final ChatMessage message = ChatMessage(text: text, sender: "Me");
}*/
ChatMessage _message =
ChatMessage(text: _textEditingController.text, sender: "User");
setState(() {
_messages.insert(0, _message);
});
_textEditingController.clear();
final request = CompleteReq(
prompt: _message.text, model: kTranslateModelV3, max_tokens: 200);
_subscription = chatGPT!
.builder("Your-api-Key")
.onCompleteStream(request: request)
.listen((response) {
Vx.log(response!.choices[0].text);
ChatMessage botMessage =
ChatMessage(text: response.choices[0].text, sender: "bot");
setState(() {
_messages.insert(0, botMessage);
});
});
}
Widget _buildTextComposer() {
return Row(
children: [
Expanded(
child: TextField(
onSubmitted: (value) => sendMessage(),
controller: _textEditingController,
decoration:
const InputDecoration.collapsed(hintText: "Send a message"),
)),
IconButton(onPressed: () => sendMessage(), icon: const Icon(Icons.send))
],
).px12();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.black,
title: Text(
"Chat GPT OpenAI",
style: TextStyle(color: Colors.white),
),
),
body: SafeArea(
child: Container(
padding: EdgeInsets.only(left: 10, right: 10, bottom: 5),
child: Column(
children: [
Flexible(
child: /*Container(
height: context.screenHeight,
)*/
ListView.builder(
reverse: true,
padding: Vx.m8,
itemCount: _messages.length,
itemBuilder: (cnx, index) {
return /*Container(
height: 100,
color: Colors.red,
).p(5)*/
_messages[index];
})),
Container(
decoration: BoxDecoration(color: context.cardColor),
child: _buildTextComposer(),
)
],
),
),
),
);
}
}
API generation below link
https://beta.openai.com/account/api-keys
chat_message.dart
import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';
class ChatMessage extends StatelessWidget {
ChatMessage({Key? key, required this.text, required this.sender})
: super(key: key);
final String text;
final String sender;
@override
Widget build(BuildContext context) {
return Row(
children: [
Container(
margin: EdgeInsets.only(right: 16),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Text(
sender[0],
style: TextStyle(color: Colors.black),
),
),
),
Expanded(
child: Column(
children: [
Text(
sender,
/* style: Theme.of(context).textTheme.subtitle1,*/
style: TextStyle(color: Colors.white),
)
.text
.subtitle1(context)
.make()
.box
.alignCenter
.white
.alignCenterLeft
.p3
.makeCentered(),
Container(
margin: EdgeInsets.only(top: 5.0),
child: Text(
text.trim(),
style: TextStyle(color: Colors.white),
),
)
],
))
],
);
}
}
Github Repository link
https://github.com/riyaspullurofficial/chatGPTapp-flutter
Conclusion
Request any answer by any question clear and exact matched answer provide openAI.
Top comments (1)
suggestion you should add at least a screenshot to have in idea result