Flutter Gen AI Chat UI #

A modern, high-performance Flutter chat UI kit for building beautiful messaging interfaces. Features streaming text animations, markdown support, file attachments, and extensive customization options. Perfect for AI assistants, customer support, team chat, social messaging, and any conversational application.

🚀 Production Ready | 📱 Cross-Platform | ⚡ High Performance | 🎨 Fully Customizable

Dark Mode

Chat Demo

Features #

Core Features #

🎨 Dark/light mode with adaptive theming
💫 Word-by-word streaming with animations (like ChatGPT and Claude)
📝 Enhanced markdown support with code highlighting for technical content
🎤 Optional speech-to-text integration
📱 Responsive layout with customizable width
🌐 RTL language support for global applications
⚡ High performance message handling for large conversations
📊 Improved pagination support for message history

AI-Specific Features #

👋 Customizable welcome message similar to ChatGPT and other AI assistants
❓ Example questions component for user guidance
💬 Persistent example questions for better user experience
🔄 AI typing indicators like modern chatbot interfaces
📜 Streaming markdown rendering for code and rich content

UI Components #

💬 Customizable message bubbles with modern design options
🎨 Custom Bubble Builder for complete message styling control
⌨️ Multiple input field styles (minimal, glassmorphic, custom)
🔄 Loading indicators with shimmer effects
⬇️ Smart scroll management for chat history
🎨 Enhanced theme customization to match your brand
📝 Better code block styling for developers

⚡ Performance & Features #

Key Capabilities #

✨ Unique Streaming Text: Word-by-word animations like ChatGPT and Claude
📁 Complete File Support: Multi-format attachments (images, documents, videos)
📝 Advanced Markdown: Full support with syntax highlighting for code blocks
🚀 High Performance: Optimized for large conversations (10K+ messages)
🎨 Extensive Theming: Complete customization to match your brand
📱 Cross-Platform: Works on all Flutter-supported platforms
🔗 Backend Agnostic: Compatible with any API or service
⚡ Real-time Ready: Built-in support for live updates

Performance Benchmarks #

Message Rendering: 60 FPS with 1000+ messages
Memory Efficiency: Optimized for large conversations
Startup Time: <100ms initialization
Streaming Speed: Configurable 10-100ms per word

🌟 Works Great With #

AI Services: OpenAI, Anthropic Claude, Google Gemini, Llama, Mistral
Backends: Firebase, Supabase, REST APIs, WebSockets, GraphQL
Use Cases: Customer support, AI assistants, team chat, social messaging
Industries: SaaS, E-commerce, Healthcare, Education, Gaming

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_gen_ai_chat_ui: ^2.3.6

Then run:

flutter pub get

Why Choose This Package? #

✅ Superior Performance: Optimized for large conversations with efficient message rendering
✅ Modern UI: Beautiful, customizable interfaces that match current design trends
✅ Streaming Text: Smooth word-by-word animations like ChatGPT and Claude
✅ File Support: Complete file attachment system with image, document, and media support
✅ Production Ready: Stable API with comprehensive testing and documentation
✅ Framework Agnostic: Works with any backend - REST APIs, WebSockets, Firebase, Supabase

🎮 Live Examples #

🔗 Try Interactive Demo | 📱 Download APK | 🌐 Web Demo

Explore all features with our comprehensive example app:

Basic Chat: Simple ChatGPT-style interface
Streaming Text: Real-time word-by-word animations
File Attachments: Upload images, documents, videos
Custom Themes: Light, dark, and glassmorphic styles
Advanced Features: Scroll behavior, markdown, code highlighting

Quick Start #

