code_chat_ui 0.1.1 icon indicating copy to clipboard operation
code_chat_ui: ^0.1.1 copied to clipboard

Simple Chatbot UI

code_chat_ui #

A simple Flutter package for building chat UI that can consume any chat API especially chatbot.

Features #

  • Consumes any chat API
  • Customizable chat bubble
  • Customizable send button and text field
  • Supports header request
  • Supports loading indicator
  • Supports failure handling

Getting started #

In the pubspec.yaml of your flutter project, add the following dependency:

  code_chat_ui: ^0.1.0

In your library add the following import:

import 'package:code_chat_ui/code_chat_ui.dart';

Usage #

  url: '',
  requestBuilder: (String input) => {'text': input},
  onResponseSuccess: (dynamic response, String input) => print(response['text']),
  onFailure: (dynamic error, dynamic response, String input) => print('Error: $error'),
  chatsValueListenable: ValueNotifier<List<String>>([]),
  chatBuilder: (BuildContext context, String chat) => ChatBubble(text: chat),


CodeChatUI #

A widget for building chat UI that can consume any chat API.


Name Type Description
url String The URL of the chat API endpoint.
requestBuilder Map<String, dynamic> Function(String input) A function that builds the request body from the user input.
onResponseSuccess T Function(dynamic response, String input) A function that extracts the chat message from the API response.
onFailure void Function(dynamic error, dynamic response, String input)? A function that handles the API error.
chatsValueListenable ValueNotifier<List<T>> A value notifier that holds the list of chat messages.
chatBuilder Widget Function(BuildContext context, T chat) A function that builds the chat bubble widget.
headerRequest Map<String, String>? A map of headers to be included in the API request.
appBar PreferredSizeWidget? A widget that builds the app bar.
sendButtonBuilder Widget Function(BuildContext context, void Function() onSend)? A function that builds the send button widget.
textFormFieldBuilder Widget Function(BuildContext context, TextEditingController controller, FocusNode focusNode, void Function() onFieldSubmitted)? A function that builds the text form field widget.

Example #

import 'package:flutter/material.dart';

import 'package:code_chat_ui/code_chat_ui.dart';

void main() {
  runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OpenAI Chat Demo',
      theme: ThemeData(
      home: MyHomePage(title: 'OpenAI Chat Demo'),

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  State<MyHomePage> createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  final _chats = <String>[];
  final _chatsValueNotifier = ValueNotifier<List<String>>([]);

  Map<String, dynamic> _requestBuilder(String input) => {
        "model": "gpt-3.5-turbo",
        "messages": [
            "role": "user",
            "content": input,

  final _headerRequest = {
    'Content-Type': 'application/json',
        'Bearer YOUR_OPENAI_API_KEY_HERE',

  final _url = '';

  void _onResponseSuccess(dynamic response, String input) {
    final completions = response['choices'][0]['message']['content'];
    setState(() {
      _chatsValueNotifier.value = _chats;

  void _onFailure(dynamic error, dynamic response, String input) {
    setState(() {
      _chats.add('Error: $error');
      _chatsValueNotifier.value = _chats;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      body: CodeChatUI<String>(
        url: _url,
        requestBuilder: _requestBuilder,
        onResponseSuccess: _onResponseSuccess,
        headerRequest: _headerRequest,
        onFailure: _onFailure,
        chatsValueListenable: _chatsValueNotifier,
        chatBuilder: (context, chat) => ChatBubble(
          text: chat,
          isUser: _chats.indexOf(chat) % 2 == 0,

class ChatBubble extends StatelessWidget {
  final String text;
  final bool isUser;

  const ChatBubble({Key? key, required this.text, required this.isUser})
      : super(key: key);

  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 10),
      alignment: isUser ? Alignment.centerRight : Alignment.centerLeft,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
        decoration: BoxDecoration(
          color: isUser ? : Colors.grey[300],
          borderRadius: BorderRadius.only(
            bottomLeft: const Radius.circular(20),
            bottomRight:const Radius.circular(20),
            topLeft: isUser ? const Radius.circular(20) : const Radius.circular(0),
            topRight: isUser ? const Radius.circular(0) : const Radius.circular(20),
        child: Text(
          style: TextStyle(
            color: isUser ? Colors.white :,

License #

This project is licensed under the MIT License - see the LICENSE file for details.