Chat UI #

A beautiful and feature-rich Flutter chat UI package that supports one-on-one and group chats with advanced features.

Features #

• 💬 One-on-one and group chat support
• 😀 Message reactions with emoji
• ↩️ Reply to messages functionality
• 🔗 Link preview for URLs
• 🎤 Voice messages support
• 📸 Image sharing capabilities
• 📎 File sharing
• 🎨 Custom message types
• ⌨️ Typing indicators
• 💡 Reply suggestions
• ✅ Message status indicators (sent, delivered, read)
• 🎯 Highly customizable UI components
• 🔌 Plug-and-play backend support using Firebase

Installation #

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

dependencies:
  chat_ui: ^0.1.0

Usage #

Basic Usage #

import 'package:chat_ui/chat_ui.dart';

class MyChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Chat')),
      body: ChatView(
        currentUserId: 'user1',
        groupId: 'group1', // Optional, for group chats
      ),
    );
  }
}

Customization #

ChatView(
  currentUserId: 'user1',
  showUserAvatars: true,
  showUserNames: true,
  primaryColor: Colors.blue,
  secondaryColor: Colors.grey[300],
  messageTextStyle: TextStyle(fontSize: 16),
  replyTextStyle: TextStyle(fontSize: 14),
  messageSpacing: 8.0,
  messagePadding: EdgeInsets.all(12),
  messageBorderRadius: BorderRadius.circular(16),
  quickReplies: ['Hello!', 'How are you?', 'See you later!'],
  onQuickReplySelected: (reply) {
    // Handle quick reply selection
  },
)

Custom Message Builder #

ChatView(
  currentUserId: 'user1',
  customMessageBuilder: (context, message, isMe) {
    return Container(
      // Your custom message widget
    );
  },
)

Custom Input Builder #

ChatView(
  currentUserId: 'user1',
  customInputBuilder: (context, controller) {
    return Container(
      // Your custom input widget
    );
  },
)

Features in Detail #

Message Types #

The package supports various message types:

• Text messages
• Image messages
• Voice messages
• File messages
• Custom message types

Message Status #

Messages can have different statuses:

• Sending
• Sent
• Delivered
• Read
• Failed

Reactions #

Users can react to messages with emojis. The reactions are displayed below the message.

Reply to Messages #

Users can reply to specific messages. The reply preview shows the original message and its sender.

Typing Indicators #

The package shows when someone is typing a message.

Quick Replies #

You can provide quick reply suggestions that users can tap to send.

Link Preview #

URLs in messages are automatically detected and made clickable.

Voice Messages #

Users can record and send voice messages by long-pressing the send button.

File Sharing #

Users can share files of any type.

Image Sharing #

Users can share images from their gallery.

Backend Integration #

The package is designed to work seamlessly with Firebase:

• Firebase Authentication for user management
• Cloud Firestore for real-time message storage
• Firebase Storage for media files

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.