refactor/match the figma

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 1.4.1
+- Made UI changes to match the Figma design
+
 ## 1.4.0
 - Add way to create group chats
 - Update flutter_profile to 1.3.0

packages/flutter_chat/example/lib/main.dart

@@ -24,7 +24,12 @@ class Home extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Center(
-      child: chatNavigatorUserStory(context),
-    );
+        child: chatNavigatorUserStory(context,
+            configuration: ChatUserStoryConfiguration(
+                chatService: LocalChatService(),
+                chatOptionsBuilder: (ctx) => ChatOptions(
+                      noChatsPlaceholderBuilder: (translations) =>
+                          Text(translations.noUsersFound),
+                    ))));
   }
 }

packages/flutter_chat/pubspec.yaml

@@ -4,7 +4,7 @@
 
 name: flutter_chat
 description: A new Flutter package project.
-version: 1.4.0
+version: 1.4.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.4.0
+      ref: 1.4.1
   flutter_chat_interface:
     git:
       url: https://github.com/Iconica-Development/flutter_chat
       path: packages/flutter_chat_interface
-      ref: 1.4.0
+      ref: 1.4.1
   flutter_chat_local:
     git:
       url: https://github.com/Iconica-Development/flutter_chat
       path: packages/flutter_chat_local
-      ref: 1.4.0
+      ref: 1.4.1
   uuid: ^4.3.3
 
 dev_dependencies:

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

@@ -102,11 +102,11 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
                           )
                         else
                           Text(
-                            widget.message.sender.fullName?.toUpperCase() ??
+                            widget.message.sender.fullName ??
                                 widget.translations.anonymousUser,
                             style: TextStyle(
-                              fontSize: 14,
-                              fontWeight: FontWeight.w500,
+                              fontSize: 16,
+                              fontWeight: FontWeight.w800,
                               color: Theme.of(context)
                                   .textTheme
                                   .labelMedium
@@ -121,7 +121,8 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
                               showFullDate: true,
                             ),
                             style: const TextStyle(
-                              fontSize: 12,
+                              fontSize: 16,
+                              fontWeight: FontWeight.w300,
                               color: Color(0xFFBBBBBB),
                             ),
                           ),

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

@@ -31,15 +31,15 @@ class ChatRow extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) => Row(
-        crossAxisAlignment: CrossAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Padding(
             padding: const EdgeInsets.only(left: 10.0),
             child: avatar,
           ),
           Expanded(
             child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 22.0),
+              padding: const EdgeInsets.only(left: 16.0),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
@@ -48,10 +48,10 @@ class ChatRow extends StatelessWidget {
                     maxLines: 1,
                     overflow: TextOverflow.ellipsis,
                     style: TextStyle(
-                      fontSize: 18,
+                      fontSize: 16,
                       fontWeight: unreadMessages > 0
-                          ? FontWeight.w600
-                          : FontWeight.w400,
+                          ? FontWeight.w900
+                          : FontWeight.w500,
                     ),
                   ),
                   if (subTitle != null)
@@ -62,11 +62,11 @@ class ChatRow extends StatelessWidget {
                         style: TextStyle(
                           fontSize: 16,
                           fontWeight: unreadMessages > 0
-                              ? FontWeight.w600
-                              : FontWeight.w400,
+                              ? FontWeight.w500
+                              : FontWeight.w300,
                         ),
                         overflow: TextOverflow.ellipsis,
-                        maxLines: 1,
+                        maxLines: 2,
                       ),
                     ),
                 ],
