flutter_ai_chat_ui 1.0.0

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.

✅ Streaming support — real-time chunk-by-chunk text rendering
✅ Built-in Markdown — bold, italic, code blocks, lists, headings, blockquotes
✅ Typing indicator — animated 3-dot bouncing indicator
✅ Message actions — copy, retry, star (long press to reveal)
✅ Emoji reactions — tap to react, counts shown on bubbles
✅ Multiple themes — clean, dark, WhatsApp-style, or fully custom
✅ Avatar support — initials fallback with custom colors
✅ Image messages — display images in chat
✅ System messages — centered info pills
✅ Scroll to bottom — floating button when scrolled up
✅ Zero external dependencies

---

Installation

dependencies:
  flutter_ai_chat_ui: ^1.0.0

---

Quick Start

import 'package:flutter_ai_chat_ui/flutter_ai_chat_ui.dart';

class ChatPage extends StatefulWidget { ... }

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

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

  Future<void> _handleSend(String text) async {
    // 1. Add user message
    setState(() => _messages.add(ChatMessage.user(text)));

    // 2. Create streaming AI message
    final aiMsg = ChatMessage.aiStreaming();
    setState(() => _messages.add(aiMsg));

    // 3. Stream chunks from your AI
    await for (final chunk in myAiService.stream(text)) {
      aiMsg.appendChunk(chunk);  // UI updates automatically!
    }

    // 4. Mark complete
    aiMsg.finishStreaming();
  }
}

---

With OpenAI

import 'package:dart_openai/dart_openai.dart';

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

  final aiMsg = ChatMessage.aiStreaming();
  setState(() => _messages.add(aiMsg));

  final stream = OpenAI.instance.chat.createStream(
    model: 'gpt-4o',
    messages: [OpenAIChatCompletionChoiceMessageModel(
      role: OpenAIChatMessageRole.user,
      content: [OpenAIChatCompletionChoiceMessageContentItemModel.text(text)],
    )],
  );

  await for (final chunk in stream) {
    final delta = chunk.choices.first.delta.content?.first?.text ?? '';
    aiMsg.appendChunk(delta);
  }
  aiMsg.finishStreaming();
}

---

With Anthropic Claude

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

  final aiMsg = ChatMessage.aiStreaming();
  setState(() => _messages.add(aiMsg));

  final request = http.Request('POST', Uri.parse('https://api.anthropic.com/v1/messages'));
  request.headers.addAll({
    'x-api-key': 'YOUR_KEY',
    'anthropic-version': '2023-06-01',
    'content-type': 'application/json',
  });
  request.body = jsonEncode({
    'model': 'claude-sonnet-4-20250514',
    'max_tokens': 1024,
    'stream': true,
    'messages': [{'role': 'user', 'content': text}],
  });

  final response = await http.Client().send(request);
  await for (final line in response.stream.transform(utf8.decoder).transform(const LineSplitter())) {
    if (line.startsWith('data: ')) {
      final data = jsonDecode(line.substring(6));
      if (data['type'] == 'content_block_delta') {
        aiMsg.appendChunk(data['delta']['text'] ?? '');
      }
    }
  }
  aiMsg.finishStreaming();
}

---

Message Types

ChatMessage.user('Hello!')                  // User text message
ChatMessage.ai('Here is my response')       // AI text message (complete)
ChatMessage.aiStreaming()                    // AI message ready for streaming
ChatMessage.error('Something went wrong')   // Error state bubble
ChatMessage.system('Chat started')          // Centered info pill
ChatMessage.image(imageUrl: url, user: user) // Image message
ChatMessage.code(code: '...', language: 'dart') // Code block message

---

Theming

// Built-in presets
AiChatView(theme: AiChatTheme.clean())
AiChatView(theme: AiChatTheme.dark())
AiChatView(theme: AiChatTheme.whatsapp())

// Custom
AiChatView(
  theme: AiChatTheme(
    userBubbleColor: Colors.indigo,
    userTextColor: Colors.white,
    aiBubbleColor: Color(0xFFF0F0F0),
    bubbleBorderRadius: 20,
    showTimestamps: true,
    showAiAvatar: true,
    typingText: 'AI is thinking...',
    reactionEmojis: ['👍', '❤️', '🔥', '😂'],
    inputHint: 'Ask me anything...',
  ),
)

---

Custom Users / Avatars

final myAi = ChatUser.ai(
  name: 'Aria',
  avatarUrl: 'https://example.com/avatar.png',
  avatarColor: Colors.deepPurple,
);

final me = ChatUser.human(
  name: 'Rahul',
  avatarColor: Colors.teal,
);

// Pass to messages
ChatMessage.user('Hi!', user: me)
ChatMessage.aiStreaming(user: myAi)

---

Reactions & Actions

Long-press any message bubble to reveal actions:

• Copy — copies text to clipboard
• Star — bookmark the message
• Retry — re-generate the AI response
• React — pick an emoji reaction

AiChatView(
  onRetry: (msg) { /* regenerate response */ },
  onStar: (msg) { /* save to favorites */ },
  onReact: (msg, emoji) { /* handle reaction */ },
)

---

AiChatView Parameters

Parameter	Type	Description
messages	List<ChatMessage>	The message list to display
onSend	Future<void> Function(String)	Called when user sends a message
theme	AiChatTheme	Visual customization
isLoading	bool	Shows typing indicator
currentUserId	String	Your user's ID (for reactions)
appBar	PreferredSizeWidget?	Optional AppBar
showInputBar	bool	Toggle input bar
onRetry	void Function(ChatMessage)?	Retry callback
onStar	void Function(ChatMessage)?	Star callback
onReact	void Function(ChatMessage, String)?	Reaction callback
header	Widget?	Widget shown above messages
emptyState	Widget?	Custom empty state widget
autoScroll	bool	Auto-scroll on new messages

---

License

MIT © 2026