import 'package:flutter_gen_ai_chat_ui/flutter_gen_ai_chat_ui.dart';

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final _controller = ChatMessagesController();
  final _currentUser = ChatUser(id: 'user', firstName: 'User');
  final _aiUser = ChatUser(id: 'ai', firstName: 'AI Assistant');
  bool _isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AI Chat')),
      body: AiChatWidget(
        // Required parameters
        currentUser: _currentUser,
        aiUser: _aiUser,
        controller: _controller,
        onSendMessage: _handleSendMessage,
        
        // Optional parameters
        loadingConfig: LoadingConfig(isLoading: _isLoading),
        inputOptions: InputOptions(
          hintText: 'Ask me anything...',
          sendOnEnter: true,
        ),
        welcomeMessageConfig: WelcomeMessageConfig(
          title: 'Welcome to AI Chat',
          questionsSectionTitle: 'Try asking me:',
        ),
        exampleQuestions: [
          ExampleQuestion(question: "What can you help me with?"),
          ExampleQuestion(question: "Tell me about your features"),
        ],
      ),
    );
  }

  Future<void> _handleSendMessage(ChatMessage message) async {
    setState(() => _isLoading = true);
    
    try {
      // Your AI service logic here
      await Future.delayed(Duration(seconds: 1)); // Simulating API call
      
      // Add AI response
      _controller.addMessage(ChatMessage(
        text: "This is a response to: ${message.text}",
        user: _aiUser,
        createdAt: DateTime.now(),
      ));
    } finally {
      setState(() => _isLoading = false);
    }
  }
}

Configuration Options #

AiChatWidget Parameters #

Required Parameters

AiChatWidget(
  // Required parameters
  currentUser: ChatUser(...),  // The current user
  aiUser: ChatUser(...),       // The AI assistant
  controller: ChatMessagesController(),  // Message controller
  onSendMessage: (message) {   // Message handler
    // Handle user messages here
  },
  
  // ... optional parameters
)

Optional Parameters

AiChatWidget(
  // ... required parameters
  
  // Message display options
  messages: [],                // Optional list of messages (if not using controller)
  messageOptions: MessageOptions(...),  // Message bubble styling
  messageListOptions: MessageListOptions(...),  // Message list behavior
  
  // Input field customization
  inputOptions: InputOptions(...),  // Input field styling and behavior
  readOnly: false,             // Whether the chat is read-only
  
  // AI-specific features
  exampleQuestions: [          // Suggested questions for users
    ExampleQuestion(question: 'What is AI?'),
  ],
  persistentExampleQuestions: true,  // Keep questions visible after welcome
  enableAnimation: true,       // Enable message animations
  enableMarkdownStreaming: true,  // Enable streaming text
  streamingDuration: Duration(milliseconds: 30),  // Stream speed
  welcomeMessageConfig: WelcomeMessageConfig(...),  // Welcome message styling
  
  // Loading states
  loadingConfig: LoadingConfig(  // Loading configuration
    isLoading: false,
    showCenteredIndicator: true,
  ),
  
  // Pagination
  paginationConfig: PaginationConfig(  // Pagination configuration
    enabled: true,
    reverseOrder: true,  // Newest messages at bottom
  ),
  
  // Layout
  maxWidth: 800,             // Maximum width
  padding: EdgeInsets.all(16),  // Overall padding
  
  // Scroll behavior
  scrollBehaviorConfig: ScrollBehaviorConfig(
    // Control auto-scrolling behavior
    autoScrollBehavior: AutoScrollBehavior.onUserMessageOnly,
    // Scroll to first message of a response instead of the last (for long responses)
    scrollToFirstResponseMessage: true,
  ),
  
  // Custom bubble builder for complete styling control
  customBubbleBuilder: (context, message, isCurrentUser, defaultBubble) {
    // Return your custom bubble widget
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 4,
            offset: Offset(0, 2),
          ),
        ],
      ),
      child: defaultBubble, // Or create completely custom UI
    );
  },
)

Input Field Customization #

The package offers multiple ways to style the input field:

Default Input

InputOptions(
  // Basic properties
  sendOnEnter: true,
  
  // Styling
  textStyle: TextStyle(...),
  decoration: InputDecoration(...),
)

Minimal Input

InputOptions.minimal(
  hintText: 'Ask a question...',
  textColor: Colors.black,
  hintColor: Colors.grey,
  backgroundColor: Colors.white,
  borderRadius: 24.0,
)

Glassmorphic (Frosted Glass) Input

InputOptions.glassmorphic(
  colors: [Colors.blue.withOpacityCompat(0.2), Colors.purple.withOpacityCompat(0.2)],
  borderRadius: 24.0,
  blurStrength: 10.0,
  hintText: 'Ask me anything...',
  textColor: Colors.white,
)

Custom Input

InputOptions.custom(
  decoration: yourCustomDecoration,
  textStyle: yourCustomTextStyle,
  sendButtonBuilder: (onSend) => CustomSendButton(onSend: onSend),
)

Always-Visible Send Button Without Focus Issues (version 2.0.4+)