@@ -77,29 +77,30 @@ class ChatRow extends StatelessWidget {
             mainAxisAlignment: MainAxisAlignment.start,
             crossAxisAlignment: CrossAxisAlignment.end,
             children: [
-              Text(
-                lastUsed ?? '',
-                style: const TextStyle(
-                  color: Color(0xFFBBBBBB),
-                  fontSize: 14,
-                ),
-              ),
-              if (unreadMessages > 0) ...[
+              if (lastUsed != null) // Check if lastUsed is not null
                 Padding(
-                  padding: const EdgeInsets.only(top: 4.0),
-                  child: Container(
-                    width: 20,
-                    height: 20,
-                    decoration: BoxDecoration(
-                      color: Theme.of(context).colorScheme.primary,
-                      shape: BoxShape.circle,
+                  padding: const EdgeInsets.only(bottom: 4.0),
+                  child: Text(
+                    lastUsed!,
+                    style: const TextStyle(
+                      color: Color(0xFFBBBBBB),
+                      fontSize: 14,
                     ),
-                    child: Center(
-                      child: Text(
-                        unreadMessages.toString(),
-                        style: const TextStyle(
-                          fontSize: 14,
-                        ),
+                  ),
+                ),
+              if (unreadMessages > 0) ...[
+                Container(
+                  width: 20,
+                  height: 20,
+                  decoration: BoxDecoration(
+                    color: Theme.of(context).colorScheme.primary,
+                    shape: BoxShape.circle,
+                  ),
+                  child: Center(
+                    child: Text(
+                      unreadMessages.toString(),
+                      style: const TextStyle(
+                        fontSize: 14,
                       ),
                     ),
                   ),

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

@@ -18,6 +18,7 @@ class ChatOptions {
     this.userAvatarBuilder = _createUserAvatar,
     this.groupAvatarBuilder = _createGroupAvatar,
     this.noChatsPlaceholderBuilder = _createNoChatsPlaceholder,
+    this.noUsersPlaceholderBuilder = _createNoUsersPlaceholder,
   });
 
   /// Builder function for the new chat button.
@@ -43,6 +44,9 @@ class ChatOptions {
 
   /// Builder function for the placeholder shown when no chats are available.
   final NoChatsPlaceholderBuilder noChatsPlaceholderBuilder;
+
+  /// Builder function for the placeholder shown when no users are available.
+  final NoUsersPlaceholderBuilder noUsersPlaceholderBuilder;
 }
 
 Widget _createNewChatButton(
@@ -51,16 +55,23 @@ Widget _createNewChatButton(
   ChatTranslations translations,
 ) =>
     Padding(
-      padding: const EdgeInsets.all(24.0),
+      padding: const EdgeInsets.fromLTRB(5, 24, 5, 24),
       child: ElevatedButton(
         style: ElevatedButton.styleFrom(
-          backgroundColor: Colors.black,
-          minimumSize: const Size.fromHeight(50),
+          backgroundColor: const Color.fromRGBO(113, 198, 209, 1),
+          fixedSize: const Size(254, 44),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(56),
+          ),
         ),
         onPressed: onPressed,
         child: Text(
           translations.newChatButton,
-          style: const TextStyle(color: Colors.white),
+          style: const TextStyle(
+            color: Colors.white,
+            fontWeight: FontWeight.w800,
+            fontSize: 18,
+          ),
         ),
       ),
     );
@@ -112,7 +123,7 @@ Widget _createChatRowContainer(
 ) =>
     Padding(
       padding: const EdgeInsets.symmetric(
-        vertical: 15.0,
+        vertical: 12.0,
         horizontal: 10.0,
       ),
       child: chatRow,
@@ -126,9 +137,17 @@ Widget _createImagePickerContainer(
       padding: const EdgeInsets.all(8.0),
       color: Colors.white,
       child: ImagePicker(
+        imagePickerTheme: ImagePickerTheme(
+          title: translations.imagePickerTitle,
+          titleTextSize: 16,
+          titleAlignment: TextAlign.center,
+          iconSize: 60.0,
+          makePhotoText: translations.takePicture,
+          selectImageText: translations.uploadFile,
+        ),
         customButton: ElevatedButton(
           style: ElevatedButton.styleFrom(
-            backgroundColor: Colors.black,
+            backgroundColor: const Color.fromRGBO(113, 198, 209, 1),
           ),
           onPressed: onClose,
           child: Text(
@@ -172,6 +191,20 @@ Widget _createGroupAvatar(
 
 Widget _createNoChatsPlaceholder(
   ChatTranslations translations,
+) =>
+    Center(
+      child: Text(
+        translations.noChatsFound,
+        textAlign: TextAlign.center,
+        style: const TextStyle(
+          color: Colors.white,
+          fontSize: 18,
+        ),
+      ),
+    );
+
+Widget _createNoUsersPlaceholder(
+  ChatTranslations translations,
 ) =>
     Center(
       child: Text(
@@ -224,3 +257,7 @@ typedef GroupAvatarBuilder = Widget Function(
 typedef NoChatsPlaceholderBuilder = Widget Function(
   ChatTranslations translations,
 );
+
+typedef NoUsersPlaceholderBuilder = Widget Function(
+  ChatTranslations translations,
+);

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

@@ -6,24 +6,32 @@ class ChatTranslations {
   const ChatTranslations({
     this.chatsTitle = 'Chats',
     this.chatsUnread = 'unread',
-    this.newChatButton = 'Start chat',
+    this.newChatButton = 'Start a chat',
     this.newGroupChatButton = 'Start group chat',
     this.newChatTitle = 'Start chat',
     this.image = 'Image',
     this.searchPlaceholder = 'Search...',
+    this.startTyping = 'Start typing to find a user to chat with.',
     this.cancelImagePickerBtn = 'Cancel',
     this.messagePlaceholder = 'Write your message here...',
+    this.writeMessageToStartChat = 'Write a message to start the chat.',
+    this.writeFirstMessageInGroupChat =
+        'Write the first message in this group chat.',
     this.imageUploading = 'Image is uploading...',
     this.deleteChatButton = 'Delete',
     this.deleteChatModalTitle = 'Delete chat',
     this.deleteChatModalDescription =
         'Are you sure you want to delete this chat?',
     this.deleteChatModalCancel = 'Cancel',
     this.deleteChatModalConfirm = 'Delete',
-    this.noUsersFound = 'No users found',
+    this.noUsersFound = 'No users were found to start a chat with.',
+    this.noChatsFound = 'Click on \'Start a chat\' to create a new chat.',
     this.anonymousUser = 'Anonymous user',
     this.chatCantBeDeleted = 'This chat can\'t be deleted',
     this.chatProfileUsers = 'Users:',
+    this.imagePickerTitle = 'Do you want to upload a file or take a picture?',
+    this.uploadFile = 'UPLOAD FILE',
+    this.takePicture = 'TAKE PICTURE',
   });
 
   final String chatsTitle;
@@ -34,16 +42,23 @@ class ChatTranslations {
   final String deleteChatButton;
   final String image;
   final String searchPlaceholder;
+  final String startTyping;
   final String cancelImagePickerBtn;
   final String messagePlaceholder;
+  final String writeMessageToStartChat;
+  final String writeFirstMessageInGroupChat;
   final String imageUploading;
   final String deleteChatModalTitle;
   final String deleteChatModalDescription;
   final String deleteChatModalCancel;
   final String deleteChatModalConfirm;
   final String noUsersFound;
+  final String noChatsFound;
   final String chatCantBeDeleted;
   final String chatProfileUsers;
+  final String imagePickerTitle;
+  final String uploadFile;
+  final String takePicture;
 
   /// Shown when the user has no name
   final String anonymousUser;