diff --git a/assets/images/ic_forward_v2.svg b/assets/images/ic_forward_v2.svg new file mode 100644 index 000000000..253fa170a --- /dev/null +++ b/assets/images/ic_forward_v2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_move_email.svg b/assets/images/ic_move_email.svg new file mode 100644 index 000000000..c1adf533b --- /dev/null +++ b/assets/images/ic_move_email.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_reply_all_v2.svg b/assets/images/ic_reply_all_v2.svg new file mode 100644 index 000000000..f1013cc0f --- /dev/null +++ b/assets/images/ic_reply_all_v2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_reply_v2.svg b/assets/images/ic_reply_v2.svg new file mode 100644 index 000000000..f37f425c3 --- /dev/null +++ b/assets/images/ic_reply_v2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_unread_email.svg b/assets/images/ic_unread_email.svg new file mode 100644 index 000000000..6a398db34 --- /dev/null +++ b/assets/images/ic_unread_email.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index 38eb3c9db..db3760671 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -67,6 +67,7 @@ extension AppColor on Color { static const colorTextButton = Color(0xFF007AFF); static const colorHintSearchBar = Color(0xFF818C99); static const colorBgSearchBar = Color(0xFFEBEDF0); + static const colorShadowBgContentEmail = Color(0x14000000); static const mapGradientColor = [ [Color(0xFF21D4FD), Color(0xFFB721FF)], diff --git a/core/lib/presentation/resources/image_paths.dart b/core/lib/presentation/resources/image_paths.dart index fd3e05d83..bd17237b8 100644 --- a/core/lib/presentation/resources/image_paths.dart +++ b/core/lib/presentation/resources/image_paths.dart @@ -61,6 +61,11 @@ class ImagePaths { String get icFlagV2 => _getImagePath('ic_flag_v2.svg'); String get icReadToast => _getImagePath('ic_read_toast.svg'); String get icUnreadToast => _getImagePath('ic_unread_toast.svg'); + String get icReplyAllV2 => _getImagePath('ic_reply_all_v2.svg'); + String get icReplyV2 => _getImagePath('ic_reply_v2.svg'); + String get icForwardV2 => _getImagePath('ic_forward_v2.svg'); + String get icMoveEmail => _getImagePath('ic_move_email.svg'); + String get icUnreadEmail => _getImagePath('ic_unread_email.svg'); String _getImagePath(String imageName) { return AssetsPaths.images + imageName; diff --git a/core/lib/presentation/utils/responsive_utils.dart b/core/lib/presentation/utils/responsive_utils.dart index 4efaa4f8e..4eeba309e 100644 --- a/core/lib/presentation/utils/responsive_utils.dart +++ b/core/lib/presentation/utils/responsive_utils.dart @@ -2,8 +2,9 @@ import 'package:flutter/widgets.dart'; class ResponsiveUtils { - static const int minDesktopWidth = 1200; + static const int minDesktopWidth = 1366; static const int minTabletWidth = 600; + static const int minTabletLargeWidth = 800; static const double _loginTextFieldWidthSmallScreen = 280.0; static const double _loginTextFieldWidthLargeScreen = 320.0; @@ -20,11 +21,15 @@ class ResponsiveUtils { double getSizeHeightScreen(BuildContext context) => MediaQuery.of(context).size.height; + double getMinSizeScreen(BuildContext context) => MediaQuery.of(context).size.shortestSide; + bool isMobile(BuildContext context) => getSizeWidthScreen(context) < minTabletWidth; - bool isTablet(BuildContext context) => getSizeWidthScreen(context) >= minTabletWidth && getSizeWidthScreen(context) < minDesktopWidth; + bool isTablet(BuildContext context) => getSizeWidthScreen(context) >= minTabletWidth && getSizeWidthScreen(context) < minTabletLargeWidth; - bool isDesktop(BuildContext context) => getSizeWidthScreen(context) >= minDesktopWidth; + bool isDesktop(BuildContext context) => getSizeWidthScreen(context) > minDesktopWidth; + + bool isTabletLarge(BuildContext context) => getMinSizeScreen(context) >= minTabletLargeWidth && getMinSizeScreen(context) <= minDesktopWidth; bool isPortrait(BuildContext context) => MediaQuery.of(context).orientation == Orientation.portrait; diff --git a/core/lib/presentation/views/responsive/responsive_widget.dart b/core/lib/presentation/views/responsive/responsive_widget.dart index 4808cc4a8..058cc462a 100644 --- a/core/lib/presentation/views/responsive/responsive_widget.dart +++ b/core/lib/presentation/views/responsive/responsive_widget.dart @@ -4,6 +4,7 @@ import 'package:flutter/material.dart'; class ResponsiveWidget extends StatelessWidget { final Widget mobile; final Widget tablet; + final Widget? tabletLarge; final Widget? desktop; final ResponsiveUtils responsiveUtils; @@ -13,6 +14,7 @@ class ResponsiveWidget extends StatelessWidget { required this.mobile, required this.tablet, this.desktop, + this.tabletLarge, required this.responsiveUtils, }) : super(key: key); @@ -23,6 +25,8 @@ class ResponsiveWidget extends StatelessWidget { return mobile; } else if (responsiveUtils.isDesktop(context)) { return desktop ?? tablet; + } else if (responsiveUtils.isTabletLarge(context)) { + return tabletLarge ?? tablet; } else if (responsiveUtils.isTablet(context)) { return tablet; } else { diff --git a/lib/features/email/presentation/email_controller.dart b/lib/features/email/presentation/email_controller.dart index 8203ff6d8..727236b55 100644 --- a/lib/features/email/presentation/email_controller.dart +++ b/lib/features/email/presentation/email_controller.dart @@ -161,7 +161,8 @@ class EmailController extends BaseController { if (success is MarkAsEmailReadSuccess && success.readActions == ReadActions.markAsUnread && Get.context != null - && !responsiveUtils.isDesktop(Get.context!)) { + && !responsiveUtils.isDesktop(Get.context!) + && !responsiveUtils.isTabletLarge(Get.context!)) { backToThreadView(); } } @@ -170,7 +171,8 @@ class EmailController extends BaseController { if (failure is MarkAsEmailReadFailure && failure.readActions == ReadActions.markAsUnread && Get.context != null - && !responsiveUtils.isDesktop(Get.context!)) { + && !responsiveUtils.isDesktop(Get.context!) + && !responsiveUtils.isTabletLarge(Get.context!)) { backToThreadView(); } } diff --git a/lib/features/email/presentation/email_view.dart b/lib/features/email/presentation/email_view.dart index f98c45850..6dfd6e49e 100644 --- a/lib/features/email/presentation/email_view.dart +++ b/lib/features/email/presentation/email_view.dart @@ -1,7 +1,6 @@ import 'dart:io'; import 'package:core/core.dart'; -import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; @@ -11,7 +10,6 @@ import 'package:tmail_ui_user/features/email/presentation/widgets/app_bar_mail_w import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_file_tile_builder.dart'; import 'package:tmail_ui_user/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart'; import 'package:tmail_ui_user/features/email/presentation/widgets/bottom_bar_mail_widget_builder.dart'; -import 'package:model/extensions/list_attachment_extension.dart'; import 'package:tmail_ui_user/features/email/presentation/widgets/email_content_item_builder.dart'; import 'package:tmail_ui_user/features/email/presentation/widgets/email_content_place_holder_loading_widget.dart'; import 'package:tmail_ui_user/features/email/presentation/widgets/sender_and_receiver_information_tile_builder.dart'; @@ -63,14 +61,18 @@ class EmailView extends GetView { Widget _buildBottomBar(BuildContext context) { return Padding( padding: EdgeInsets.only(left: 6, top: 6, right: 6, bottom: 6), - child: (BottomBarMailWidgetBuilder(context, imagePaths, responsiveUtils) + child: (BottomBarMailWidgetBuilder( + context, + imagePaths, + responsiveUtils, + emailController.mailboxDashBoardController.selectedEmail.value) ..addOnPressEmailAction((emailActionType) => emailController.pressEmailAction(emailActionType))) .build()); } Widget _buildEmailBody(BuildContext context) { return Container( - color: AppColor.bgMessenger, + color: Colors.white, margin: EdgeInsets.zero, alignment: Alignment.topCenter, child: Obx(() => emailController.mailboxDashBoardController.selectedEmail.value != null @@ -80,14 +82,17 @@ class EmailView extends GetView { margin: EdgeInsets.zero, width: double.infinity, alignment: Alignment.center, - padding: EdgeInsets.all(16), - color: AppColor.bgMessenger, + padding: EdgeInsets.only( + left: responsiveUtils.isMobile(context) ? 16 : 24, + right: responsiveUtils.isMobile(context) ? 16 : 24, + bottom: responsiveUtils.isMobile(context) ? 16 : 24, + top: responsiveUtils.isMobile(context) ? 10 : 16), + color: Colors.white, child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.max, children: [ - _buildEmailSubject(), _buildEmailMessage(context), ]) )) @@ -105,19 +110,31 @@ class EmailView extends GetView { Widget _buildEmailSubject() { return Padding( - padding: EdgeInsets.only(left: 8, top: 4, bottom: 16), + padding: EdgeInsets.only(left: 8, top: 25, bottom: 16), child: Text( '${emailController.mailboxDashBoardController.selectedEmail.value?.getEmailTitle()}', - style: TextStyle(fontSize: 18, color: AppColor.mailboxTextColor, fontWeight: FontWeight.w500) + style: TextStyle(fontSize: 22, color: AppColor.colorNameEmail, fontWeight: FontWeight.w700) )); } Widget _buildEmailMessage(BuildContext context) { return Container( - padding: EdgeInsets.only(left: 12, right: 12, top: 16, bottom: 16), + padding: EdgeInsets.only( + bottom: responsiveUtils.isMobile(context) ? 16 : 24, + left: responsiveUtils.isMobile(context) ? 16 : 24, + right: responsiveUtils.isMobile(context) ? 16 : 24, + top: 10), alignment: Alignment.center, decoration: BoxDecoration( - borderRadius: BorderRadius.circular(12), + borderRadius: BorderRadius.circular(10), + boxShadow: [ + BoxShadow( + color: AppColor.colorShadowBgContentEmail, + spreadRadius: 3, + blurRadius: 3, + offset: Offset(0, 2), // changes position of shadow + ), + ], color: Colors.white), child: Column( mainAxisAlignment: MainAxisAlignment.center, @@ -131,6 +148,10 @@ class EmailView extends GetView { emailController.emailAddressExpandMode.value) .onOpenExpandAddressReceiverActionClick(() => emailController.toggleDisplayEmailAddressAction(expandMode: ExpandMode.EXPAND)) .build()), + Padding( + padding: EdgeInsets.zero, + child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.1)), + _buildEmailSubject(), _buildAttachments(context), _buildListEmailContent(), ], diff --git a/lib/features/email/presentation/widgets/app_bar_mail_widget_builder.dart b/lib/features/email/presentation/widgets/app_bar_mail_widget_builder.dart index bce804c91..e5633bb4f 100644 --- a/lib/features/email/presentation/widgets/app_bar_mail_widget_builder.dart +++ b/lib/features/email/presentation/widgets/app_bar_mail_widget_builder.dart @@ -57,12 +57,13 @@ class AppBarMailWidgetBuilder { crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.end, children: [ - if (!_responsiveUtils.isDesktop(_context) || Get.currentRoute != AppRoutes.MAILBOX_DASHBOARD) + if ((!_responsiveUtils.isDesktop(_context) && !_responsiveUtils.isTabletLarge(_context)) + || Get.currentRoute != AppRoutes.MAILBOX_DASHBOARD) Expanded(child: Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.start, children:[_buildBackButton()])), - _buildListOptionButton(), + if (_presentationEmail != null) _buildListOptionButton(), ] ) ) @@ -94,31 +95,31 @@ class AppBarMailWidgetBuilder { // _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!); - } - }), IconButton( key: Key('button_mark_as_star_email'), icon: SvgPicture.asset( - (_presentationEmail != null && _presentationEmail!.isFlaggedEmail()) - ? _imagePaths.icFlagged - : _imagePaths.icFlag, - fit: BoxFit.fill), + (_presentationEmail != null && _presentationEmail!.isFlaggedEmail()) + ? _imagePaths.icStar + : _imagePaths.icUnStar, + fit: BoxFit.fill), onPressed: () { if (_markAsStarActionClick != null && _presentationEmail != null) { _markAsStarActionClick!(_presentationEmail!); } }), + IconButton( + key: Key('button_mark_as_unread_email'), + color: AppColor.baseTextColor, + icon: SvgPicture.asset(_imagePaths.icUnreadEmail, fit: BoxFit.fill), + onPressed: () { + if (_onUnreadEmailActionClick != null && _presentationEmail != null && _presentationEmail!.isReadEmail()) { + _onUnreadEmailActionClick!(_presentationEmail!); + } + }), IconButton( key: Key('button_move_to_mailbox_email'), color: AppColor.baseTextColor, - icon: SvgPicture.asset(_imagePaths.icFolder, color: AppColor.baseTextColor, fit: BoxFit.fill), + icon: SvgPicture.asset(_imagePaths.icMoveEmail, fit: BoxFit.fill), onPressed: () { if (_onMoveToMailboxActionClick != null && _presentationEmail != null) { _onMoveToMailboxActionClick!(_presentationEmail!); diff --git a/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart b/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart index f4b810d47..528b3b3e9 100644 --- a/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart +++ b/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart @@ -75,15 +75,13 @@ class _AttachmentsPlaceHolderLoadingState extends State 0) _buildAddressToReceiverWidget(), - if (_presentationEmail!.cc.numberEmailAddress() > 0) _buildAddressCcReceiverWidget(), - if (_presentationEmail!.bcc.numberEmailAddress() > 0) _buildAddressBccReceiverWidget(), + transform: Matrix4.translationValues(0.0, 0.0, 0.0), + child: Row(children: [ + Expanded(child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (_presentationEmail!.to.numberEmailAddress() > 0) _buildAddressToReceiverWidget(), + if (_presentationEmail!.cc.numberEmailAddress() > 0) _buildAddressCcReceiverWidget(), + if (_presentationEmail!.bcc.numberEmailAddress() > 0) _buildAddressBccReceiverWidget(), + ], + )), + if (_presentationEmail?.hasAttachment == true) Padding( - padding: EdgeInsets.only(top: 6), - child: Text( - '${_presentationEmail!.getReceivedAt(Localizations.localeOf(_context).toLanguageTag(), pattern: 'dd/MM/yyyy h:mm a')}', - style: TextStyle(fontSize: 12, color: AppColor.baseTextColor), - )) - ], - )) + padding: EdgeInsets.only(left: 8), + child: (ButtonBuilder(_imagePaths.icAttachment) + ..paddingIcon(EdgeInsets.zero) + ..size(16)) + .build()), + ])) ) ) ); diff --git a/lib/features/mailbox/presentation/mailbox_controller.dart b/lib/features/mailbox/presentation/mailbox_controller.dart index cf89bc277..f1aa28cff 100644 --- a/lib/features/mailbox/presentation/mailbox_controller.dart +++ b/lib/features/mailbox/presentation/mailbox_controller.dart @@ -189,7 +189,7 @@ class MailboxController extends BaseController { mailboxDashBoardController.setSelectedMailbox(presentationMailboxSelected); mailboxDashBoardController.clearSelectedEmail(); - if (responsiveUtils.isMobileDevice(context)) { + if (!responsiveUtils.isDesktop(context)) { mailboxDashBoardController.closeDrawer(); } } diff --git a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart index b6daef2c1..3839bf922 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart @@ -14,31 +14,53 @@ class MailboxDashBoardView extends GetWidget { Widget build(BuildContext context) { return Scaffold( key: controller.scaffoldKey, - drawer: responsiveUtils.isMobileDevice(context) - ? Container( + drawer: ResponsiveWidget( + responsiveUtils: responsiveUtils, + mobile: Container( child: MailboxView(), width: responsiveUtils.isPortrait(context) - ? responsiveUtils.getSizeWidthScreen(context) - : responsiveUtils.getSizeWidthScreen(context) / 2) - : null, - drawerEnableOpenDragGesture: responsiveUtils.isMobileDevice(context), - body: Container( - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.start, - children: [ - if (!responsiveUtils.isMobileDevice(context)) - Expanded( - flex: responsiveUtils.isDesktop(context) ? 1 : 2, - child: MailboxView()), - Expanded( - flex: responsiveUtils.isDesktop(context) ? 1 : 3, - child: ThreadView(), - ), - if (responsiveUtils.isDesktop(context)) Expanded(flex: 2, child: EmailView()), - ], - ), + ? responsiveUtils.getSizeWidthScreen(context) + : responsiveUtils.getSizeWidthScreen(context) / 2), + tablet: Container( + child: MailboxView(), + width: responsiveUtils.getSizeWidthScreen(context) * 0.35), + desktop: null ), + drawerEnableOpenDragGesture: !responsiveUtils.isDesktop(context), + body: ResponsiveWidget( + responsiveUtils: responsiveUtils, + desktop: Container( + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Expanded(flex: 1, child: MailboxView()), + Expanded( + flex: 1, + child: Padding( + padding: EdgeInsets.symmetric(horizontal: 16), + child: ThreadView(), + )), + Expanded(flex: 2, child: EmailView()), + ], + ), + ), + tabletLarge: Container( + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Container( + width: responsiveUtils.getSizeWidthScreen(context) * 0.35, + padding: EdgeInsets.symmetric(horizontal: 16), + child: ThreadView() + ), + Expanded(child: EmailView()), + ], + ), + ), + tablet: ThreadView(), + mobile: ThreadView()), ); } } \ No newline at end of file diff --git a/lib/features/thread/presentation/thread_controller.dart b/lib/features/thread/presentation/thread_controller.dart index 1e477d943..473f8e89b 100644 --- a/lib/features/thread/presentation/thread_controller.dart +++ b/lib/features/thread/presentation/thread_controller.dart @@ -297,7 +297,7 @@ class ThreadController extends BaseController { void previewEmail(BuildContext context, PresentationEmail presentationEmailSelected) { mailboxDashBoardController.setSelectedEmail(presentationEmailSelected); - if (!responsiveUtils.isDesktop(context)) { + if (!responsiveUtils.isDesktop(context) && !responsiveUtils.isTabletLarge(context)) { goToEmail(context); } } diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index c6b9d9171..2c4b0c547 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -74,7 +74,9 @@ class ThreadView extends GetWidget { ), floatingActionButton: Obx(() => !controller.isSearchActive() && !controller.isSelectionEnabled() ? Container( - padding: EdgeInsets.only(bottom: controller.isSelectionEnabled() ? 80 : 0), + padding: EdgeInsets.only(bottom: controller.isSelectionEnabled() + ? 80 + : responsiveUtils.isMobileDevice(context) ? 0 : 16), child: Align( alignment: Alignment.bottomRight, child: ScrollingFloatingButtonAnimated( diff --git a/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart b/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart index 4f914a93b..8bff80680 100644 --- a/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart +++ b/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart @@ -2,7 +2,6 @@ import 'package:core/core.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; -import 'package:model/mailbox/presentation_mailbox.dart'; import 'package:model/model.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; @@ -169,11 +168,14 @@ class AppBarThreadWidgetBuilder { if (_responsiveUtils.isTablet(_context)) { width = width * 0.7; widthSiblingsWidget = 300; + } else if (_responsiveUtils.isTabletLarge(_context)) { + width = width * 0.35; + widthSiblingsWidget = 250; } else if (_responsiveUtils.isDesktop(_context)) { width = width * 0.2; widthSiblingsWidget = 300; } - final maxWidth = width - widthSiblingsWidget; + final maxWidth = width > widthSiblingsWidget ? width - widthSiblingsWidget : 0.0; return maxWidth; } } \ No newline at end of file diff --git a/lib/features/thread/presentation/widgets/bottom_bar_thread_selection_widget.dart b/lib/features/thread/presentation/widgets/bottom_bar_thread_selection_widget.dart index 3aa622287..e520e0c93 100644 --- a/lib/features/thread/presentation/widgets/bottom_bar_thread_selection_widget.dart +++ b/lib/features/thread/presentation/widgets/bottom_bar_thread_selection_widget.dart @@ -76,7 +76,8 @@ class BottomBarThreadSelectionWidget { }}) ..text(AppLocalizations.of(_context).move, isVertical: _responsiveUtils.isMobile(_context))) .build(), - (ButtonBuilder(_imagePaths.icSpamV2) + if (!_responsiveUtils.isDesktop(_context) && !_responsiveUtils.isTabletLarge(_context)) + (ButtonBuilder(_imagePaths.icSpamV2) ..key(Key('button_spam_email')) ..paddingIcon(EdgeInsets.all(8)) ..textStyle(TextStyle(fontSize: 12, color: AppColor.colorTextButton)) @@ -86,7 +87,8 @@ class BottomBarThreadSelectionWidget { }}) ..text(AppLocalizations.of(_context).spam, isVertical: _responsiveUtils.isMobile(_context))) .build(), - (ButtonBuilder(_imagePaths.icDeleteV2) + if (!_responsiveUtils.isDesktop(_context) && !_responsiveUtils.isTabletLarge(_context)) + (ButtonBuilder(_imagePaths.icDeleteV2) ..key(Key('button_delete_email')) ..paddingIcon(EdgeInsets.all(8)) ..textStyle(TextStyle(fontSize: 12, color: AppColor.colorTextButton))