flutter_ai_chat_ui

A complete, production-ready AI Chat UI Kit for Flutter.

Works with any AI backend — OpenAI, Anthropic Claude, Google Gemini, Ollama, or your own API.

👩‍💻 Publisher

Published & Maintained by Divyanka Mishra

Flutter Developer • AI UI Package Creator • Mobile App Developer

✨ Features

✅ Streaming support — real-time chunk-by-chunk text rendering
✅ Built-in Markdown support
✅ Animated typing indicator
✅ Message reactions & actions
✅ Copy / Retry / Star message actions
✅ Beautiful customizable chat bubbles
✅ AI & user avatars support
✅ Image messages support
✅ System messages support
✅ Auto scroll-to-bottom support
✅ Multiple themes included
✅ Zero external UI dependencies

📦 Installation

Add dependency in your pubspec.yaml:

dependencies:
  flutter_ai_chat_ui: ^1.0.1

Run:

flutter pub get

🚀 Quick Start

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ChatPage(),
    );
  }
}

class ChatPage extends StatefulWidget {
  const ChatPage({super.key});

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  final List<ChatMessage> _messages = [];

  Future<void> _handleSend(String text) async {
    setState(() {
      _messages.add(ChatMessage.user(text));
    });

    final aiMessage = ChatMessage.aiStreaming();

    setState(() {
      _messages.add(aiMessage);
    });

    await Future.delayed(const Duration(seconds: 1));

    aiMessage.appendChunk("Hello ");
    aiMessage.appendChunk("from ");
    aiMessage.appendChunk("AI!");

    aiMessage.finishStreaming();

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return AiChatView(
      messages: _messages,
      onSend: _handleSend,
    );
  }
}

🤖 Supported AI Backends

OpenAI
Google Gemini
Anthropic Claude
Ollama
Custom APIs
Any streaming backend

💬 Message Types

ChatMessage.user('Hello')
ChatMessage.ai('Hi there!')
ChatMessage.aiStreaming()
ChatMessage.error('Something went wrong')
ChatMessage.system('Chat started')
ChatMessage.image(imageUrl: url)
ChatMessage.code(code: 'print("Hello")', language: 'dart')

🎨 Themes

AiChatTheme.clean()
AiChatTheme.dark()
AiChatTheme.whatsapp()

Custom Theme:

AiChatTheme(
  userBubbleColor: Colors.indigo,
  aiBubbleColor: Color(0xFFF2F2F2),
  bubbleBorderRadius: 20,
)

🧑‍💻 Custom Users / Avatars

final aiUser = ChatUser.ai(
  name: 'Aria',
  avatarColor: Colors.deepPurple,
);

final currentUser = ChatUser.human(
  name: 'Divyanka',
  avatarColor: Colors.indigo,
);

ChatMessage.user(
  'Hello AI',
  user: currentUser,
);

ChatMessage.aiStreaming(
  user: aiUser,
);

🔥 Reactions & Actions

Long press on any message bubble to:

Copy message
Retry response
Star message
Add emoji reactions

AiChatView(
  onRetry: (message) {},
  onStar: (message) {},
  onReact: (message, emoji) {},
)

📱 Platform Support

✅ Android
✅ iOS
✅ Web
✅ Windows
✅ macOS
✅ Linux

📂 Package Structure

lib/
 ├── flutter_ai_chat_ui.dart
 └── src/
      ├── ai_chat_view.dart
      ├── models/
      ├── widgets/
      └── theme/

🛠️ Upcoming Features

Voice message support
AI markdown syntax highlighting
Firebase integration
Chat persistence
OpenAI assistant support
Advanced animations
AI streaming optimization