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.

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.

Libraries

ult_flutter_ui