[BUG] Some button of app bar in email view, thread view and composer view quite hard to click

lib/features/composer/presentation/composer_view.dart

@@ -52,7 +52,7 @@ class ComposerView extends GetWidget<ComposerController> {
 
   Widget _buildTopBar(BuildContext context) {
     return Padding(
-      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
       child: Obx(() => (TopBarComposerWidgetBuilder(imagePaths, controller.isEnableEmailSendButton.value)
           ..addSendEmailActionClick(() => controller.sendEmailAction(context))
           ..addAttachFileActionClick(() => controller.openPickAttachmentMenu(context, _pickAttachmentsActionTiles(context)))

lib/features/composer/presentation/widgets/top_bar_composer_widget_builder.dart

@@ -2,6 +2,7 @@
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 
 typedef OnBackActionClick = void Function();
 typedef OnSendEmailActionClick = void Function();
@@ -34,7 +35,6 @@ class TopBarComposerWidgetBuilder {
       key: Key('top_bar_composer_widget'),
       alignment: Alignment.center,
       padding: EdgeInsets.zero,
-      color: Colors.white,
       child: MediaQuery(
         data: MediaQueryData(padding: EdgeInsets.zero),
         child: Row(
@@ -53,14 +53,15 @@ class TopBarComposerWidgetBuilder {
   }
 
   Widget _buildBackButton() {
-    return ButtonBuilder(_imagePaths.icComposerClose)
+    return IconButton(
-      .padding(5)
+      color: AppColor.baseTextColor,
-      .size(30)
+      icon: SvgPicture.asset(_imagePaths.icComposerClose, color: AppColor.baseTextColor, fit: BoxFit.fill),
-      .onPressActionClick(() {
+      onPressed: () {
         if (_onBackActionClick != null) {
           _onBackActionClick!();
-        }})
+        }
-      .build();
+      }
+    );
   }
 
   Widget _buildListOptionButton() {
@@ -68,26 +69,41 @@ class TopBarComposerWidgetBuilder {
       mainAxisAlignment: MainAxisAlignment.start,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        ButtonBuilder(_imagePaths.icComposerFileShare).key(Key('button_file_share')).build(),
+        IconButton(
-        SizedBox(width: 2),
+          key: Key('button_file_share'),
-        ButtonBuilder(_imagePaths.icShare)
+          color: AppColor.baseTextColor,
-          .key(Key('button_attachment'))
+          icon: SvgPicture.asset(_imagePaths.icComposerFileShare, color: AppColor.baseTextColor, fit: BoxFit.fill),
-          .onPressActionClick(() {
+          onPressed: () {}
-            if (_onAttachFileActionClick != null) {
+        ),
-              _onAttachFileActionClick!();
+        IconButton(
-            }})
+            key: Key('button_attachment'),
-          .build(),
+            color: AppColor.baseTextColor,
-        SizedBox(width: 2),
+            icon: SvgPicture.asset(_imagePaths.icShare, color: AppColor.baseTextColor, fit: BoxFit.fill),
-        ButtonBuilder(_imagePaths.icComposerSend)
+            onPressed: () {
-          .key(Key('button_send_email'))
+              if (_onAttachFileActionClick != null) {
-          .color(_isEnableEmailSendButton ? AppColor.enableSendEmailButtonColor : AppColor.disableSendEmailButtonColor)
+                _onAttachFileActionClick!();
-          .onPressActionClick(() {
+              }
-            if (_onSendEmailActionClick != null && _isEnableEmailSendButton) {
+            }
-              _onSendEmailActionClick!();
+        ),
-            }})
+        IconButton(
-          .build(),
+            key: Key('button_send_email'),
-        SizedBox(width: 2),
+            color: _isEnableEmailSendButton ? AppColor.enableSendEmailButtonColor : AppColor.disableSendEmailButtonColor,
-        ButtonBuilder(_imagePaths.icComposerMenu).key(Key('button_menu_composer')).build(),
+            icon: SvgPicture.asset(
+                _imagePaths.icComposerSend,
+                color: _isEnableEmailSendButton ? AppColor.enableSendEmailButtonColor : AppColor.disableSendEmailButtonColor,
+                fit: BoxFit.fill),
+            onPressed: () {
+              if (_onSendEmailActionClick != null) {
+                _onSendEmailActionClick!();
+              }
+            }
+        ),
+        IconButton(
+          key: Key('button_menu_composer'),
+          color: AppColor.baseTextColor,
+          icon: SvgPicture.asset(_imagePaths.icComposerMenu, color: AppColor.baseTextColor, fit: BoxFit.fill),
+          onPressed: () {}
+        )
       ]
     );
   }

lib/features/email/presentation/widgets/app_bar_mail_widget_builder.dart

@@ -2,6 +2,7 @@
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/main/routes/app_routes.dart';
@@ -50,7 +51,6 @@ class AppBarMailWidgetBuilder {
       key: Key('app_bar_messenger_widget'),
       alignment: Alignment.center,
       padding: EdgeInsets.zero,
-      color: Colors.white,
       child: MediaQuery(
         data: MediaQueryData(padding: EdgeInsets.zero),
         child: Row(
@@ -70,13 +70,15 @@ class AppBarMailWidgetBuilder {
   }
 
   Widget _buildBackButton() {
-    return ButtonBuilder(_imagePaths.icBack)
+    return IconButton(
-      .size(20)
+      color: AppColor.appColor,
-      .onPressActionClick(() {
+      icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.appColor, fit: BoxFit.fill),
+      onPressed: () {
         if (_onBackActionClick != null) {
           _onBackActionClick!();
-        }})
+        }
-      .build();
+      }
+    );
   }
 
   Widget _buildListOptionButton() {
@@ -84,33 +86,44 @@ class AppBarMailWidgetBuilder {
       mainAxisAlignment: MainAxisAlignment.start,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        ButtonBuilder(_imagePaths.icTrash).key(Key('button_move_to_trash_email')).build(),
+        IconButton(
-        SizedBox(width: 10),
+          color: AppColor.baseTextColor,
-        ButtonBuilder(_imagePaths.icEyeDisable)
+          icon: SvgPicture.asset(_imagePaths.icTrash, color: AppColor.baseTextColor, fit: BoxFit.fill),
-          .key(Key('button_mark_as_unread_email'))
+          onPressed: () {
-          .onPressActionClick(() {
+            if (_onBackActionClick != null) {
+              _onBackActionClick!();
+            }
+          }),
+        IconButton(
+          key: Key('button_mark_as_unread_email'),
+          color: AppColor.baseTextColor,
+          icon: SvgPicture.asset(_imagePaths.icEyeDisable, color: AppColor.baseTextColor, fit: BoxFit.fill),
+          onPressed: () {
             if (_onUnreadEmailActionClick != null && _presentationEmail != null && _presentationEmail!.isReadEmail()) {
               _onUnreadEmailActionClick!(_presentationEmail!);
-            }})
+            }
-          .build(),
+          }),
-        SizedBox(width: 10),
+        IconButton(
-        ButtonBuilder((_presentationEmail != null && _presentationEmail!.isFlaggedEmail())
+          key: Key('button_mark_as_star_email'),
-            ? _imagePaths.icFlagged
+          icon: SvgPicture.asset(
-            : _imagePaths.icFlag)
+            (_presentationEmail != null && _presentationEmail!.isFlaggedEmail())
-          .key(Key('button_mark_as_star_email'))
+              ? _imagePaths.icFlagged
-          .onPressActionClick(() {
+              : _imagePaths.icFlag,
+            fit: BoxFit.fill),
+          onPressed: () {
             if (_markAsStarActionClick != null && _presentationEmail != null) {
               _markAsStarActionClick!(_presentationEmail!);
-            }})
+            }
-          .build(),
+          }),
-        SizedBox(width: 10),
+        IconButton(
-        ButtonBuilder(_imagePaths.icFolder)
+          key: Key('button_move_to_mailbox_email'),
-          .key(Key('button_move_to_mailbox_email'))
+          color: AppColor.baseTextColor,
-          .onPressActionClick(() {
+          icon: SvgPicture.asset(_imagePaths.icFolder, color: AppColor.baseTextColor, fit: BoxFit.fill),
+          onPressed: () {
             if (_onMoveToMailboxActionClick != null && _presentationEmail != null) {
               _onMoveToMailboxActionClick!(_presentationEmail!);
-            }})
+            }
-          .build(),
+          }),
       ]
     );
   }

lib/features/thread/presentation/thread_view.dart

@@ -22,7 +22,7 @@ class ThreadView extends GetWidget<ThreadController> {
   Widget build(BuildContext context) {
     return Scaffold(
       resizeToAvoidBottomInset: false,
-      backgroundColor: responsiveUtils.isMobile(context) ? AppColor.bgMailboxListMail : AppColor.primaryLightColor,
+      backgroundColor: AppColor.primaryLightColor,
       body: SafeArea(
         right: false,
         left: false,
@@ -34,9 +34,20 @@ class ThreadView extends GetWidget<ThreadController> {
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               _buildAppBarThread(context),
-              _buildLoadingView(),
+              Expanded(child: Container(
-              Expanded(child: _buildListEmail(context)),
+                alignment: Alignment.center,
-              _buildLoadingViewLoadMore()
+                padding: EdgeInsets.zero,
+                color: responsiveUtils.isMobile(context) ? AppColor.bgMailboxListMail : AppColor.primaryLightColor,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    _buildLoadingView(),
+                    Expanded(child: _buildListEmail(context)),
+                    _buildLoadingViewLoadMore()
+                  ]
+                )
+              )),
             ]
           )
         )
@@ -59,19 +70,21 @@ class ThreadView extends GetWidget<ThreadController> {
   Widget _buildAppBarNormal(BuildContext context) {
     return Obx(() => Padding(
       padding: EdgeInsets.only(left: 15, right: 12),
-      child: AppBarThreadWidgetBuilder(
+      child: (AppBarThreadWidgetBuilder(
-            context,
+              context,
-            imagePaths,
+              imagePaths,
-            responsiveUtils,
+              responsiveUtils,
-            controller.mailboxDashBoardController.selectedMailbox.value,
+              controller.mailboxDashBoardController.selectedMailbox.value,
-            controller.mailboxDashBoardController.userProfile.value)
+              controller.mailboxDashBoardController.userProfile.value)
-        .onOpenListMailboxActionClick(() => controller.openMailboxLeftMenu())
+          ..onOpenUserInformationAction(() => {})
+          ..onOpenSearchMailActionClick(() => {})
+          ..onOpenListMailboxActionClick(() => controller.openMailboxLeftMenu()))
         .build()));
   }
 
   Widget _buildAppBarSelectModeActive(BuildContext context) {
     return Obx(() => Padding(
-      padding: EdgeInsets.only(left: 15, right: 12),
+      padding: EdgeInsets.only(left: 12, right: 12),
       child: (AppBarThreadSelectModeActiveBuilder(
               context,
               imagePaths,
@@ -94,7 +107,7 @@ class ThreadView extends GetWidget<ThreadController> {
       _markAsReadAction(context, listEmail),
       _markAsStarAction(context, listEmail),
       _moveToSpamAction(context, listEmail),
-      SizedBox(height: 30),
+      SizedBox(height: 20),
     ];
   }
 

lib/features/thread/presentation/widgets/app_bar_thread_select_mode_active_builder.dart

@@ -2,6 +2,7 @@
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:model/email/presentation_email.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
@@ -50,7 +51,6 @@ class AppBarThreadSelectModeActiveBuilder {
         key: Key('app_bar_thread_select_mode_active'),
         alignment: Alignment.center,
         padding: EdgeInsets.symmetric(vertical: 8),
-        color: Colors.white,
         child: MediaQuery(
             data: MediaQueryData(padding: EdgeInsets.zero),
             child: Row(
@@ -77,14 +77,15 @@ class AppBarThreadSelectModeActiveBuilder {
   }
 
   Widget _buildBackButton() {
-    return ButtonBuilder(_imagePaths.icComposerClose)
+    return IconButton(
-      .padding(5)
+      color: AppColor.baseTextColor,
-      .size(30)
+      icon: SvgPicture.asset(_imagePaths.icComposerClose, color: AppColor.baseTextColor, fit: BoxFit.fill),
-      .onPressActionClick(() {
+      onPressed: () => {
         if (_onCloseActionClick != null) {
-          _onCloseActionClick!();
+          _onCloseActionClick!()
-        }})
+        }
-      .build();
+      }
+    );
   }
 
   Widget _buildListOptionButton() {
@@ -92,29 +93,44 @@ class AppBarThreadSelectModeActiveBuilder {
         mainAxisAlignment: MainAxisAlignment.start,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
-          ButtonBuilder(_imagePaths.icTrash).key(Key('button_remove_email_selected'))
+          IconButton(
-            .onPressActionClick(() {
+            key: Key('button_remove_email_selected'),
+            color: AppColor.baseTextColor,
+            icon: SvgPicture.asset(_imagePaths.icTrash, color: AppColor.baseTextColor, fit: BoxFit.fill),
+            onPressed: () => {
               if (_onRemoveEmailActionClick != null) {
-                _onRemoveEmailActionClick!(_listEmail);
+                _onRemoveEmailActionClick!(_listEmail)
-              }})
+              }
-            .build(),
+            }),
-          SizedBox(width: 10),
+          IconButton(
-          ButtonBuilder(_imagePaths.icEyeDisable).key(Key('button_unread_email_selected'))
+            key: Key('button_unread_email_selected'),
-            .onPressActionClick(() {
+            color: AppColor.baseTextColor,
+            icon: SvgPicture.asset(_imagePaths.icEyeDisable, color: AppColor.baseTextColor, fit: BoxFit.fill),
+            onPressed: () => {
               if (_onMarkAsEmailReadActionClick != null) {
-                _onMarkAsEmailReadActionClick!(_listEmail);
+                _onMarkAsEmailReadActionClick!(_listEmail)
-              }})
+              }
-            .build(),
+            }),
-          SizedBox(width: 10),
+          GestureDetector(
-          ButtonBuilder(_imagePaths.icComposerMenu).key(Key('button_menu_select_email'))
+            key: Key('button_menu_select_email'),
-            .onPressActionClick(() {
+            onTap: () => {
-              if (_onOpenContextMenuActionClick != null) {
+              if (_onOpenContextMenuActionClick != null && _responsiveUtils.isMobile(_context)) {
-                _onOpenContextMenuActionClick!(_listEmail);
+                _onOpenContextMenuActionClick!(_listEmail)
-              }})
+              }
-            .onTapActionClick((details) {
+            },
+            child: Padding(
+              padding: EdgeInsets.all(8),
+              child: SvgPicture.asset(
+                _imagePaths.icComposerMenu,
+                color: AppColor.baseTextColor,
+                width: 24,
+                height: 24,
+                fit: BoxFit.fill),
+            ),
+            onTapDown: (detail) {
               if (_onOpenPopupMenuActionClick != null && !_responsiveUtils.isMobile(_context)) {
                 final screenSize = MediaQuery.of(_context).size;
-                final offset = details.globalPosition;
+                final offset = detail.globalPosition;
                 final position = RelativeRect.fromLTRB(
                   offset.dx,
                   offset.dy,
@@ -122,8 +138,8 @@ class AppBarThreadSelectModeActiveBuilder {
                   screenSize.height - offset.dy,
                 );
                 _onOpenPopupMenuActionClick!(_listEmail, position);
-              }})
+              }
-            .build(),
+            })
         ]
     );
   }

lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart

@@ -31,30 +31,24 @@ class AppBarThreadWidgetBuilder {
     this._userProfile,
   );
 
-  AppBarThreadWidgetBuilder onOpenUserInformationAction(
+  void onOpenUserInformationAction(
       OnOpenUserInformationActionClick onOpenUserInformationActionClick) {
     _onOpenUserInformationActionClick = onOpenUserInformationActionClick;
-    return this;
   }
 
-  AppBarThreadWidgetBuilder onOpenSearchMailActionClick(
+  void onOpenSearchMailActionClick(OnOpenSearchMailActionClick onOpenSearchMailActionClick) {
-      OnOpenSearchMailActionClick onOpenSearchMailActionClick) {
     _onOpenSearchMailActionClick = onOpenSearchMailActionClick;
-    return this;
   }
 
-  AppBarThreadWidgetBuilder onOpenListMailboxActionClick(
+  void onOpenListMailboxActionClick(OnOpenListMailboxActionClick onOpenListMailboxActionClick) {
-      OnOpenListMailboxActionClick onOpenListMailboxActionClick) {
     _onOpenListMailboxActionClick = onOpenListMailboxActionClick;
-    return this;
   }
 
   Widget build() {
     return Container(
       key: Key('app_bar_thread_widget'),
       alignment: Alignment.center,
-      padding: EdgeInsets.only(top: 8, bottom: 2),
+      padding: EdgeInsets.only(top: 8, bottom: 8),
-      color: Colors.white,
       child: MediaQuery(
         data: MediaQueryData(padding: EdgeInsets.zero),
         child: Row(
@@ -88,7 +82,8 @@ class AppBarThreadWidgetBuilder {
     return Padding(
       padding: EdgeInsets.only(left: 16),
       child: IconButton(
-        icon: SvgPicture.asset(_imagePaths.icSearch, width: 24, height: 24, fit: BoxFit.fill),
+        color: AppColor.baseTextColor,
+        icon: SvgPicture.asset(_imagePaths.icSearch, color: AppColor.baseTextColor, fit: BoxFit.fill),
         onPressed: () => {
           if (_onOpenSearchMailActionClick != null) {
             _onOpenSearchMailActionClick!()

lib/features/thread/presentation/widgets/email_tile_builder.dart

@@ -132,10 +132,14 @@ class EmailTileBuilder {
                           maxLines: 1,
                           overflow:TextOverflow.ellipsis,
                           style: TextStyle(fontSize: 12, color: AppColor.baseTextColor))),
-                      if (_presentationEmail.hasAttachment == true) ButtonBuilder(_imagePaths.icShare).padding(2).build(),
+                      if (_presentationEmail.hasAttachment == true)
-                      SizedBox(width: 2),
+                        ButtonBuilder(_imagePaths.icShare)
+                          .padding(5)
+                          .size(20)
+                          .build(),
                       ButtonBuilder(_presentationEmail.isFlaggedEmail() ? _imagePaths.icFlagged : _imagePaths.icFlag)
-                          .padding(2)
+                          .padding(5)
+                          .size(20)
                           .onPressActionClick(() {
                               if (_onMarkAsStarEmailActionClick != null) {
                                 _onMarkAsStarEmailActionClick!(_presentationEmail);