feat: add firebase repo implementation, remove scaffold builders and add basescreenbuilder

packages/chat_repository_interface/lib/src/models/chat_model.dart

@@ -80,6 +80,36 @@ class ChatModel {
         lastMessage: lastMessage ?? this.lastMessage,
         unreadMessageCount: unreadMessageCount ?? this.unreadMessageCount,
       );
+
+  /// The factory chat model that creates a chat model from a map
+  factory ChatModel.fromMap(String id, Map<String, dynamic> data) {
+    return ChatModel(
+      id: id,
+      users: List<String>.from(data['users']),
+      isGroupChat: data['isGroupChat'],
+      chatName: data['chatName'],
+      description: data['description'],
+      imageUrl: data['imageUrl'],
+      canBeDeleted: data['canBeDeleted'] ?? true,
+      lastUsed: data['lastUsed'] != null
+          ? DateTime.fromMillisecondsSinceEpoch(data['lastUsed'])
+          : null,
+      lastMessage: data['lastMessage'],
+      unreadMessageCount: data['unreadMessageCount'] ?? 0,
+    );
+  }
+
+  Map<String, dynamic> toMap() => {
+        'users': users,
+        'isGroupChat': isGroupChat,
+        'chatName': chatName,
+        'description': description,
+        'imageUrl': imageUrl,
+        'canBeDeleted': canBeDeleted,
+        'lastUsed': lastUsed?.millisecondsSinceEpoch,
+        'lastMessage': lastMessage,
+        'unreadMessageCount': unreadMessageCount,
+      };
 }
 
 /// The chat model extension

packages/chat_repository_interface/lib/src/models/message_model.dart

@@ -15,7 +15,7 @@ class MessageModel {
     required this.timestamp,
     required this.senderId,
   });
-
+  /// The chat id
   final String chatId;
 
   /// The message id
@@ -50,6 +50,27 @@ class MessageModel {
         timestamp: timestamp ?? this.timestamp,
         senderId: senderId ?? this.senderId,
       );
+
+  factory MessageModel.fromMap(String id, Map<String, dynamic> map) {
+    return MessageModel(
+      chatId: map['chatId'],
+      id: id,
+      text: map['text'],
+      imageUrl: map['imageUrl'],
+      timestamp: DateTime.fromMillisecondsSinceEpoch(map['timestamp']),
+      senderId: map['senderId'],
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    return {
+      'chatId': chatId,
+      'text': text,
+      'imageUrl': imageUrl,
+      'timestamp': timestamp.millisecondsSinceEpoch,
+      'senderId': senderId,
+    };
+  }
 }
 
 /// Extension on [MessageModel] to check the message type

packages/chat_repository_interface/lib/src/models/user_model.dart

@@ -25,6 +25,15 @@ class UserModel {
 
   /// The user image url
   final String? imageUrl;
+
+  factory UserModel.fromMap(String id, Map<String, dynamic> data) {
+    return UserModel(
+      id: id,
+      firstName: data['firstName'],
+      lastName: data['lastName'],
+      imageUrl: data['imageUrl'],
+    );
+  }
 }
 
 /// Extension on [UserModel] to get the user full name

packages/chat_repository_interface/lib/src/services/chat_service.dart

