flutter_ai_chat_ui 1.0.1

A complete, production-ready AI chat UI kit for Flutter. Supports streaming responses, markdown rendering, typing indicators, message reactions, copy/retry actions, image messages, and beautiful bubbl [...]

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

---

📄 License

MIT License © 2026 Divyanka Mishra

---

👩‍💻 Author

Divyanka Mishra

Flutter Developer & AI UI Package Publisher

Made with ❤️ using Flutter