The send button is now hardcoded to always be visible by design, regardless of text content. This removes the need for an explicit setting and ensures a consistent experience across the package.

By default:

The send button is always shown regardless of text input
Focus is maintained when tapping outside the input field
The keyboard's send button is disabled by default to prevent focus issues

// Configure input options to ensure a consistent typing experience
InputOptions(
  // Prevent losing focus when tapping outside
  unfocusOnTapOutside: false,
  
  // Use newline for Enter key to prevent keyboard focus issues
  textInputAction: TextInputAction.newline,
)

Scroll Behavior Configuration #

Control how the chat widget scrolls when new messages are added:

// Default configuration with manual parameters
ScrollBehaviorConfig(
  // When to auto-scroll (one of: always, onNewMessage, onUserMessageOnly, never)
  autoScrollBehavior: AutoScrollBehavior.onUserMessageOnly,
  
  // Fix for long responses: scroll to first message of response instead of the last message
  // This prevents the top part of long AI responses from being pushed out of view
  scrollToFirstResponseMessage: true,
  
  // Customize animation
  scrollAnimationDuration: Duration(milliseconds: 300),
  scrollAnimationCurve: Curves.easeOut,
)

// Or use convenient preset configurations:
ScrollBehaviorConfig.smooth() // Smooth easeInOutCubic curve
ScrollBehaviorConfig.bouncy() // Bouncy elasticOut curve
ScrollBehaviorConfig.fast()   // Quick scrolling with minimal animation
ScrollBehaviorConfig.decelerate() // Starts fast, slows down
ScrollBehaviorConfig.accelerate() // Starts slow, speeds up

Use Case: Preventing Long Responses from Auto-Scrolling

When an AI returns a long response in multiple parts, scrollToFirstResponseMessage ensures users see the beginning of the response rather than being automatically scrolled to the end. This is crucial for readability, especially with complex information.

For optimal scroll behavior with long responses:

Mark the first message in a response with 'isStartOfResponse': true
Link related messages in a chain using a shared 'responseId' property
Set scrollToFirstResponseMessage: true in your configuration

Message Bubble Customization #

MessageOptions(
  // Basic options
  showTime: true,
  showUserName: true,
  
  // Styling
  bubbleStyle: BubbleStyle(
    userBubbleColor: Colors.blue.withOpacityCompat(0.1),
    aiBubbleColor: Colors.white,
    userNameColor: Colors.blue.shade700,
    aiNameColor: Colors.purple.shade700,
    bottomLeftRadius: 22,
    bottomRightRadius: 22,
    enableShadow: true,
  ),
)

Custom Bubble Builder #

Create completely custom message bubbles with full control over styling and behavior:

AiChatWidget(
  // ... other parameters
  customBubbleBuilder: (context, message, isCurrentUser, defaultBubble) {
    // Wrapper approach: enhance default bubble
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 4,
            offset: Offset(0, 2),
          ),
        ],
      ),
      child: defaultBubble,
    );
    
    // Or create completely custom UI:
    // return MyCustomBubbleWidget(message: message, isCurrentUser: isCurrentUser);
  },
)

🎯 Showcase #

Featured Apps Using This Package #

AI Customer Support Bot - SaaS company with 10K+ daily conversations
Educational Tutor App - Language learning with interactive chat
Healthcare Assistant - HIPAA-compliant patient communication
E-commerce Support - Real-time shopping assistance
Gaming Guild Chat - Team communication with file sharing

Want your app featured? Submit a showcase request

Community & Support #

📚 Documentation - Comprehensive guides and tutorials
💬 Discord Community - Get help and share ideas
🐛 Issue Tracker - Report bugs and request features
⭐ Star on GitHub - Show your support!

What Developers Say #

"The streaming text animation is incredibly smooth and the file attachment system saved us weeks of development." - Sarah Chen, Senior Flutter Developer

"Best chat UI package I've used. The performance with large message lists is outstanding." - Ahmed Hassan, Mobile Team Lead

"Finally, a chat package that actually works well for AI applications. The streaming feature is exactly what we needed." - Maria Rodriguez, Product Manager

Made with ❤️ by the Flutter community | Star ⭐ this repo if it helped you!

flutter_gen_ai_chat_ui 2.3.6 flutter_gen_ai_chat_ui: ^2.3.6 copied to clipboard

Metadata