@@ -188,18 +188,10 @@ class ChatService {
   /// Returns a [Stream] of [int].
   Stream<int> getUnreadMessagesCount({
     required String userId,
-    String? chatId,
   }) {
-    if (chatId == null) {
     return chatRepository.getUnreadMessagesCount(userId: userId);
   }
 
-    return chatRepository.getUnreadMessagesCount(
-      userId: userId,
-      chatId: chatId,
-    );
-  }
-
   /// Upload an image with the given parameters.
   /// [path] is the image path.
   /// [image] is the image bytes.
@@ -218,9 +210,18 @@ class ChatService {
   /// Returns a [Future] of [void].
   Future<void> markAsRead({
     required String chatId,
+    required String userId,
   }) async {
     var chat = await chatRepository.getChat(chatId: chatId).first;
 
+    if (chat.lastMessage == null) return;
+
+    var lastMessage = await chatRepository
+        .getMessage(chatId: chatId, messageId: chat.lastMessage!)
+        .first;
+
+    if (lastMessage != null && lastMessage.senderId == userId) return;
+
     var newChat = chat.copyWith(
       lastUsed: DateTime.now(),
       unreadMessageCount: 0,

packages/firebase_chat_repository/README.md

@@ -1,39 +1,16 @@
-<!--
-This README describes the package. If you publish this package to pub.dev,
-this README's contents appear on the landing page for your package.
-
-For information about how to write a good package README, see the guide for
-[writing package pages](https://dart.dev/guides/libraries/writing-package-pages).
-
-For general information about developing packages, see the Dart guide for
-[creating packages](https://dart.dev/guides/libraries/create-library-packages)
-and the Flutter guide for
-[developing packages and plugins](https://flutter.dev/developing-packages).
--->
-
-TODO: Put a short description of the package here that helps potential users
-know whether this package might be useful for them.
-
-## Features
-
-TODO: List what your package can do. Maybe include images, gifs, or videos.
-
-## Getting started
-
-TODO: List prerequisites and provide or point to information on how to
-start using the package.
+# Firebase chat repository
+The firebase implementation of the chat_repository_interface
 
 ## Usage
-
-TODO: Include short and useful examples for package users. Add longer examples
-to `/example` folder.
-
 ```dart
-const like = 'sample';
+chatService: ChatService(
+    chatRepository: FirebaseChatRepository(
+        chatCollection: 'chats', 
+        messageCollection: 'messages', 
+        mediaPath: 'chat',
+    ),
+    userRepository: FirebaseUserRepository(
+        userCollection: 'users',
+    ),
+),
 ```
-
-## Additional information
-
-TODO: Tell users more about the package: where to find more information, how to
-contribute to the package, how to file issues, what response they can expect
-from the package authors, and more.

packages/firebase_chat_repository/lib/firebase_chat_repository.dart

@@ -1,5 +1,2 @@
-/// A Calculator.
-class Calculator {
-  /// Returns [value] plus 1.
-  int addOne(int value) => value + 1;
-}
+export 'src/firebase_chat_repository.dart';
+export 'src/firebase_user_repository.dart';

packages/firebase_chat_repository/lib/src/firebase_chat_repository.dart

@@ -0,0 +1,191 @@
+import 'dart:typed_data';
+
+import 'package:chat_repository_interface/chat_repository_interface.dart';
+import 'package:cloud_firestore/cloud_firestore.dart';
+import 'package:firebase_storage/firebase_storage.dart';
+
+class FirebaseChatRepository implements ChatRepositoryInterface {
+  final FirebaseFirestore _firestore;
+  final FirebaseStorage _storage;
+  final String chatCollection;
+  final String messageCollection;
+  final String mediaPath;
+
+  FirebaseChatRepository({
+    FirebaseFirestore? firestore,
+    FirebaseStorage? storage,
+    this.chatCollection = 'chats',
+    this.messageCollection = 'messages',
+    this.mediaPath = 'chat',
+  })  : _firestore = firestore ?? FirebaseFirestore.instance,
+        _storage = storage ?? FirebaseStorage.instance;
+
+  @override
+  Future<void> createChat({
+    required List<String> users,
+    required bool isGroupChat,
+    String? chatName,
+    String? description,
+    String? imageUrl,
+    List<MessageModel>? messages,
+  }) async {
+    final chatData = {
+      'users': users,
+      'isGroupChat': isGroupChat,
+      'chatName': chatName,
+      'description': description,
+      'imageUrl': imageUrl,
+      'createdAt': DateTime.now().millisecondsSinceEpoch,
+    };
+    await _firestore.collection(chatCollection).add(chatData);
+  }
+
+  @override
+  Future<void> deleteChat({required String chatId}) async {
+    await _firestore.collection(chatCollection).doc(chatId).delete();
+  }
+
+  @override
+  Stream<ChatModel> getChat({required String chatId}) {
+    return _firestore
+        .collection(chatCollection)
+        .doc(chatId)
+        .snapshots()
+        .map((snapshot) {
+      var data = snapshot.data() as Map<String, dynamic>;
+      return ChatModel.fromMap(snapshot.id, data);
+    });
+  }
+
+  @override
+  Stream<List<ChatModel>?> getChats({required String userId}) {
+    return _firestore
+        .collection(chatCollection)
+        .where('users', arrayContains: userId)
+        .snapshots()
+        .map((querySnapshot) {
+      return querySnapshot.docs.map((doc) {
+        var data = doc.data();
+        return ChatModel.fromMap(doc.id, data);
+      }).toList();
+    });
+  }
+
+  @override
+  Stream<MessageModel?> getMessage(
+      {required String chatId, required String messageId}) {
+    return _firestore
+        .collection(chatCollection)
+        .doc(chatId)
+        .collection(messageCollection)
+        .doc(messageId)
+        .snapshots()
+        .map((snapshot) {
+      var data = snapshot.data() as Map<String, dynamic>;
+      return MessageModel.fromMap(
+        snapshot.id,
+        data,
+      );
+    });
+  }
+
+  @override
+  Stream<List<MessageModel>?> getMessages({
+    required String chatId,
+    required String userId,
+    required int pageSize,
+    required int page,
+  }) {
+    return _firestore
+        .collection(chatCollection)
+        .doc(chatId)
+        .collection(messageCollection)
+        .orderBy('timestamp')
+        .limit(pageSize)
+        .snapshots()
+        .map((query) => query.docs
+            .map((snapshot) => MessageModel.fromMap(
+                  snapshot.id,
+                  snapshot.data(),
+                ))
+            .toList());
+  }
+
+  @override
+  Stream<int> getUnreadMessagesCount(
+      {required String userId, String? chatId}) async* {
+    var query = _firestore
+        .collection(chatCollection)
+        .where('users', arrayContains: userId)
+        .where('unreadMessageCount', isGreaterThan: 0)
+        .snapshots();
+
+    await for (var snapshot in query) {
+      var count = 0;
+      for (var doc in snapshot.docs) {
+        var data = doc.data();
+        var lastMessageKey = data['lastMessage'];
+
+        var message =
+            await getMessage(chatId: doc.id, messageId: lastMessageKey).first;
+        if (message?.senderId != userId) {
+          count += data['unreadMessageCount'] as int;
+        }
+      }
+
+      yield count;
+    }
+  }
+
+  @override
+  Future<void> sendMessage({
+    required String chatId,
+    required String senderId,
+    required String messageId,
+    String? text,
+    String? imageUrl,
+    DateTime? timestamp,
+  }) async {
+    var message = MessageModel(
+        chatId: chatId,
+        id: messageId,
+        text: text,
+        imageUrl: imageUrl,
+        timestamp: timestamp ?? DateTime.now(),
+        senderId: senderId);
+
+    await _firestore
+        .collection(chatCollection)
+        .doc(chatId)
+        .collection(messageCollection)
+        .doc(messageId)
+        .set(
+          message.toMap(),
+        );
+
+    await _firestore.collection(chatCollection).doc(chatId).update(
+      {
+        'lastMessage': messageId,
+        'unreadMessageCount': FieldValue.increment(1),
+        'lastUsed': DateTime.now().millisecondsSinceEpoch,
+      },
+    );
+  }
+
+  @override
+  Future<void> updateChat({required ChatModel chat}) async {
+    await _firestore
+        .collection(chatCollection)
+        .doc(chat.id)
+        .update(chat.toMap());
+  }
+
+  @override
+  Future<String> uploadImage(
+      {required String path, required Uint8List image}) async {
+    final ref = _storage.ref().child(mediaPath).child(path);
+    final uploadTask = ref.putData(image);
+    final snapshot = await uploadTask.whenComplete(() => {});
+    return await snapshot.ref.getDownloadURL();
+  }
+}

packages/firebase_chat_repository/lib/src/firebase_user_repository.dart

@@ -0,0 +1,41 @@
+import 'package:chat_repository_interface/chat_repository_interface.dart';
+import 'package:cloud_firestore/cloud_firestore.dart';
+
+class FirebaseUserRepository implements UserRepositoryInterface {
+  final FirebaseFirestore _firestore;
+  final String userCollection;
+
+  FirebaseUserRepository({
+    FirebaseFirestore? firestore,
+    this.userCollection = 'users',
+  }) : _firestore = firestore ?? FirebaseFirestore.instance;
+
+  @override
+  Stream<List<UserModel>> getAllUsers() {
+    return _firestore
+        .collection(userCollection)
+        .snapshots()
+        .map((querySnapshot) {
+      return querySnapshot.docs
+          .map((doc) => UserModel.fromMap(
+                doc.id,
+                doc.data(),
+              ))
+          .toList();
+    });
+  }
+
+  @override
+  Stream<UserModel> getUser({required String userId}) {
+    return _firestore
+        .collection(userCollection)
+        .doc(userId)
+        .snapshots()
+        .map((snapshot) {
+      return UserModel.fromMap(
+        snapshot.id,
+        snapshot.data() as Map<String, dynamic>,
+      );
+    });
+  }
+}

packages/firebase_chat_repository/pubspec.yaml

@@ -2,6 +2,7 @@ name: firebase_chat_repository
 description: "A new Flutter package project."
 version: 0.0.1
 homepage:
+publish_to: 'none'
 
 environment:
   sdk: '>=3.4.3 <4.0.0'
@@ -11,6 +12,12 @@ dependencies:
   flutter:
     sdk: flutter
 
+  chat_repository_interface:
+    path: ../chat_repository_interface
+  
+  firebase_storage: any
+  cloud_firestore: any
+
 dev_dependencies:
   flutter_test:
     sdk: flutter

packages/flutter_chat/example/.gitignore

@@ -41,3 +41,5 @@ app.*.map.json
 /android/app/debug
 /android/app/profile
 /android/app/release
+
+firebase_options.dart

packages/flutter_chat/example/firebase.json

@@ -0,0 +1 @@
+{"flutter":{"platforms":{"dart":{"lib/firebase_options.dart":{"projectId":"appshell-demo","configurations":{"android":"1:431820621472:android:6a0f2bc3559d17781babc5","web":"1:431820621472:web:f4b27eea24be24fd1babc5"}}},"android":{"default":{"projectId":"appshell-demo","appId":"1:431820621472:android:6a0f2bc3559d17781babc5","fileOutput":"android/app/google-services.json"}}}}}

packages/flutter_chat/example/lib/main.dart

@@ -1,3 +1,7 @@
+// import 'package:example/firebase_options.dart';
+// import 'package:firebase_auth/firebase_auth.dart';
+// import 'package:firebase_chat_repository/firebase_chat_repository.dart';
+// import 'package:firebase_core/firebase_core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_chat/flutter_chat.dart';
 
@@ -7,7 +11,6 @@ void main() {
 
 class MyApp extends StatelessWidget {
   const MyApp({super.key});
-
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
@@ -16,6 +19,18 @@ class MyApp extends StatelessWidget {
         useMaterial3: true,
       ),
       home: const MyHomePage(),
+      // FutureBuilder(
+      // future: Firebase.initializeApp(
+      // options: DefaultFirebaseOptions.currentPlatform,
+      // ),
+      // builder: (context, snapshot) {
+      // if (snapshot.connectionState != ConnectionState.done) {
+      // return const Center(
+      // child: CircularProgressIndicator(),
+      // );
+      // }
+      // return const MyHomePage();
+      // }),
     );
   }
 }
@@ -28,6 +43,12 @@ class MyHomePage extends StatefulWidget {
 }
 
 class _MyHomePageState extends State<MyHomePage> {
+  // @override
+  // void initState() {
+  // FirebaseAuth.instance.signInAnonymously();
+  // super.initState();
+  // }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(

packages/flutter_chat/example/pubspec.yaml

@@ -13,6 +13,10 @@ dependencies:
   cupertino_icons: ^1.0.8
   flutter_chat:
     path: ../
+  # firebase_chat_repository:
+    # path: ../../firebase_chat_repository
+  # firebase_core: any
+  # firebase_auth: any
 
 dev_dependencies:
   flutter_test:

packages/flutter_chat/lib/flutter_chat.dart

@@ -11,6 +11,7 @@ export "package:flutter_chat/src/flutter_chat_navigator_userstory.dart";
 export "src/config/chat_builders.dart";
 export "src/config/chat_options.dart";
 export "src/config/chat_translations.dart";
+export 'src/config/screen_types.dart';
 
 // Screens
 export "src/screens/chat_detail_screen.dart";

packages/flutter_chat/lib/src/config/chat_builders.dart

@@ -1,18 +1,14 @@
 import "package:chat_repository_interface/chat_repository_interface.dart";
 import "package:flutter/material.dart";
 import "package:flutter_chat/src/config/chat_translations.dart";
+import "package:flutter_chat/src/config/screen_types.dart";
 
 /// The chat builders
 class ChatBuilders {
   /// The chat builders constructor
   const ChatBuilders({
-    this.chatScreenScaffoldBuilder,
-    this.newChatScreenScaffoldBuilder,
-    this.newGroupChatScreenScaffoldBuilder,
-    this.newGroupChatOverviewScaffoldBuilder,
-    this.chatProfileScaffoldBuilder,
+    this.baseScreenBuilder,
     this.messageInputBuilder,
-    this.chatDetailScaffoldBuilder,
     this.chatRowContainerBuilder,
     this.groupAvatarBuilder,
     this.imagePickerContainerBuilder,
@@ -25,23 +21,21 @@ class ChatBuilders {
     this.loadingWidgetBuilder,
   });
 
-  /// The chat screen scaffold builder
-  final ScaffoldBuilder? chatScreenScaffoldBuilder;
-
-  /// The new chat screen scaffold builder
-  final ScaffoldBuilder? newChatScreenScaffoldBuilder;
-
-  /// The new group chat overview scaffold builder
-  final ScaffoldBuilder? newGroupChatOverviewScaffoldBuilder;
-
-  /// The new group chat screen scaffold builder
-  final ScaffoldBuilder? newGroupChatScreenScaffoldBuilder;
-
-  /// The chat detail scaffold builder
-  final ScaffoldBuilder? chatDetailScaffoldBuilder;
-
-  /// The chat profile scaffold builder
-  final ScaffoldBuilder? chatProfileScaffoldBuilder;
+  /// The base screen builder
+  /// This builder is used to build the base screen for the chat
+  /// You can switch on the [screenType] to build different screens
+  /// ```dart
+  ///   baseScreenBuilder: (context, screenType, appBar, body) {
+  ///     switch (screenType) {
+  ///       case ScreenType.chatScreen:
+  ///         return Scaffold(
+  ///           appBar: appBar,
+  ///           body: body,
+  ///         );
+  ///       case ScreenType.chatDetailScreen:
+  ///       // And so on....
+  /// ```
+  final BaseScreenBuilder? baseScreenBuilder;
 
   /// The message input builder
   final TextInputBuilder? messageInputBuilder;
@@ -100,12 +94,12 @@ typedef TextInputBuilder = Widget Function(
   ChatTranslations translations,
 );
 
-/// The scaffold builder
-typedef ScaffoldBuilder = Scaffold Function(
+/// The base screen builder
+typedef BaseScreenBuilder = Widget Function(
   BuildContext context,
+  ScreenType screenType,
   PreferredSizeWidget appBar,
   Widget body,
-  Color backgroundColor,
 );
 
 /// The container builder

packages/flutter_chat/lib/src/config/screen_types.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_chat/src/screens/chat_detail_screen.dart';
+import 'package:flutter_chat/src/screens/chat_profile_screen.dart';
+import 'package:flutter_chat/src/screens/chat_screen.dart';
+import 'package:flutter_chat/src/screens/creation/new_chat_screen.dart';
+import 'package:flutter_chat/src/screens/creation/new_group_chat_overview.dart';
+import 'package:flutter_chat/src/screens/creation/new_group_chat_screen.dart';
+
+enum ScreenType {
+  chatScreen(screen: ChatScreen),
+  chatDetailScreen(screen: ChatDetailScreen),
+  chatProfileScreen(screen: ChatProfileScreen),
+  newChatScreen(screen: NewChatScreen),
+  newGroupChatScreen(screen: NewGroupChatScreen),
+  newGroupChatOverview(screen: NewGroupChatOverview);
+
+  const ScreenType({
+    required this.screen,
+  });
+
+  final Type screen;
+}
+
+extension MapFromWidget on Widget {
+  ScreenType get mapScreenType {
+    return ScreenType.values.firstWhere((e) => e.screen == this.runtimeType);
+  }
+}

packages/flutter_chat/lib/src/flutter_chat_entry_widget.dart

@@ -9,6 +9,7 @@ class FlutterChatEntryWidget extends StatefulWidget {
   const FlutterChatEntryWidget({
     required this.userId,
     this.chatService,
+    this.options,
     this.onTap,
     this.widgetSize = 75,
     this.backgroundColor = Colors.grey,
@@ -46,6 +47,9 @@ class FlutterChatEntryWidget extends StatefulWidget {
   /// Text style for the counter.
   final TextStyle? textStyle;
 
+  /// The chat options
+  final ChatOptions? options;
+
   @override
   State<FlutterChatEntryWidget> createState() => _FlutterChatEntryWidgetState();
 }
@@ -69,6 +73,7 @@ class _FlutterChatEntryWidgetState extends State<FlutterChatEntryWidget> {
                 builder: (context) => FlutterChatNavigatorUserstory(
                   userId: widget.userId,
                   chatService: chatService,
+                  chatOptions: widget.options,
                 ),
               ),
             ),

packages/flutter_chat/lib/src/flutter_chat_navigator_userstory.dart

@@ -100,9 +100,8 @@ class _NavigatorWrapper extends StatelessWidget {
         chatService: chatService,
         chatOptions: chatOptions,
         chat: chat,
-        onReadChat: (chat) async => chatService.markAsRead(
-          chatId: chat.id,
-        ),
+        onReadChat: (chat) async =>
+            chatService.markAsRead(chatId: chat.id, userId: userId),
         onPressChatTitle: (chat) async {
           if (chat.isGroupChat) {
             return route(context, chatProfileScreen(context, null, chat));
@@ -117,7 +116,8 @@ class _NavigatorWrapper extends StatelessWidget {
         onPressUserProfile: (user) =>
             route(context, chatProfileScreen(context, user, null)),
         onUploadImage: (data) async {
-          var path = await chatService.uploadImage(path: "chats", image: data);
+          var path = await chatService.uploadImage(
+              path: "chats/${chat.id}-$userId-${DateTime.now()}", image: data);
 
           await chatService.sendMessage(
             messageId: "${chat.id}-$userId-${DateTime.now()}",
@@ -190,7 +190,8 @@ class _NavigatorWrapper extends StatelessWidget {
         onComplete: (users, title, description, image) async {
           String? path;
           if (image != null) {
-            path = await chatService.uploadImage(path: "groups", image: image);
+            path = await chatService.uploadImage(
+                path: "groups/$title", image: image);
           }
           var chat = await createGroupChat(
             users,

packages/flutter_chat/lib/src/screens/chat_detail_screen.dart

@@ -5,6 +5,7 @@ import "package:cached_network_image/cached_network_image.dart";
 import "package:chat_repository_interface/chat_repository_interface.dart";
 import "package:flutter/material.dart";
 import "package:flutter_chat/src/config/chat_options.dart";
+import "package:flutter_chat/src/config/screen_types.dart";
 import "package:flutter_chat/src/screens/creation/widgets/image_picker.dart";
 import "package:flutter_chat/src/services/date_formatter.dart";
 import "package:flutter_profile/flutter_profile.dart";
@@ -85,17 +86,15 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
 
   @override
   Widget build(BuildContext context) {
-    var theme = Theme.of(context);
-
-    return widget.chatOptions.builders.chatDetailScaffoldBuilder?.call(
-          context,
-          _AppBar(
+    if (widget.chatOptions.builders.baseScreenBuilder == null) {
+      return Scaffold(
+        appBar: _AppBar(
           chatTitle: chatTitle,
           chatOptions: widget.chatOptions,
           onPressChatTitle: widget.onPressChatTitle,
           chatModel: widget.chat,
         ),
-          _Body(
+        body: _Body(
           chatService: widget.chatService,
           options: widget.chatOptions,
           chat: widget.chat,
@@ -105,16 +104,19 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
           onMessageSubmit: widget.onMessageSubmit,
           onReadChat: widget.onReadChat,
         ),
-          theme.scaffoldBackgroundColor,
-        ) ??
-        Scaffold(
-          appBar: _AppBar(
+      );
+    }
+
+    return widget.chatOptions.builders.baseScreenBuilder!.call(
+      context,
+      widget.mapScreenType,
+      _AppBar(
         chatTitle: chatTitle,
         chatOptions: widget.chatOptions,
         onPressChatTitle: widget.onPressChatTitle,
         chatModel: widget.chat,
       ),
-          body: _Body(
+      _Body(
         chatService: widget.chatService,
         options: widget.chatOptions,
         chat: widget.chat,

packages/flutter_chat/lib/src/screens/chat_profile_screen.dart

@@ -1,6 +1,7 @@
 import "package:chat_repository_interface/chat_repository_interface.dart";
 import "package:flutter/material.dart";
 import "package:flutter_chat/src/config/chat_options.dart";
+import "package:flutter_chat/src/config/screen_types.dart";
 import "package:flutter_profile/flutter_profile.dart";
 
 /// The chat profile screen
@@ -41,27 +42,8 @@ class ChatProfileScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    var theme = Theme.of(context);
-
-    return options.builders.chatProfileScaffoldBuilder?.call(
-          context,
-          _AppBar(
-            user: userModel,
-            chat: chatModel,
-            options: options,
-          ),
-          _Body(
-            service: service,
-            currentUser: userId,
-            options: options,
-            user: userModel,
-            chat: chatModel,
-            onTapUser: onTapUser,
-            onPressStartChat: onPressStartChat,
-          ),
-          theme.scaffoldBackgroundColor,
-        ) ??
-        Scaffold(
+    if (options.builders.baseScreenBuilder == null) {
+      return Scaffold(
         appBar: _AppBar(
           user: userModel,
           chat: chatModel,
@@ -78,6 +60,26 @@ class ChatProfileScreen extends StatelessWidget {
         ),
       );
     }
+
+    return options.builders.baseScreenBuilder!.call(
+      context,
+      this.mapScreenType,
+      _AppBar(
+        user: userModel,
+        chat: chatModel,
+        options: options,
+      ),
+      _Body(
+        currentUser: userId,
+        options: options,
+        service: service,
+        user: userModel,
+        chat: chatModel,
+        onTapUser: onTapUser,
+        onPressStartChat: onPressStartChat,
+      ),
+    );
+  }
 }
 
 class _AppBar extends StatelessWidget implements PreferredSizeWidget {

packages/flutter_chat/lib/src/screens/chat_screen.dart

@@ -2,6 +2,7 @@ import "package:chat_repository_interface/chat_repository_interface.dart";
 import "package:flutter/material.dart";
 import "package:flutter_chat/src/config/chat_options.dart";
 import "package:flutter_chat/src/config/chat_translations.dart";
+import "package:flutter_chat/src/config/screen_types.dart";
 import "package:flutter_chat/src/services/date_formatter.dart";
 import "package:flutter_profile/flutter_profile.dart";
 
@@ -39,15 +40,14 @@ class ChatScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    var theme = Theme.of(context);
-    return chatOptions.builders.chatScreenScaffoldBuilder?.call(
-          context,
-          _AppBar(
+    if (chatOptions.builders.baseScreenBuilder == null) {
+      return Scaffold(
+        appBar: _AppBar(
           userId: userId,
           chatOptions: chatOptions,
           chatService: chatService,
         ),
-          _Body(
+        body: _Body(
           userId: userId,
           chatOptions: chatOptions,
           chatService: chatService,
@@ -55,15 +55,18 @@ class ChatScreen extends StatelessWidget {
           onPressStartChat: onPressStartChat,
           onDeleteChat: onDeleteChat,
         ),
-          theme.scaffoldBackgroundColor,
-        ) ??
-        Scaffold(
-          appBar: _AppBar(
+      );
+    }
+
+    return chatOptions.builders.baseScreenBuilder!.call(
+      context,
+      this.mapScreenType,
+      _AppBar(
         userId: userId,
         chatOptions: chatOptions,
         chatService: chatService,
       ),
-          body: _Body(
+      _Body(
         userId: userId,
         chatOptions: chatOptions,
         chatService: chatService,
@@ -395,9 +398,13 @@ class _ChatListItem extends StatelessWidget {
 
           var data = snapshot.data;
 
+          var showUnreadMessageCount =
+              data != null && data.senderId != currentUserId;
+
           return _ChatRow(
             title: chat.chatName ?? translations.groupNameEmpty,
-            unreadMessages: chat.unreadMessageCount,
+            unreadMessages:
+                showUnreadMessageCount ? chat.unreadMessageCount : 0,
             subTitle: data != null
                 ? data.isTextMessage
                     ? data.text
@@ -465,8 +472,12 @@ class _ChatListItem extends StatelessWidget {
 
             var data = snapshot.data;
 
+            var showUnreadMessageCount =
+                data != null && data.senderId != currentUserId;
+
             return _ChatRow(
-              unreadMessages: chat.unreadMessageCount,
+              unreadMessages:
+                  showUnreadMessageCount ? chat.unreadMessageCount : 0,
               avatar: options.builders.userAvatarBuilder?.call(
                     context,
                     otherUser,

packages/flutter_chat/lib/src/screens/creation/new_chat_screen.dart

@@ -1,6 +1,7 @@
 import "package:chat_repository_interface/chat_repository_interface.dart";
 import "package:flutter/material.dart";
 import "package:flutter_chat/src/config/chat_options.dart";
+import "package:flutter_chat/src/config/screen_types.dart";
 import "package:flutter_chat/src/screens/creation/widgets/search_field.dart";
 import "package:flutter_chat/src/screens/creation/widgets/search_icon.dart";
 import "package:flutter_chat/src/screens/creation/widgets/user_list.dart";
@@ -44,43 +45,8 @@ class _NewChatScreenState extends State<NewChatScreen> {
 
   @override
   Widget build(BuildContext context) {
-    var theme = Theme.of(context);
-
-    return widget.chatOptions.builders.newChatScreenScaffoldBuilder?.call(
-          context,
-          _AppBar(
-            chatOptions: widget.chatOptions,
-            isSearching: _isSearching,
-            onSearch: (query) {
-              setState(() {
-                _isSearching = query.isNotEmpty;
-                this.query = query;
-              });
-            },
-            onPressedSearchIcon: () {
-              setState(() {
-                _isSearching = !_isSearching;
-                query = "";
-              });
-
-              if (_isSearching) {
-                _textFieldFocusNode.requestFocus();
-              }
-            },
-            focusNode: _textFieldFocusNode,
-          ),
-          _Body(
-            chatOptions: widget.chatOptions,
-            chatService: widget.chatService,
-            isSearching: _isSearching,
-            onPressCreateGroupChat: widget.onPressCreateGroupChat,
-            onPressCreateChat: widget.onPressCreateChat,
-            userId: widget.userId,
-            query: query,
-          ),
-          theme.scaffoldBackgroundColor,
-        ) ??
-        Scaffold(
+    if (widget.chatOptions.builders.baseScreenBuilder == null) {
+      return Scaffold(
         appBar: _AppBar(
           chatOptions: widget.chatOptions,
           isSearching: _isSearching,
@@ -113,6 +79,42 @@ class _NewChatScreenState extends State<NewChatScreen> {
         ),
       );
     }
+
+    return widget.chatOptions.builders.baseScreenBuilder!.call(
+      context,
+      widget.mapScreenType,
+      _AppBar(
+        chatOptions: widget.chatOptions,
+        isSearching: _isSearching,
+        onSearch: (query) {
+          setState(() {
+            _isSearching = query.isNotEmpty;
+            this.query = query;
+          });
+        },
+        onPressedSearchIcon: () {
+          setState(() {
+            _isSearching = !_isSearching;
+            query = "";
+          });
+
+          if (_isSearching) {
+            _textFieldFocusNode.requestFocus();
+          }
+        },
+        focusNode: _textFieldFocusNode,
+      ),
+      _Body(
+        chatOptions: widget.chatOptions,
+        chatService: widget.chatService,
+        isSearching: _isSearching,
+        onPressCreateGroupChat: widget.onPressCreateGroupChat,
+        onPressCreateChat: widget.onPressCreateChat,
+        userId: widget.userId,
+        query: query,
+      ),
+    );
+  }
 }
 
 class _AppBar extends StatelessWidget implements PreferredSizeWidget {

packages/flutter_chat/lib/src/screens/creation/new_group_chat_overview.dart

@@ -3,6 +3,7 @@ import "dart:typed_data";
 import "package:chat_repository_interface/chat_repository_interface.dart";
 import "package:flutter/material.dart";
 import "package:flutter_chat/src/config/chat_options.dart";
+import "package:flutter_chat/src/config/screen_types.dart";
 import "package:flutter_chat/src/screens/creation/widgets/image_picker.dart";
 import "package:flutter_profile/flutter_profile.dart";
 
@@ -34,21 +35,8 @@ class NewGroupChatOverview extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    var theme = Theme.of(context);
-
-    return options.builders.newGroupChatOverviewScaffoldBuilder?.call(
-          context,
-          _AppBar(
-            options: options,
-          ),
-          _Body(
-            options: options,
-            users: users,
-            onComplete: onComplete,
-          ),
-          theme.scaffoldBackgroundColor,
-        ) ??
-        Scaffold(
+    if (options.builders.baseScreenBuilder == null) {
+      return Scaffold(
         appBar: _AppBar(
           options: options,
         ),
@@ -59,6 +47,20 @@ class NewGroupChatOverview extends StatelessWidget {
         ),
       );
     }
+
+    return options.builders.baseScreenBuilder!.call(
+      context,
+      this.mapScreenType,
+      _AppBar(
+        options: options,
+      ),
+      _Body(
+        options: options,
+        users: users,
+        onComplete: onComplete,
+      ),
+    );
+  }
 }
 
 class _AppBar extends StatelessWidget implements PreferredSizeWidget {

packages/flutter_chat/lib/src/screens/creation/new_group_chat_screen.dart

@@ -1,6 +1,7 @@
 import "package:chat_repository_interface/chat_repository_interface.dart";
 import "package:flutter/material.dart";
 import "package:flutter_chat/src/config/chat_options.dart";
+import "package:flutter_chat/src/config/screen_types.dart";
 import "package:flutter_chat/src/screens/creation/widgets/search_field.dart";
 import "package:flutter_chat/src/screens/creation/widgets/search_icon.dart";
 import "package:flutter_chat/src/screens/creation/widgets/user_list.dart";
@@ -42,44 +43,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
 
   @override
   Widget build(BuildContext context) {
-    var theme = Theme.of(context);
-
-    return widget.chatOptions.builders.newGroupChatScreenScaffoldBuilder?.call(
-          context,
-          _AppBar(
-            chatOptions: widget.chatOptions,
-            isSearching: _isSearching,
-            onSearch: (query) {
-              setState(() {
-                _isSearching = query.isNotEmpty;
-                this.query = query;
-              });
-            },
-            onPressedSearchIcon: () {
-              setState(() {
-                _isSearching = !_isSearching;
-                query = "";
-              });
-
-              if (_isSearching) {
-                _textFieldFocusNode.requestFocus();
-              }
-            },
-            focusNode: _textFieldFocusNode,
-          ),
-          _Body(
-            onSelectedUser: handleUserTap,
-            selectedUsers: selectedUsers,
-            onPressGroupChatOverview: widget.onContinue,
-            chatOptions: widget.chatOptions,
-            chatService: widget.chatService,
-            isSearching: _isSearching,
-            userId: widget.userId,
-            query: query,
-          ),
-          theme.scaffoldBackgroundColor,
-        ) ??
-        Scaffold(
+    if (widget.chatOptions.builders.baseScreenBuilder == null) {
+      return Scaffold(
         appBar: _AppBar(
           chatOptions: widget.chatOptions,
           isSearching: _isSearching,
@@ -114,6 +79,43 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
       );
     }
 
+    return widget.chatOptions.builders.baseScreenBuilder!.call(
+      context,
+      widget.mapScreenType,
+      _AppBar(
+        chatOptions: widget.chatOptions,
+        isSearching: _isSearching,
+        onSearch: (query) {
+          setState(() {
+            _isSearching = query.isNotEmpty;
+            this.query = query;
+          });
+        },
+        onPressedSearchIcon: () {
+          setState(() {
+            _isSearching = !_isSearching;
+            query = "";
+          });
+
+          if (_isSearching) {
+            _textFieldFocusNode.requestFocus();
+          }
+        },
+        focusNode: _textFieldFocusNode,
+      ),
+      _Body(
+        onSelectedUser: handleUserTap,
+        selectedUsers: selectedUsers,
+        onPressGroupChatOverview: widget.onContinue,
+        chatOptions: widget.chatOptions,
+        chatService: widget.chatService,
+        isSearching: _isSearching,
+        userId: widget.userId,
+        query: query,
+      ),
+    );
+  }
+
   void handleUserTap(UserModel user) {
     if (selectedUsers.contains(user)) {
       setState(() {