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
• 📝 Markdown support with syntax highlighting
• 🎤 Optional speech-to-text integration
• 📱 Responsive layout with customizable width
• 🌐 RTL language support
• ⚡ High performance message handling

UI Components #

• 💬 Customizable message bubbles
• ⌨️ Rich input field options
• 🔄 Loading indicators with shimmer
• ⬇️ Smart scroll management
• 👋 Welcome message widget
• ❓ Example questions component

Quick Start #

import 'package:flutter_gen_ai_chat_ui/flutter_gen_ai_chat_ui.dart';

AiChatWidget(
  config: AiChatConfig(
    hintText: 'Type a message...',
    enableAnimation: true,
  ),
  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.2.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

Configuration #

The AiChatConfig class provides extensive customization:

AiChatConfig({
  String? userName,                    // User's display name
  String? aiName,                      // AI assistant's name
  String? hintText,                    // Input placeholder
  double? maxWidth,                    // Maximum chat width
  bool enableAnimation = true,         // Enable animations
  bool showTimestamp = true,          // Show timestamps
  WelcomeMessageConfig? welcomeConfig, // Welcome message
  MessageOptions? messageOptions,      // Bubble styling
  InputDecoration? inputDecoration,    // Input styling
})

Advanced Features #

Speech-to-Text Integration #

1. Add the dependency:

dependencies:
  speech_to_text: ^6.6.0

2. Add platform permissions:

iOS (ios/Runner/Info.plist):

<key>NSMicrophoneUsageDescription</key>
<string>This app needs microphone access for speech recognition</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>This app needs speech recognition to convert your voice to text</string>

Android (android/app/src/main/AndroidManifest.xml):

<uses-permission android:name="android.permission.RECORD_AUDIO"/>

3. Implement STT in your widget:

import 'package:speech_to_text/speech_to_text.dart' as stt;

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

class _ChatScreenState extends State<ChatScreen> {
  final stt.SpeechToText _speech = stt.SpeechToText();
  bool _isListening = false;

  @override
  void initState() {
    super.initState();
    _initSpeech();
  }

  Future<void> _initSpeech() async {
    await _speech.initialize(
      onError: (error) => debugPrint('Speech error: $error'),
      onStatus: (status) => debugPrint('Speech status: $status'),
    );
  }

  Future<void> _listen() async {
    if (!_isListening) {
      final available = await _speech.initialize();
      if (available) {
        setState(() => _isListening = true);
        _speech.listen(
          onResult: (result) {
            if (result.finalResult) {
              // Handle the recognized text
              final message = ChatMessage(
                text: result.recognizedWords,
                user: currentUser,
                createdAt: DateTime.now(),
              );
              _handleSendMessage(message);
              setState(() => _isListening = false);
            }
          },
        );
      }
    } else {
      setState(() => _isListening = false);
      _speech.stop();
    }
  }

  @override
  Widget build(BuildContext context) {
    return AiChatWidget(
      config: AiChatConfig(
        inputDecoration: InputDecoration(
          prefixIcon: IconButton(
            icon: Icon(_isListening ? Icons.mic : Icons.mic_none),
            onPressed: _listen,
          ),
        ),
      ),
      currentUser: currentUser,
      aiUser: aiUser,
      controller: controller,
      onSendMessage: _handleSendMessage,
    );
  }

  @override
  void dispose() {
    _speech.cancel();
    super.dispose();
  }
}

### Dark Mode
```dart
Theme(
  data: Theme.of(context).copyWith(
    extensions: [
      CustomThemeExtension(
        messageBubbleColor: isDark ? Color(0xFF1E1E1E) : Colors.white,
        userBubbleColor: isDark ? Color(0xFF7B61FF) : Color(0xFFE3F2FD),
      ),
    ],
  ),
  child: AiChatWidget(...),
)

Streaming #

void handleStreamingResponse(String text) {
  final response = ChatMessage(text: "", user: aiUser);
  for (var word in text.split(' ')) {
    response.text += '$word ';
    controller.updateMessage(response);
  }
}

Speech Recognition #

See example/lib/simple_chat_screen.dart for complete implementation.

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

Dependencies #

• dash_chat_2 - Chat UI
• flutter_streaming_text_markdown - Markdown
• provider - State
• shimmer - Effects
• google_fonts - Typography

Version Compatibility #

License #

MIT License

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