Flutter Gen Ai Chat Ui
A modern, customizable chat UI package for Flutter applications, optimized for AI interactions.
Last verified:
What is Flutter Gen Ai Chat Ui?
Flutter Gen AI Chat UI is a modern, production-ready Flutter package that provides a customizable chat UI specifically designed for AI applications. It offers beautiful messaging interfaces with streaming text animations that mimic ChatGPT and Claude's word-by-word output, enhanced markdown support with code highlighting, file attachments, and extensive customization options. The package is perfect for building AI assistants, customer support bots, team chat applications, social messaging apps, and any conversational application.
Key features include word-by-word streaming text animations, complete file attachment support (images, documents, videos), advanced markdown rendering with syntax highlighting for code blocks, dark/light mode with adaptive theming, RTL language support, speech-to-text integration, AI typing indicators, customizable welcome messages, example questions components, and a powerful AI Actions System for function calling with generative UI. The package supports rich widget messages that can render cards, forms, and charts inline in chat, and includes loading states with shimmer effects that morph into rich widgets.
This tool is ideal for Flutter developers building AI-powered applications who need a professional chat interface without spending weeks building it from scratch. It works seamlessly with AI services like OpenAI, Anthropic Claude, Google Gemini, Llama, and Mistral, and is backend-agnostic (compatible with Firebase, Supabase, REST APIs, WebSockets, GraphQL). The package is suitable for SaaS companies, e-commerce businesses, healthcare providers, educational platforms, and gaming companies needing conversational interfaces.
Flutter Gen Ai Chat Ui pricing
Pricing model: Freemium
Free and open source under MIT license. Published on pub.dev with no paid tiers. The package is completely free to use with no restrictions. Weekly downloads: 2.18k. Published 23 days ago with latest version 2.11.1.
Flutter Gen Ai Chat Ui pros
- Word-by-word streaming animations like ChatGPT and Claude
- Complete file attachment support for images, documents, and videos
- Enhanced markdown with code syntax highlighting for technical content
- Dark/light mode with adaptive theming to match your brand
- High performance: 60 FPS rendering with 1000+ messages
- AI Actions System with function calling and generative UI
- Rich widget messages supporting cards, forms, and charts inline
- RTL language support for global applications
- Optional speech-to-text integration included
- Customizable welcome message similar to ChatGPT
- Example questions component for user guidance
- Multiple input field styles including glassmorphic option
- Smart scroll management with configurable auto-scroll behavior
- Cross-platform support on Android, iOS, Web, and Desktop
- MIT license with production-ready stable API
- Human-in-the-loop confirmation dialogs for sensitive operations
- Real-time action status updates with animations
- Type-safe parameter validation system
- Loading indicators with shimmer effects that morph into content
- Backend agnostic - works with any API or service
Flutter Gen Ai Chat Ui cons
- Requires Flutter 3.0.0 or higher
- Additional dependency needed for speech-to-text (speech_to_text package)
- Steep learning curve for advanced AI Actions customization
- Large bundle size due to extensive feature set
- Some advanced features require significant configuration
- Custom bubble builder requires deep Flutter knowledge
- Streaming animation may need tuning for different content types
- Documentation is extensive but can be overwhelming for beginners
Frequently asked questions about Flutter Gen Ai Chat Ui
What is Flutter Gen AI Chat UI?
Flutter Gen AI Chat UI is a modern, high-performance Flutter chat UI kit for building beautiful messaging interfaces. It features streaming text animations (word-by-word like ChatGPT/Claude), markdown support with code highlighting, file attachments, and extensive customization options. It's perfect for AI assistants, customer support, team chat, social messaging, and any conversational application.
How do I install the package?
Add this to your package's pubspec.yaml file: dependencies: flutter_gen_ai_chat_ui: ^2.4.2, then run 'flutter pub get'. Import it with: import 'package:flutter_gen_ai_chat_ui/flutter_gen_ai_chat_ui.dart'. For speech recognition, also add: dependencies: speech_to_text: ^6.6.0.
What AI services does it work with?
The package works with all major AI services including OpenAI, Anthropic Claude, Google Gemini, Llama, and Mistral. It's backend-agnostic and compatible with Firebase, Supabase, REST APIs, WebSockets, and GraphQL. The streaming and UI features work independently of which AI service you choose.
How does the streaming text animation work?
The package provides unique word-by-word streaming animations like ChatGPT and Claude. You can control the speed with streamingDuration (default 30ms per word), configure it with streamingWordByWord (true/false), and enable/disable with enableAnimation and enableMarkdownStreaming parameters. The streaming works with markdown rendering for code and rich content.
Can I customize the message bubbles?
Yes, extensively. You can use MessageOptions for basic styling (bubble colors, shadows, radii, timestamps, usernames) or use customBubbleBuilder for complete control over message styling. The customBubbleBuilder allows you to wrap the default bubble with your own container or create a completely custom UI.
What file types are supported for attachments?
The package supports multi-format attachments including images, documents, and videos. It has complete file attachment support with attachmentPreviewBuilder for previewing files/images above the input area. The system is designed for real-world use cases with proper handling of various media types.
How do I implement AI Actions with function calling?
Wrap your AiChatWidget with AiActionProvider and define actions in AiActionConfig. Each AiAction has a name, description, parameters (with validation), handler function, and optional render function for custom UI. The AI can execute predefined actions with parameters, display rich results with custom widgets, and the system includes human-in-the-loop confirmation dialogs for sensitive operations.
Does it support dark mode?
Yes, the package includes dark/light mode with adaptive theming. You can configure message colors, input field styles, and overall theme through MessageOptions and InputOptions. There are factory constructors like InputOptions.glassmorphic() that work well with dark themes, and the package includes enhanced dark theme contrast and readability improvements.
What platforms are supported?
The package is fully cross-platform and works on all Flutter-supported platforms: Android (with Material Design 3, native permissions, adaptive colors), iOS (with Cupertino animations and native feel), Web (responsive design, keyboard support, cross-browser), and Desktop (window management, keyboard navigation, high DPI support).
How do I handle long AI responses without scrolling issues?
Use ScrollBehaviorConfig with scrollToFirstResponseMessage: true to scroll to the first message of a response instead of the last. Mark the first message in a response with 'isStartOfResponse': true and link related messages using a shared 'responseId' property. This prevents the top part of long AI responses from being pushed out of view, crucial for readability with complex information.