DEV Community

Riyas Pullur
Riyas Pullur

Posted on

Chat GPT OpenAI using Flutter

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 
Enter fullscreen mode Exit fullscreen mode

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(), ); } } 
Enter fullscreen mode Exit fullscreen mode

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(), ) ], ), ), ), ); } } 
Enter fullscreen mode Exit fullscreen mode

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), ), ) ], )) ], ); } } 
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
zakblacki profile image
Zak

suggestion you should add at least a screenshot to have in idea result