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 #

License #

MIT License

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