How To Implement ChatGPT In Flutter


In this article, we will learn about how to implement ChatGPT in flutter development. ChatGPT is an AI language model developed by OpenAI. It uses deep learning techniques to generate human-like text based on the input it receives. ChatGPT can be used for a variety of tasks such as chatbots, question answering, language translation, etc. 



  • Having the latest version of Android Studio
  • Having Installed Flutter and Dart in Android Studio
  • Having Basic knowledge of Flutter Development

Let's Start With Android Studio  

Step 1

Open Android Studio and click on the New Flutter Project button


Step 2

Click on the Next Button 


Step 3

Edit the project name, android language, iOS language, and platform, and click on Create button


Step 4

Generate API key

Open the below URL and register yourself in openAI Platform and click on create new secret key button



Please save your API KEY. It will be used further.

Step 5.

We are going to implement ChatGPT using the following URL


API Request

curl \
-H "Content-Type: application/json" \
-H "Authorization: Bearer YOUR_API_KEY" \
-d '{"model": "text-davinci-003", "prompt": "Say this is a test", "temperature": 0, "max_tokens": 7}'

API Response

    "id": "cmpl-GERzeJQ4lvqPk8SkZu4XMIuR",
    "object": "text_completion",
    "created": 1586839808,
    "model": "text-davinci:003",
    "choices": [{
        "text": "\n\nThis is indeed a test",
        "index": 0,
        "logprobs": null,
        "finish_reason": "length"
    "usage": {
        "prompt_tokens": 5,
        "completion_tokens": 7,
        "total_tokens": 12

Step 6

Go to pubspec.yaml file in the flutter project and add the following dependency in the dependencies section. Please specially take care of indentation in pubspec.ymal file.

# Added chatGPT SDK using this link -
chat_gpt_sdk: ^1.0.2+3

# Added http package for Api Calls using this link -
http: ^0.13.5

# Added velocity package to make Flutter development easier and more joyful by using this link - 
velocity_x: ^3.6.0

Step 7

 After adding the dependency please make sure to click on the pub get button.


Step 7

Go to AndroidManifest.xml and added the below permissions

 <uses-permission android:name="android.permission.INTERNET"/>
 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>

Step 8

Go to main.dart in the lib folder and replace the existing code with the following code

import 'package:chatgptexample/chat_srceen.dart';
import 'package:flutter/material.dart';

// Entry Point
void main() {
    runApp(const MyApp());
class MyApp extends StatelessWidget {
    const MyApp({
        Key ? key
    }): super(key: key);
    Widget build(BuildContext context) {
        return MaterialApp(
            // Disable debug banner
            debugShowCheckedModeBanner: false,
            // set title name
            title: 'ChatGPT App',
            // select theme
            theme: ThemeData(primarySwatch:, ),
            // Here we are calling a Screen named ChatScreen
            home: ChatScreen(), );

Step 9

Create a new file named chat_srceen.dart and add the below code 

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';
import 'chatmessage.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class ChatScreen extends StatefulWidget {
    const ChatScreen({
        Key ? key
    }): super(key: key);
    State < ChatScreen > createState() => _ChatScreenState();
class _ChatScreenState extends State < ChatScreen > {
    // To get text from textfield I have create controller.
    final TextEditingController _controller = TextEditingController();
    // Create a list
    final List < ChatMessage > _message = [];
    // Api key - Please generate YOUR_API_KEY from here
    // Replace with Your API-KEY
    String apiKey = "Your API-KEY";
    Future < void > _sendMessage() async {
        // Create Create ChatMessage Class object and pass the user input
        ChatMessage message = ChatMessage(text: _controller.text, sender: "user");
        // Refresh the page
        setState(() {
            _message.insert(0, message);
        // clear the user input from text-field
        // Call the generateText method and store result into response
        final response = await generateText(message.text);
        // Create Create ChatMessage Class object and pass the bot output
        ChatMessage botMessage = ChatMessage(text: response.toString(), sender: "bot");
        // Refresh the page
        setState(() {
            _message.insert(0, botMessage);
    Future < String > generateText(String prompt) async {
        // Here we have to create body based on the document
        try {
            Map < String, dynamic > requestBody = {
                "model": "text-davinci-003",
                "prompt": prompt,
                "temperature": 0,
                "max_tokens": 100,
            // Post Api Url
            var url = Uri.parse('');
            //  use post method of http and pass url,headers and body according to documents
            var response = await, headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer $apiKey"
            }, body: json.encode(requestBody)); // post call
            // Checked we get the response or not
            // if status code is 200 then Api Call is Successfully Executed
            if (response.statusCode == 200) {
                var responseJson = json.decode(response.body);
                return responseJson["choices"][0]["text"];
            } else {
                return "Failed to generate text: ${response.body}";
        } catch (e) {
            return "Failed to generate text: $e";
    //  This method is used for making bottom user input text-field and and send icon part
    Widget _buidTextComposer() {
        return Row(children: [
            Expanded(child: TextField(controller: _controller, decoration: InputDecoration.collapsed(hintText: "Send a message"), ), ),
            IconButton(onPressed: () {
            }, icon: Icon(Icons.send))
        ], ).px12();
    Widget build(BuildContext context) {
        return Scaffold(
            // App bar
            appBar: AppBar(centerTitle: true, title: Text("ChatGPT App"), ),
            // body
            body: SafeArea(child: Column(children: [
                Flexible(child: ListView.builder(padding: Vx.m8, reverse: true, itemBuilder: (context, index) {
                    return _message[index];
                }, itemCount: _message.length, )),
                Divider(height: 1, ),
                Container(decoration: BoxDecoration(), child: _buidTextComposer(), )
            ], ), ), );

Step 10

Create a new file named chatmessage.dart and add the below code 

import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';

class ChatMessage extends StatelessWidget {
    const ChatMessage({
        Key ? key,
        required this.text,
        required this.sender
    }): super(key: key);
    // Use for User Input and chatbot output
    final String text;
    // Use for check sender is user or bot
    final String sender;
    Widget build(BuildContext context) {
        return Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Text(sender).text.subtitle1(context).make().box.color(sender == 'user' ? Vx.red200 : Vx.green200).p16.rounded.alignCenter.makeCentered(),
            Expanded(child: text.trim().text.bodyText1(context).make().px8())
        ], ).py8();




In this article, we have seen how to implement ChatGPT in the flutter application. Thanks for reading and hope you like it. If you have any suggestions or queries on this article, please share your thoughts. you can read my other articles by clicking here.

Happy learning, friends!

Similar Articles