Devs Chat #

A powerful, customizable Flutter chat UI package with seamless Firebase Firestore integration.

🌟 Features #

Real-time Messaging - Instant chat updates via Firebase Firestore
Beautiful UI - Pre-designed chat cards and app bars
Highly Customizable - Flexible styling and behavior options
Easy Integration - Minimal setup required
Responsive Design - Works across all screen sizes

Chat Card Types

_{Modern Chat Card}

_{Material Chat Card}

_{IOS Chat Card}

_{Gradient Chat Card}

_{Card Chat Card}

_{Chat Background}

Other Features

_{Message Links}

_{Voice Chat TextField}

_{Document Adding Text Field}

_{Gradient App Bar}

📦 Installation #

Add devs_chat to your pubspec.yaml:

dependencies:
  devs_chat: ^0.0.6

Run:

flutter pub get

🔧 Setup #

1. Firebase Initialization #

Initialize Firebase in your app:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

2. Required Firebase Dependencies #

Make sure these packages are in your pubspec.yaml:

dependencies:
  firebase_core: ^2.0.0
  cloud_firestore: ^4.0.0

🚀 Quick Start #

Add DevsChatScreen to your widget tree:

DevsChatScreen(
collectionName: "chats",        // Firestore collection
userIdKey: 'userId',            // Field name for user ID
messageKey: 'message',          // Field name for message text
chatCardType: ChatCardType.simpleChatCard,  // Chat bubble style
myUserId: 'user1',              // Current user ID
oppUserId: 'user2',             // Other user ID
appBar: ChatAppBarType.defaultAppBar,  // App bar style
chatListKey: 'chats',           // Field storing message array
)

This minimal setup creates a fully functioning chat UI that saves and displays messages from Firestore.

💬 Chat Screen Options #

Essential Parameters #

Parameter	Type	Description
`collectionName`	`String`	Firestore collection name for chats
`userIdKey`	`String`	Field name identifying message sender
`messageKey`	`String`	Field name for message content
`myUserId`	`String`	ID of current user
`oppUserId`	`String`	ID of chat partner
`chatListKey`	`String`	Field name for messages array in document

UI Customization #

Parameter	Type	Description
`chatCardType`	`ChatCardType?`	Predefined chat bubble style
`chatCardWidget`	`Widget?`	Custom chat bubble widget
`appBar`	`ChatAppBarType?`	Predefined app bar style
`appBarWidget`	`PreferredSizeWidget?`	Custom app bar widget
`chatBackgroundColor`	`Color?`	Background color for chat area
`chatBackgroundImage`	`ImageProvider<Object>?`	Background image for chat area
`sendMessageButtonWidget`	`Widget?`	Custom send button widget

Optional Configuration #

Parameter	Type	Description
`documentId`	`String?`	Custom document ID (auto-generated if null)
`timestampKey`	`String?`	Field name for message timestamp
`onSendMessageButtonPressed`	`void Function(Map)?`	Callback after message is sent

🎨 Available Styles #

Chat Card Types #

ChatCardType.simpleChatCard
Clean, minimal chat bubbles with different colors for sender/receiver
```
chatCardType: ChatCardType.simpleChatCard
```
ChatCardType.gradientChatCard
Stylish gradient background chat bubbles
```
chatCardType: ChatCardType.gradientChatCard
```
ChatCardType.customChatCard
For advanced customization needs

App Bar Types #

ChatAppBarType.defaultAppBar
Standard chat app bar with user info and avatar
```
appBar: ChatAppBarType.defaultAppBar
```
ChatAppBarType.gradientAppBar
App bar with gradient background effect
```
appBar: ChatAppBarType.gradientAppBar
```

📋 Complete Example #

import 'package:devs_chat/devs_chat.dart';
import 'package:flutter/material.dart';

class ChatScreen extends StatefulWidget {
  const ChatScreen({Key? key}) : super(key: key);

