fix: added more style options and recommendations from trello

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.3.1
+
+- Added more options for styling the UI.
+- Changed the way profile images are shown.
+- Added an ontapUser in the chat.
+- Changed the way the time is shown in the chat after a message.
+- Added option to customize chat title and username chat message widget.
+
 ## 1.2.1
 
 - Fixed bug in the LocalChatService

packages/flutter_chat/lib/src/flutter_chat_navigator_userstory.dart

@@ -31,6 +31,7 @@ Widget _chatScreenRoute(
   BuildContext context,
 ) =>
     ChatScreen(
+      unreadMessageTextStyle: configuration.unreadMessageTextStyle,
       service: configuration.chatService,
       options: configuration.chatOptionsBuilder(context),
       onNoChats: () async => Navigator.of(context).push(
@@ -84,11 +85,31 @@ Widget _chatDetailScreenRoute(
   String chatId,
 ) =>
     ChatDetailScreen(
+      chatTitleBuilder: configuration.chatTitleBuilder,
+      usernameBuilder: configuration.usernameBuilder,
+      loadingWidgetBuilder: configuration.loadingWidgetBuilder,
+      iconDisabledColor: configuration.iconDisabledColor,
       pageSize: configuration.messagePageSize,
       options: configuration.chatOptionsBuilder(context),
       translations: configuration.translations,
       service: configuration.chatService,
       chatId: chatId,
+      textfieldBottomPadding: configuration.textfieldBottomPadding ?? 0,
+      onPressUserProfile: (userId) async {
+        if (configuration.onPressUserProfile != null) {
+          return configuration.onPressUserProfile?.call();
+        }
+        return Navigator.of(context).push(
+          MaterialPageRoute(
+            builder: (context) => _chatProfileScreenRoute(
+              configuration,
+              context,
+              chatId,
+              userId,
+            ),
+          ),
+        );
+      },
       onMessageSubmit: (message) async {
         if (configuration.onMessageSubmit != null) {
           await configuration.onMessageSubmit?.call(message);

packages/flutter_chat/lib/src/flutter_chat_userstory.dart

@@ -15,6 +15,7 @@ List<GoRoute> getChatStoryRoutes(
         path: ChatUserStoryRoutes.chatScreen,
         pageBuilder: (context, state) {
           var chatScreen = ChatScreen(
+            unreadMessageTextStyle: configuration.unreadMessageTextStyle,
             service: configuration.chatService,
             options: configuration.chatOptionsBuilder(context),
             onNoChats: () async =>
@@ -53,11 +54,24 @@ List<GoRoute> getChatStoryRoutes(
         pageBuilder: (context, state) {
           var chatId = state.pathParameters['id'];
           var chatDetailScreen = ChatDetailScreen(
+            chatTitleBuilder: configuration.chatTitleBuilder,
+            usernameBuilder: configuration.usernameBuilder,
+            loadingWidgetBuilder: configuration.loadingWidgetBuilder,
+            iconDisabledColor: configuration.iconDisabledColor,
             pageSize: configuration.messagePageSize,
             options: configuration.chatOptionsBuilder(context),
             translations: configuration.translations,
             service: configuration.chatService,
             chatId: chatId!,
+            textfieldBottomPadding: configuration.textfieldBottomPadding ?? 0,
+            onPressUserProfile: (userId) async {
+              if (configuration.onPressUserProfile != null) {
+                return configuration.onPressUserProfile?.call();
+              }
+              return context.push(
+                ChatUserStoryRoutes.chatProfileScreenPath(chatId, userId),
+              );
+            },
             onMessageSubmit: (message) async {
               if (configuration.onMessageSubmit != null) {
                 await configuration.onMessageSubmit?.call(message);

packages/flutter_chat/lib/src/models/chat_configuration.dart

@@ -31,6 +31,12 @@ class ChatUserStoryConfiguration {
     this.afterMessageSent,
     this.messagePageSize = 20,
     this.onPressUserProfile,
+    this.textfieldBottomPadding = 0,
+    this.iconDisabledColor = Colors.grey,
+    this.unreadMessageTextStyle,
+    this.loadingWidgetBuilder,
+    this.usernameBuilder,
+    this.chatTitleBuilder,
   });
 
   /// The service responsible for handling chat-related functionalities.
@@ -91,4 +97,10 @@ class ChatUserStoryConfiguration {
 
   /// Callback function triggered when user profile is pressed.
   final Function()? onPressUserProfile;
+  final double? textfieldBottomPadding;
+  final Color? iconDisabledColor;
+  final TextStyle? unreadMessageTextStyle;
+  final Widget? Function(BuildContext context)? loadingWidgetBuilder;
+  final Widget Function(String userFullName)? usernameBuilder;
+  final Widget Function(String chatTitle)? chatTitleBuilder;
 }

packages/flutter_chat/pubspec.yaml

@@ -4,7 +4,7 @@
 
 name: flutter_chat
 description: A new Flutter package project.
-version: 1.2.1
+version: 1.3.1
 
 publish_to: none
 
@@ -20,17 +20,17 @@ dependencies:
     git:
       url: https://github.com/Iconica-Development/flutter_chat
       path: packages/flutter_chat_view
-      ref: 1.2.1
+      ref: 1.3.1
   flutter_chat_interface:
     git:
       url: https://github.com/Iconica-Development/flutter_chat
       path: packages/flutter_chat_interface
-      ref: 1.2.1
+      ref: 1.3.1
   flutter_chat_local:
     git:
       url: https://github.com/Iconica-Development/flutter_chat
       path: packages/flutter_chat_local
-      ref: 1.2.1
+      ref: 1.3.1
 
 dev_dependencies:
   flutter_iconica_analysis:

packages/flutter_chat_firebase/lib/service/firebase_chat_detail_service.dart

@@ -238,6 +238,9 @@ class FirebaseChatDetailService
       onCancel: () async {
         await _subscription?.cancel();
         _subscription = null;
+        _cumulativeMessages = [];
+        lastChat = chatId;
+        lastMessage = null;
         debugPrint('Canceling messages stream');
       },
     );
@@ -259,14 +262,16 @@ class FirebaseChatDetailService
   /// [pageSize]: The number of messages to fetch.
   /// [chatId]: The ID of the chat.
   @override
-  Future<void> fetchMoreMessage(int pageSize, String chatId) async {
+  Future<void> fetchMoreMessage(
-    if (lastChat == null) {
+    int pageSize,
-      lastChat = chatId;
+    String chatId,
-    } else if (lastChat != chatId) {
+  ) async {
+    if (lastChat != chatId) {
       _cumulativeMessages = [];
       lastChat = chatId;
       lastMessage = null;
     }
+
     // get the x amount of last messages from the oldest message that is in
     // cumulative messages and add that to the list
     var messages = <ChatMessageModel>[];

packages/flutter_chat_firebase/lib/service/firebase_chat_overview_service.dart

@@ -90,11 +90,13 @@ class FirebaseChatOverviewService implements ChatOverviewService {
             for (var element in event.docChanges) {
               var chat = element.doc.data();
               if (chat == null) return;
+
               var otherUser = await _userService.getUser(
                 chat.users.firstWhere(
                   (element) => element != currentUser?.id,
                 ),
               );
+
               var unread =
                   await _addUnreadChatSubscription(chat.id!, currentUser!.id!);
 

packages/flutter_chat_firebase/pubspec.yaml

@@ -4,7 +4,7 @@
 
 name: flutter_chat_firebase
 description: A new Flutter package project.
-version: 1.2.1
+version: 1.3.1
 publish_to: none
 
 environment:
@@ -23,7 +23,7 @@ dependencies:
     git:
       url: https://github.com/Iconica-Development/flutter_chat
       path: packages/flutter_chat_interface
-      ref: 1.2.1
+      ref: 1.3.1
 
 dev_dependencies:
   flutter_iconica_analysis:

packages/flutter_chat_interface/lib/src/service/chat_detail_service.dart

@@ -21,8 +21,10 @@ abstract class ChatDetailService with ChangeNotifier {
     String chatId,
   );
 
-  /// Fetches more messages for the specified chat with a given page size.
+  Future<void> fetchMoreMessage(
-  Future<void> fetchMoreMessage(int pageSize, String chatId);
+    int pageSize,
+    String chatId,
+  );
 
   /// Retrieves the list of messages for the chat.
   List<ChatMessageModel> getMessages();

packages/flutter_chat_interface/pubspec.yaml

@@ -4,7 +4,7 @@
 
 name: flutter_chat_interface
 description: A new Flutter package project.
-version: 1.2.1
+version: 1.3.1
 publish_to: none
 
 environment:

packages/flutter_chat_local/lib/service/local_chat_detail_service.dart

@@ -25,7 +25,10 @@ class LocalChatDetailService with ChangeNotifier implements ChatDetailService {
   late StreamSubscription? _subscription;
 
   @override
-  Future<void> fetchMoreMessage(int pageSize, String chatId) async {
+  Future<void> fetchMoreMessage(
+    int pageSize,
+    String chatId,
+  ) async {
     await chatOverviewService.getChatById(chatId).then((value) {
       _cumulativeMessages.clear();
       _cumulativeMessages.addAll(value.messages!);
@@ -39,7 +42,9 @@ class LocalChatDetailService with ChangeNotifier implements ChatDetailService {
   List<ChatMessageModel> getMessages() => _cumulativeMessages;
 
   @override
-  Stream<List<ChatMessageModel>> getMessagesStream(String chatId) {
+  Stream<List<ChatMessageModel>> getMessagesStream(
+    String chatId,
+  ) {
     _controller.onListen = () async {
       _subscription =
           chatOverviewService.getChatById(chatId).asStream().listen((event) {

packages/flutter_chat_local/lib/service/local_chat_user_service.dart

@@ -16,10 +16,17 @@ class LocalChatUserService implements ChatUserService {
       lastName: 'Doe',
       imageUrl: 'https://picsum.photos/200/300',
     ),
+    ChatUserModel(
+      id: '3',
+      firstName: 'ico',
+      lastName: 'nica',
+      imageUrl: 'https://picsum.photos/100/200',
+    ),
   ];
 
   @override
-  Future<List<ChatUserModel>> getAllUsers() => Future.value(users);
+  Future<List<ChatUserModel>> getAllUsers() =>
+      Future.value(users.where((element) => element.id != '3').toList());
 
   @override
   Future<ChatUserModel?> getCurrentUser() => Future.value(ChatUserModel());

packages/flutter_chat_local/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_chat_local
 description: "A new Flutter package project."
-version: 1.2.1
+version: 1.3.1
 publish_to: none
 homepage:
 
@@ -15,7 +15,7 @@ dependencies:
     git:
       url: https://github.com/Iconica-Development/flutter_chat
       path: packages/flutter_chat_interface
-      ref: 1.2.1
+      ref: 1.3.1
 
 dev_dependencies:
   flutter_test:

packages/flutter_chat_view/lib/src/components/chat_bottom.dart

@@ -13,6 +13,7 @@ class ChatBottom extends StatefulWidget {
     required this.translations,
     this.onPressSelectImage,
     this.iconColor,
+    this.iconDisabledColor,
     super.key,
   });
 
@@ -33,6 +34,7 @@ class ChatBottom extends StatefulWidget {
 
   /// The color of the icons.
   final Color? iconColor;
+  final Color? iconDisabledColor;
 
   @override
   State<ChatBottom> createState() => _ChatBottomState();
@@ -40,48 +42,61 @@ class ChatBottom extends StatefulWidget {
 
 class _ChatBottomState extends State<ChatBottom> {
   final TextEditingController _textEditingController = TextEditingController();
-
+  bool _isTyping = false;
   @override
-  Widget build(BuildContext context) => Padding(
+  Widget build(BuildContext context) {
-        padding: const EdgeInsets.symmetric(
+    _textEditingController.addListener(() {
-          horizontal: 14,
+      if (_textEditingController.text.isEmpty) {
-          vertical: 17,
+        setState(() {
-        ),
+          _isTyping = false;
-        child: SizedBox(
+        });
-          height: 45,
+      } else {
-          child: widget.messageInputBuilder(
+        setState(() {
-            _textEditingController,
+          _isTyping = true;
-            Padding(
+        });
-              padding: const EdgeInsets.only(right: 15.0),
+      }
-              child: Row(
+    });
-                mainAxisSize: MainAxisSize.min,
+    return Padding(
-                children: [
+      padding: const EdgeInsets.symmetric(
-                  IconButton(
+        horizontal: 12,
-                    onPressed: widget.onPressSelectImage,
+        vertical: 16,
-                    icon: Icon(
+      ),
-                      Icons.image,
+      child: SizedBox(
-                      color: widget.iconColor,
+        height: 45,
-                    ),
+        child: widget.messageInputBuilder(
-                  ),
+          _textEditingController,
-                  IconButton(
+          Row(
-                    onPressed: () async {
+            mainAxisSize: MainAxisSize.min,
-                      var value = _textEditingController.text;
+            children: [
-
+              IconButton(
-                      if (value.isNotEmpty) {
+                onPressed: widget.onPressSelectImage,
-                        await widget.onMessageSubmit(value);
+                icon: Icon(
-                        _textEditingController.clear();
+                  Icons.image,
-                      }
+                  color: widget.iconColor,
-                    },
+                ),
-                    icon: Icon(
-                      Icons.send,
-                      color: widget.iconColor,
-                    ),
-                  ),
-                ],
               ),
-            ),
+              IconButton(
-            widget.translations,
+                disabledColor: widget.iconDisabledColor,
+                color: widget.iconColor,
+                onPressed: _isTyping
+                    ? () async {
+                        var value = _textEditingController.text;
+
+                        if (value.isNotEmpty) {
+                          await widget.onMessageSubmit(value);
+                          _textEditingController.clear();
+                        }
+                      }
+                    : null,
+                icon: const Icon(
+                  Icons.send,
+                ),
+              ),
+            ],
           ),
+          widget.translations,
         ),
-      );
+      ),
+    );
+  }
 }

packages/flutter_chat_view/lib/src/components/chat_detail_row.dart

@@ -13,6 +13,8 @@ class ChatDetailRow extends StatefulWidget {
     required this.translations,
     required this.message,
     required this.userAvatarBuilder,
+    required this.onPressUserProfile,
+    this.usernameBuilder,
     this.previousMessage,
     this.showTime = false,
     super.key,
@@ -29,6 +31,8 @@ class ChatDetailRow extends StatefulWidget {
 
   /// The previous chat message model.
   final ChatMessageModel? previousMessage;
+  final Function(String? userId) onPressUserProfile;
+  final Widget Function(String userFullName)? usernameBuilder;
 
   /// Flag indicating whether to show the time.
   final bool showTime;
@@ -46,6 +50,10 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
         widget.message.timestamp.day != widget.previousMessage?.timestamp.day;
     var isSameSender = widget.previousMessage == null ||
         widget.previousMessage?.sender.id != widget.message.sender.id;
+    var isSameMinute = widget.previousMessage != null &&
+        widget.message.timestamp.minute ==
+            widget.previousMessage?.timestamp.minute;
+    var hasHeader = isNewDate || isSameSender;
 
     return Padding(
       padding: EdgeInsets.only(
@@ -55,17 +63,22 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           if (isNewDate || isSameSender) ...[
-            Padding(
+            GestureDetector(
-              padding: const EdgeInsets.only(left: 10.0),
+              onTap: () => widget.onPressUserProfile(
-              child: widget.message.sender.imageUrl != null &&
+                widget.message.sender.id,
-                      widget.message.sender.imageUrl!.isNotEmpty
+              ),
-                  ? ChatImage(
+              child: Padding(
-                      image: widget.message.sender.imageUrl!,
+                padding: const EdgeInsets.only(left: 10.0),
-                    )
+                child: widget.message.sender.imageUrl != null &&
-                  : widget.userAvatarBuilder(
+                        widget.message.sender.imageUrl!.isNotEmpty
-                      widget.message.sender,
+                    ? ChatImage(
-                      30,
+                        image: widget.message.sender.imageUrl!,
-                    ),
+                      )
+                    : widget.userAvatarBuilder(
+                        widget.message.sender,
+                        40,
+                      ),
+              ),
             ),
           ] else ...[
             const SizedBox(
@@ -83,16 +96,23 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
                     Row(
                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       children: [
-                        Text(
+                        if (widget.usernameBuilder != null)
-                          widget.message.sender.fullName?.toUpperCase() ??
+                          widget.usernameBuilder!(
-                              widget.translations.anonymousUser,
+                            widget.message.sender.fullName ?? '',
-                          style: TextStyle(
+                          )
-                            fontSize: 14,
+                        else
-                            fontWeight: FontWeight.w500,
+                          Text(
-                            color:
+                            widget.message.sender.fullName?.toUpperCase() ??
-                                Theme.of(context).textTheme.labelMedium?.color,
+                                widget.translations.anonymousUser,
+                            style: TextStyle(
+                              fontSize: 14,
+                              fontWeight: FontWeight.w500,
+                              color: Theme.of(context)
+                                  .textTheme
+                                  .labelMedium
+                                  ?.color,
+                            ),
                           ),
-                        ),
                         Padding(
                           padding: const EdgeInsets.only(top: 5.0),
                           child: Text(
@@ -111,35 +131,41 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
                   Padding(
                     padding: const EdgeInsets.only(top: 3.0),
                     child: widget.message is ChatTextMessageModel
-                        ? RichText(
+                        ? Row(
-                            text: TextSpan(
+                            crossAxisAlignment: CrossAxisAlignment.end,
-                              text:
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                            children: [
+                              Flexible(
+                                child: Text(
                                   (widget.message as ChatTextMessageModel).text,
-                              style: TextStyle(
+                                  style: TextStyle(
-                                fontSize: 16,
+                                    fontSize: 16,
-                                color: Theme.of(context)
+                                    color: Theme.of(context)
-                                    .textTheme
+                                        .textTheme
-                                    .labelMedium
+                                        .labelMedium
-                                    ?.color,
+                                        ?.color,
+                                  ),
+                                ),
                               ),
-                              children: <TextSpan>[
+                              if (widget.showTime &&
-                                if (widget.showTime)
+                                  !isSameMinute &&
-                                  TextSpan(
+                                  !isNewDate &&
-                                    text: " ${_dateFormatter.format(
+                                  !hasHeader)
-                                          date: widget.message.timestamp,
+                                Text(
-                                          showFullDate: true,
+                                  _dateFormatter
-                                        ).split(' ').last}",
+                                      .format(
-                                    style: const TextStyle(
+                                        date: widget.message.timestamp,
-                                      fontSize: 12,
+                                        showFullDate: true,
-                                      color: Color(0xFFBBBBBB),
+                                      )
-                                    ),
+                                      .split(' ')
-                                  )
+                                      .last,
-                                else
+                                  style: const TextStyle(
-                                  const TextSpan(),
+                                    fontSize: 12,
-                              ],
+                                    color: Color(0xFFBBBBBB),
-                            ),
+                                  ),
-                            overflow: TextOverflow.ellipsis,
+                                  textAlign: TextAlign.end,
-                            maxLines: 999,
+                                ),
+                            ],
                           )
                         : CachedNetworkImage(
                             imageUrl: (widget.message as ChatImageMessageModel)

packages/flutter_chat_view/lib/src/components/chat_image.dart

@@ -35,6 +35,7 @@ class ChatImage extends StatelessWidget {
         height: size,
         child: image.isNotEmpty
             ? CachedNetworkImage(
+                fadeInDuration: Duration.zero,
                 imageUrl: image,
                 fit: BoxFit.cover,
               )

packages/flutter_chat_view/lib/src/config/chat_options.dart

@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_chat_view/flutter_chat_view.dart';
 import 'package:flutter_chat_view/src/components/chat_image.dart';
 import 'package:flutter_image_picker/flutter_image_picker.dart';
+import 'package:flutter_profile/flutter_profile.dart';
 
 class ChatOptions {
   const ChatOptions({
@@ -69,6 +70,7 @@ Widget _createMessageInput(
       controller: textEditingController,
       decoration: InputDecoration(
         hintText: translations.messagePlaceholder,
+       
         suffixIcon: suffixIcon,
       ),
     );
@@ -114,8 +116,12 @@ Widget _createUserAvatar(
   ChatUserModel user,
   double size,
 ) =>
-    ChatImage(
+    Avatar(
-      image: user.imageUrl ?? '',
+      user: User(
+        firstName: user.firstName,
+        lastName: user.lastName,
+        imageUrl: user.imageUrl,
+      ),
       size: size,
     );
 Widget _createGroupAvatar(

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

@@ -6,7 +6,6 @@ import 'dart:async';
 import 'dart:typed_data';
 
 import 'package:flutter/material.dart';
-import 'package:flutter/rendering.dart';
 import 'package:flutter_chat_view/flutter_chat_view.dart';
 import 'package:flutter_chat_view/src/components/chat_bottom.dart';
 import 'package:flutter_chat_view/src/components/chat_detail_row.dart';
@@ -21,9 +20,15 @@ class ChatDetailScreen extends StatefulWidget {
     required this.service,
     required this.pageSize,
     required this.chatId,
+    required this.textfieldBottomPadding,
+    required this.onPressChatTitle,
+    required this.onPressUserProfile,
+    this.chatTitleBuilder,
+    this.usernameBuilder,
+    this.loadingWidgetBuilder,
     this.translations = const ChatTranslations(),
-    this.onPressChatTitle,
     this.iconColor,
+    this.iconDisabledColor,
     this.showTime = false,
     super.key,
   });
@@ -39,13 +44,20 @@ class ChatDetailScreen extends StatefulWidget {
   // called at the start of the screen to set the chat to read
   // or when a new message is received
   final Future<void> Function(ChatModel chat) onReadChat;
-  final Function(BuildContext context, ChatModel chat)? onPressChatTitle;
+  final Function(BuildContext context, ChatModel chat) onPressChatTitle;
 
   /// The color of the icon buttons in the chat bottom.
   final Color? iconColor;
   final bool showTime;
   final ChatService service;
   final int pageSize;
+  final double textfieldBottomPadding;
+  final Color? iconDisabledColor;
+  final Function(String? userId) onPressUserProfile;
+  // ignore: avoid_positional_boolean_parameters
+  final Widget? Function(BuildContext context)? loadingWidgetBuilder;
+  final Widget Function(String userFullName)? usernameBuilder;
+  final Widget Function(String chatTitle)? chatTitleBuilder;
 
   @override
   State<ChatDetailScreen> createState() => _ChatDetailScreenState();
@@ -71,7 +83,7 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
       chat =
           await widget.service.chatOverviewService.getChatById(widget.chatId);
 
-      if (detailRows.isEmpty) {
+      if (detailRows.isEmpty && context.mounted) {
         await widget.service.chatDetailService.fetchMoreMessage(
           widget.pageSize,
           chat!.id!,
@@ -99,6 +111,8 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
           translations: widget.translations,
           userAvatarBuilder: widget.options.userAvatarBuilder,
           previousMessage: previousMessage,
+          onPressUserProfile: widget.onPressUserProfile,
+          usernameBuilder: widget.usernameBuilder,
         ),
       );
       previousMessage = message;
@@ -132,14 +146,13 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
           ),
         ).then(
           (image) async {
+            if (image == null) return;
             var messenger = ScaffoldMessenger.of(context)
               ..showSnackBar(
                 getImageLoadingSnackbar(widget.translations),
               )
               ..activate();
-            if (image != null) {
+            await widget.onUploadImage(image);
-              await widget.onUploadImage(image);
-            }
             Future.delayed(const Duration(seconds: 1), () {
               messenger.hideCurrentSnackBar();
             });
@@ -155,7 +168,7 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
           appBar: AppBar(
             centerTitle: true,
             title: GestureDetector(
-              onTap: () => widget.onPressChatTitle?.call(context, chatModel!),
+              onTap: () => widget.onPressChatTitle.call(context, chatModel!),
               child: Row(
                 mainAxisSize: MainAxisSize.min,
                 children: chat == null
@@ -177,77 +190,100 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
                         Expanded(
                           child: Padding(
                             padding: const EdgeInsets.only(left: 15.5),
-                            child: Text(
+                            child: widget.chatTitleBuilder != null
-                              (chatModel is GroupChatModel)
+                                ? widget.chatTitleBuilder!.call(
-                                  ? chatModel.title
+                                    (chatModel is GroupChatModel)
-                                  : (chatModel is PersonalChatModel)
+                                        ? chatModel.title
-                                      ? chatModel.user.fullName ??
+                                        : (chatModel is PersonalChatModel)
-                                          widget.translations.anonymousUser
+                                            ? chatModel.user.fullName ??
-                                      : '',
+                                                widget
-                              style: const TextStyle(fontSize: 18),
+                                                    .translations.anonymousUser
-                            ),
+                                            : '',
+                                  )
+                                : Text(
+                                    (chatModel is GroupChatModel)
+                                        ? chatModel.title
+                                        : (chatModel is PersonalChatModel)
+                                            ? chatModel.user.fullName ??
+                                                widget
+                                                    .translations.anonymousUser
+                                            : '',
+                                    style: const TextStyle(fontSize: 18),
+                                  ),
                           ),
                         ),
                       ],
               ),
             ),
           ),
-          body: Column(
+          body: Stack(
             children: [
-              Expanded(
+              Column(
-                child: Listener(
+                children: [
-                  onPointerMove: (event) async {
+                  Expanded(
-                    var isTop = controller.position.pixels ==
+                    child: Listener(
-                        controller.position.maxScrollExtent;
+                      onPointerMove: (event) async {
-
+                        if (!showIndicator &&
-                    if (!showIndicator &&
+                            controller.offset >=
-                        !isTop &&
+                                controller.position.maxScrollExtent &&
-                        controller.position.userScrollDirection ==
+                            !controller.position.outOfRange) {
-                            ScrollDirection.reverse) {
-                      setState(() {
-                        showIndicator = true;
-                      });
-                      await widget.service.chatDetailService
-                          .fetchMoreMessage(widget.pageSize, widget.chatId);
-                      Future.delayed(const Duration(seconds: 2), () {
-                        if (mounted) {
                           setState(() {
-                            showIndicator = false;
+                            showIndicator = true;
+                          });
+                          await widget.service.chatDetailService
+                              .fetchMoreMessage(
+                            widget.pageSize,
+                            widget.chatId,
+                          );
+                          Future.delayed(const Duration(seconds: 2), () {
+                            if (mounted) {
+                              setState(() {
+                                showIndicator = false;
+                              });
+                            }
                           });
                         }
-                      });
+                      },
-                    }
+                      child: ListView(
-                  },
+                        shrinkWrap: true,
-                  child: ListView(
+                        physics: const AlwaysScrollableScrollPhysics(),
-                    shrinkWrap: true,
+                        controller: controller,
-                    physics: const AlwaysScrollableScrollPhysics(),
+                        reverse: true,
-                    controller: controller,
+                        padding: const EdgeInsets.only(top: 24.0),
-                    reverse: true,
+                        children: [
-                    padding: const EdgeInsets.only(top: 24.0),
+                          ...detailRows,
-                    children: [
+                        ],
-                      ...detailRows,
+                      ),
-                      if (showIndicator) ...[
+                    ),
-                        const SizedBox(
+                  ),
+                  if (chatModel != null)
+                    ChatBottom(
+                      chat: chatModel,
+                      messageInputBuilder: widget.options.messageInputBuilder,
+                      onPressSelectImage: onPressSelectImage,
+                      onMessageSubmit: widget.onMessageSubmit,
+                      translations: widget.translations,
+                      iconColor: widget.iconColor,
+                      iconDisabledColor: widget.iconDisabledColor,
+                    ),
+                  SizedBox(
+                    height: widget.textfieldBottomPadding,
+                  ),
+                ],
+              ),
+              if (showIndicator)
+                widget.loadingWidgetBuilder?.call(context) ??
+                    const Column(
+                      children: [
+                        SizedBox(
                           height: 10,
                         ),
-                        const Center(child: CircularProgressIndicator()),
+                        Center(child: CircularProgressIndicator()),
-                        const SizedBox(
+                        SizedBox(
                           height: 10,
                         ),
                       ],
-                    ],
+                    ),
-                  ),
-                ),
-              ),
-              if (chatModel != null)
-                ChatBottom(
-                  chat: chatModel,
-                  messageInputBuilder: widget.options.messageInputBuilder,
-                  onPressSelectImage: onPressSelectImage,
-                  onMessageSubmit: widget.onMessageSubmit,
-                  translations: widget.translations,
-                  iconColor: widget.iconColor,
-                ),
             ],
           ),
         );

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

@@ -17,6 +17,7 @@ class ChatScreen extends StatefulWidget {
     required this.onPressChat,
     required this.onDeleteChat,
     required this.service,
+    this.unreadMessageTextStyle,
     this.onNoChats,
     this.deleteChatDialog,
     this.translations = const ChatTranslations(),
@@ -50,6 +51,7 @@ class ChatScreen extends StatefulWidget {
 
   /// Disables the swipe to dismiss feature for chats that are not deletable.
   final bool disableDismissForPermanentChats;
+  final TextStyle? unreadMessageTextStyle;
 
   @override
   State<ChatScreen> createState() => _ChatScreenState();
@@ -86,10 +88,11 @@ class _ChatScreenState extends State<ChatScreen> {
                 padding: const EdgeInsets.only(right: 22.0),
                 child: Text(
                   '${snapshot.data ?? 0} ${translations.chatsUnread}',
-                  style: const TextStyle(
+                  style: widget.unreadMessageTextStyle ??
-                    color: Color(0xFFBBBBBB),
+                      const TextStyle(
-                    fontSize: 14,
+                        color: Color(0xFFBBBBBB),
-                  ),
+                        fontSize: 14,
+                      ),
                 ),
               ),
             ),

packages/flutter_chat_view/lib/src/screens/new_chat_screen.dart

@@ -82,6 +82,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
         onPressed: () {
           setState(() {
             _isSearching = !_isSearching;
+            query = '';
           });
 
           if (_isSearching) {
@@ -114,12 +115,15 @@ class _NewChatScreenState extends State<NewChatScreen> {
         var user = filteredUsers[index];
         return GestureDetector(
           child: widget.options.chatRowContainerBuilder(
-            ChatRow(
+            Container(
-              avatar: widget.options.userAvatarBuilder(
+              color: Colors.transparent,
-                user,
+              child: ChatRow(
-                40.0,
+                avatar: widget.options.userAvatarBuilder(
+                  user,
+                  40.0,
+                ),
+                title: user.fullName ?? widget.translations.anonymousUser,
               ),
-              title: user.fullName ?? widget.translations.anonymousUser,
             ),
           ),
           onTap: () async {

packages/flutter_chat_view/pubspec.yaml

@@ -4,7 +4,7 @@
 
 name: flutter_chat_view
 description: A standard flutter package.
-version: 1.2.1
+version: 1.3.1
 
 publish_to: none
 
@@ -20,7 +20,7 @@ dependencies:
     git:
       url: https://github.com/Iconica-Development/flutter_chat
       path: packages/flutter_chat_interface
-      ref: 1.2.1
+      ref: 1.3.1
   cached_network_image: ^3.2.2
   flutter_image_picker:
     git: