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 (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.