  @override
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DevsChatScreen(
        // Required parameters
        collectionName: "chats",
        userIdKey: 'userId',
        messageKey: 'message',
        myUserId: 'user1',
        oppUserId: 'user2',
        chatListKey: 'chats',

        // UI customization
        chatCardType: ChatCardType.simpleChatCard,
        appBar: ChatAppBarType.defaultAppBar,
        chatBackgroundColor: Colors.grey[100],

        // Optional configuration
        timestampKey: 'timestamp',
        onSendMessageButtonPressed: (Map message) {
          print("Message sent: ${message['message']}");
          // Perform additional actions if needed
        },
      ),
    );
  }
}

🗄️ Firestore Structure #

Document Format #

The package expects your Firestore documents to follow this structure:

{
  "chats": [  // Value of chatListKey
    {
      "userId": "user1",  // Value of userIdKey (sender ID)
      "message": "Hello!",  // Value of messageKey (content)
      "timestamp": "2023-06-15T10:30:00.000Z"  // Value of timestampKey
    },
    {
      "userId": "user2",
      "message": "Hi there!",
      "timestamp": "2023-06-15T10:31:00.000Z"
    }
  ]
}

Document ID Generation #

If documentId is not provided, it will be generated by combining the user IDs (ordered by hash code):

if (myUserId.hashCode > oppUserId.hashCode) {
documentId = "$myUserId$oppUserId";
} else {
documentId = "$oppUserId$myUserId";
}

This ensures the same two users always share the same chat document.

🛠️ Advanced Customization #

Custom Chat Card #

Create your own chat bubble design:

DevsChatScreen(
// Other parameters...
chatCardWidget: Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.symmetric(vertical: 5),
decoration: BoxDecoration(
color: Colors.blue[100],
borderRadius: BorderRadius.circular(15),
),
child: Text(
// Your message text
),
),
)

Custom App Bar #

Use your own app bar design:

DevsChatScreen(
// Other parameters...
appBarWidget: AppBar(
title: Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage("https://example.com/avatar.jpg"),
),
SizedBox(width: 10),
Text("Chat with John"),
],
),
actions: [
IconButton(
icon: Icon(Icons.call),
onPressed: () {
// Handle call action
},
),
],
),
)

Custom Send Button #

Create your own send button:

DevsChatScreen(
// Other parameters...
sendMessageButtonWidget: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.purple],
),
shape: BoxShape.circle,
),
child: Padding(
padding: EdgeInsets.all(10),
child: Icon(
Icons.send,
color: Colors.white,
),
),
),
)

⚠️ Common Issues & Troubleshooting #

Messages Not Appearing #

Check that Firebase is properly initialized
Verify your Firestore security rules allow read/write
Ensure collection and document paths are correct

Styling Conflicts #

Don't use both chatCardType and chatCardWidget simultaneously
Don't use both chatBackgroundColor and chatBackgroundImage together

Message Order #

Messages are displayed with the most recent at the bottom
If order is wrong, check your timestampKey field

Performance #

For large chat histories, consider pagination (coming in future releases)

🧩 Widget Hierarchy #

DevsChatScreen
  ├── AppBar/Custom AppBarWidget
  ├── Container (Background)
  │   └── Column
  │       ├── StreamBuilder (Firestore stream)
  │       │   └── ListView.builder
  │       │       └── ChatCard/Custom ChatCardWidget
  │       └── TextField (Message input)
  └── FloatingActionButton (Send button)

🗺️ Roadmap #

Future features planned:

Image/file attachments
Voice messages
Read receipts
Typing indicators
Emoji reactions
Group chat support

🤝 Contributing #

Contributions are welcome! If you'd like to contribute:

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License #

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

👨‍💻 Author #

Sayed Zeeshan Hyder

GitHub: SayedZeeshanHyder

devs_chat 0.0.6 devs_chat: ^0.0.6 copied to clipboard

Metadata