Flutter Gen AI Chat UI

A modern, customizable chat UI for AI applications built with Flutter. Features streaming responses, markdown support, and rich customization options.

Table of Contents

• Features
• Quick Start
• Installation
• Usage
• Configuration
• Advanced Features
• Platform Support
• Examples
• Contributing

Dark Mode

Chat Demo

Features

Core Features

• 🎨 Dark/light mode with adaptive theming
• 💫 Word-by-word streaming with animations
• 📝 Enhanced markdown support with code highlighting
• 🎤 Optional speech-to-text integration
• 📱 Responsive layout with customizable width
• 🌐 RTL language support
• ⚡ High performance message handling
• 📊 Improved pagination support
• 🔄 Centralized configuration

UI Components

• 💬 Customizable message bubbles
• ⌨️ Rich input field options
• 🔄 Loading indicators with shimmer
• ⬇️ Smart scroll management
• 👋 Welcome message widget
• ❓ Example questions component
• 🎨 Enhanced theme customization
• 📝 Better code block styling

Quick Start

import 'package:flutter_gen_ai_chat_ui/flutter_gen_ai_chat_ui.dart';

AiChatWidget(
  config: AiChatConfig(
    hintText: 'Type a message...',
    enableAnimation: true,
    inputOptions: InputOptions(
      alwaysShowSend: true,
      sendOnEnter: true,
      margin: EdgeInsets.all(16),
    ),
    messageOptions: MessageOptions(
      showTime: true,
      containerColor: Colors.grey[200],
    ),
    // New in 1.3.0: Enhanced configuration options
    paginationConfig: PaginationConfig(
      enabled: true,
      loadingIndicatorOffset: 100,
    ),
    loadingConfig: LoadingConfig(
      isLoading: false,
      typingIndicatorColor: Colors.blue,
    ),
  ),
  currentUser: ChatUser(id: '1', firstName: 'User'),
  aiUser: ChatUser(id: '2', firstName: 'AI'),
  controller: ChatMessagesController(),
  onSendMessage: (message) async {
    // Handle message
  },
)

Installation

1. Add dependency:

dependencies:
  flutter_gen_ai_chat_ui: ^1.3.0

2. Import:

import 'package:flutter_gen_ai_chat_ui/flutter_gen_ai_chat_ui.dart';

Optional: For speech recognition, add:

dependencies:
  speech_to_text: ^6.6.0

What's New in 1.3.0

Breaking Changes

1. All widget-level configurations now flow through AiChatConfig
2. Improved input handling with standalone InputOptions
3. Enhanced pagination with PaginationConfig
4. Better loading states with LoadingConfig
5. Centralized callbacks in CallbackConfig

New Features

1. Enhanced markdown support with better code block styling
2. Improved dark theme contrast and readability
3. Better message bubble animations
4. Fixed layout overflow issues
5. Enhanced error handling

Migration Guide

If you're upgrading from version 1.2.x:

// Old way (deprecated)
AiChatWidget(
  enableAnimation: true,
  loadingIndicator: MyLoadingWidget(),
  inputDecoration: InputDecoration(...),
)

// New way (1.3.0+)
AiChatWidget(
  config: AiChatConfig(
    enableAnimation: true,
    loadingConfig: LoadingConfig(
      loadingIndicator: MyLoadingWidget(),
    ),
    inputOptions: InputOptions(
      inputDecoration: InputDecoration(...),
    ),
  ),
)

Configuration

The new configuration system in 1.3.0 provides better organization and type safety:

AiChatConfig(
  // Basic settings
  userName: 'User',
  aiName: 'AI',
  hintText: 'Type a message...',
  maxWidth: null,
  
  // Feature flags
  enableAnimation: true,
  showTimestamp: true,
  
  // Specialized configs
  inputOptions: InputOptions(...),
  messageOptions: MessageOptions(...),
  paginationConfig: PaginationConfig(...),
  loadingConfig: LoadingConfig(...),
  callbackConfig: CallbackConfig(...),
  
  // Welcome message
  welcomeMessageConfig: WelcomeMessageConfig(...),
  exampleQuestions: [...],
)

Input Customization

InputOptions(
  // Basic options
  sendOnEnter: true,
  alwaysShowSend: true,
  
  // Styling
  margin: EdgeInsets.all(16),
  inputTextStyle: TextStyle(...),
  inputDecoration: InputDecoration(...),
  
  // Advanced
  maxLines: 5,
  textCapitalization: TextCapitalization.sentences,
  contextMenuBuilder: (context, editableTextState) => ...,
)

Pagination

PaginationConfig(
  enabled: true,
  loadingIndicatorOffset: 100,
  loadMoreIndicator: ({isLoading}) => CustomLoadingWidget(),
)

Loading States

LoadingConfig(
  isLoading: false,
  loadingIndicator: CustomLoadingWidget(),
  typingIndicatorColor: Colors.blue,
  typingIndicatorSize: 24.0,
)

Platform Support

✅ Android

• Material Design 3
• Native permissions
• Adaptive colors

✅ iOS

• Cupertino animations
• Privacy handling
• Native feel

✅ Web

• Responsive design
• Keyboard support
• Cross-browser

✅ Desktop

• Window management
• Keyboard navigation
• High DPI support

Examples & Support

• 📘 Example Directory
• 🐛 Issue Tracker
• 💡 Contribution Guide

Version Compatibility

Flutter Version	Package Version
>=3.0.0	^1.3.0
>=2.5.0	^1.2.0

License

MIT License

---

⭐ If you find this package helpful, please star the repository!