Add widgets builder for mailbox

2021-07-29 12:48:23 +07:00
parent b84270870a
commit 5d3d2f4c1e
10 changed files with 503 additions and 103 deletions
@@ -4,19 +4,20 @@ 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';

 typedef OnOpenMailboxNewFolderActionClick = void Function();

 class MailboxNewFolderTileBuilder {
-  final imagePath = Get.find<ImagePaths>();
+
+  final BuildContext _context;
+  final ResponsiveUtils _responsiveUtils;

  String? _icon;
  String? _name;

  OnOpenMailboxNewFolderActionClick? _onOpenMailboxFolderActionClick;

-  MailboxNewFolderTileBuilder();
+  MailboxNewFolderTileBuilder(this._context, this._responsiveUtils);

  MailboxNewFolderTileBuilder addIcon(String icon) {
    _icon = icon;
@@ -44,24 +45,28 @@ class MailboxNewFolderTileBuilder {
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
          color: AppColor.mailboxBackgroundColor),
-        child: ListTile(
-          onTap: () => {
-            if (_onOpenMailboxFolderActionClick != null) {
-              _onOpenMailboxFolderActionClick!()
-            }
-          },
-          leading: Transform(
-            transform: Matrix4.translationValues(24.0, 0.0, 0.0),
-            child: _icon != null
-              ? SvgPicture.asset(_icon!, width: 24, height: 24, color: AppColor.mailboxIconColor, fit: BoxFit.fill)
-              : SizedBox.shrink()),
-          title: Transform(
-            transform: Matrix4.translationValues(10.0, 0.0, 0.0),
-            child: Text(
-              _name ?? '',
-              maxLines: 1,
-              style: TextStyle(fontSize: 15, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
-            )),
+        child: MediaQuery(
+          data: MediaQueryData(padding: EdgeInsets.zero),
+          child: ListTile(
+            contentPadding: EdgeInsets.zero,
+            onTap: () => {
+              if (_onOpenMailboxFolderActionClick != null) {
+                _onOpenMailboxFolderActionClick!()
+              }
+            },
+            leading: Padding(
+              padding: EdgeInsets.only(left: _responsiveUtils.isMobile(_context) ? 42 : 34),
+              child: _icon != null
+                ? SvgPicture.asset(_icon!, width: 24, height: 24, color: AppColor.mailboxIconColor, fit: BoxFit.fill)
+                : SizedBox.shrink()),
+            title: Padding(
+              padding: EdgeInsets.only(left: 8),
+              child: Text(
+                _name ?? '',
+                maxLines: 1,
+                style: TextStyle(fontSize: 15, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
+              )),
+          )
        )
      )
    );
@@ -2,7 +2,6 @@ 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:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree.dart';

@@ -10,13 +9,17 @@ typedef OnOpenMailBoxFolderActionClick = void Function(MailboxTree mailboxTree);

 class MailBoxFolderTileBuilder extends StatelessWidget {

-  final imagePaths = Get.find<ImagePaths>();
-
  final MailboxNode _mailboxNode;
+  final BuildContext _context;
+  final ImagePaths _imagePaths;
+  final ResponsiveUtils _responsiveUtils;

  final OnOpenMailBoxFolderActionClick? onOpenMailBoxFolderActionClick;

  MailBoxFolderTileBuilder(
+    this._context,
+    this._imagePaths,
+    this._responsiveUtils,
    this._mailboxNode,
    {
      this.onOpenMailBoxFolderActionClick
@@ -31,27 +34,32 @@ class MailBoxFolderTileBuilder extends StatelessWidget {
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        color: AppColor.mailboxBackgroundColor),
-      child: ListTile(
-        leading: Transform(
-          transform: Matrix4.translationValues(20.0, 0.0, 0.0),
-          child: SvgPicture.asset(imagePaths.icMailboxFolder, width: 24, height: 24, color: AppColor.mailboxIconColor, fit: BoxFit.fill)),
-        title: Transform(
-          transform: Matrix4.translationValues(10.0, 0.0, 0.0),
-          child: Text(
-            _mailboxNode.item.name!.name,
-            maxLines: 1,
-            style: TextStyle(fontSize: 15, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
-          )),
-        trailing: Transform(
-          transform: Matrix4.translationValues(-16.0, 0.0, 0.0),
-          child: _mailboxNode.hasChildren()
-            ? SvgPicture.asset(
-                imagePaths.icFolderArrow,
-                width: 12,
-                height: 12,
-                color: AppColor.mailboxIconColor,
-                fit: BoxFit.fill)
-            : SizedBox.shrink()))
+      child: MediaQuery(
+        data: MediaQueryData(padding: EdgeInsets.zero),
+        child: ListTile(
+          contentPadding: EdgeInsets.zero,
+          leading: Padding(
+            padding: EdgeInsets.only(left: _responsiveUtils.isMobile(_context) ? 40 : 34),
+            child: SvgPicture.asset(_imagePaths.icMailboxFolder, width: 24, height: 24, color: AppColor.mailboxIconColor, fit: BoxFit.fill)),
+          title: Padding(
+            padding: EdgeInsets.only(left: 8),
+            child: Text(
+              _mailboxNode.item.name!.name,
+              maxLines: 1,
+              style: TextStyle(fontSize: 15, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
+            )),
+          trailing: Padding(
+            padding: EdgeInsets.only(right: _responsiveUtils.isMobile(_context) ? 36 : 8, left: 16),
+            child: _mailboxNode.hasChildren()
+              ? SvgPicture.asset(
+                  _imagePaths.icFolderArrow,
+                  width: 12,
+                  height: 12,
+                  color: AppColor.mailboxIconColor,
+                  fit: BoxFit.fill)
+              : SizedBox.shrink())
+        )
+      )
    );
  }
 }
@@ -4,20 +4,28 @@ 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/features/mailbox/domain/extensions/presentation_mailbox_extension.dart';

 typedef OnOpenMailboxActionClick = void Function();

 class MailboxTileBuilder {
-  final imagePaths = Get.find<ImagePaths>();

  final PresentationMailbox _presentationMailbox;
+  final SelectMode _selectMode;
+  final BuildContext _context;
+  final ImagePaths _imagePaths;
+  final ResponsiveUtils _responsiveUtils;

  OnOpenMailboxActionClick? _onOpenMailboxActionClick;

-  MailboxTileBuilder(this._presentationMailbox);
+  MailboxTileBuilder(
+    this._context,
+    this._imagePaths,
+    this._responsiveUtils,
+    this._presentationMailbox,
+    this._selectMode
+  );

  MailboxTileBuilder onOpenMailboxAction(OnOpenMailboxActionClick onOpenMailboxActionClick) {
    _onOpenMailboxActionClick = onOpenMailboxActionClick;
@@ -34,52 +42,56 @@ class MailboxTileBuilder {
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
-          color: _presentationMailbox.selectMode == SelectMode.ACTIVE
+          color: _selectMode== SelectMode.ACTIVE
            ? AppColor.mailboxSelectedBackgroundColor
            : AppColor.mailboxBackgroundColor),
-        child: ListTile(
-          focusColor: AppColor.primaryLightColor,
-          hoverColor: AppColor.primaryLightColor,
-          onTap: () => {
-            if (_onOpenMailboxActionClick != null) {
-              _onOpenMailboxActionClick!()
-            }
-          },
-          leading: Transform(
-            transform: Matrix4.translationValues(20.0, 0.0, 0.0),
-            child: SvgPicture.asset(
-              '${_presentationMailbox.getMailboxIcon(imagePaths)}',
-              width: 24,
-              height: 24,
-              color: _presentationMailbox.selectMode == SelectMode.ACTIVE
-                ? AppColor.mailboxSelectedIconColor
-                : AppColor.mailboxIconColor,
-              fit: BoxFit.fill)),
-          title: Transform(
-            transform: Matrix4.translationValues(8.0, 0.0, 0.0),
-            child: Text(
-              _presentationMailbox.name!.name,
-              maxLines: 1,
-              overflow:TextOverflow.ellipsis,
-              style: TextStyle(
-                fontSize: 15,
-                color: _presentationMailbox.selectMode == SelectMode.ACTIVE
-                  ? AppColor.mailboxSelectedTextColor
-                  : AppColor.mailboxTextColor,
-                fontWeight: FontWeight.bold),
+        child: MediaQuery(
+          data: MediaQueryData(padding: EdgeInsets.zero),
+          child: ListTile(
+            focusColor: AppColor.primaryLightColor,
+            hoverColor: AppColor.primaryLightColor,
+            contentPadding: EdgeInsets.zero,
+            onTap: () => {
+              if (_onOpenMailboxActionClick != null) {
+                _onOpenMailboxActionClick!()
+              }
+            },
+            leading: Padding(
+              padding: EdgeInsets.only(left: _responsiveUtils.isMobile(_context) ? 40 : 20),
+              child: SvgPicture.asset(
+                '${_presentationMailbox.getMailboxIcon(_imagePaths)}',
+                width: 24,
+                height: 24,
+                color: _selectMode == SelectMode.ACTIVE
+                  ? AppColor.mailboxSelectedIconColor
+                  : AppColor.mailboxIconColor,
+                fit: BoxFit.fill)),
+            title: Padding(
+              padding: EdgeInsets.only(left: 8),
+              child: Text(
+                _presentationMailbox.name!.name,
+                maxLines: 1,
+                overflow:TextOverflow.ellipsis,
+                style: TextStyle(
+                  fontSize: 15,
+                  color: _selectMode == SelectMode.ACTIVE
+                    ? AppColor.mailboxSelectedTextColor
+                    : AppColor.mailboxTextColor,
+                  fontWeight: FontWeight.bold),
+              )),
+            trailing: Padding(
+              padding: EdgeInsets.only(right: _responsiveUtils.isMobile(_context) ? 36 : 24, left: 16),
+              child: Text(
+                '${_presentationMailbox.getCountUnReadEmails()}',
+                maxLines: 1,
+                style: TextStyle(
+                  fontSize: 15,
+                  color: _selectMode == SelectMode.ACTIVE
+                    ? AppColor.mailboxSelectedTextNumberColor
+                    : AppColor.mailboxTextNumberColor,
+                  fontWeight: FontWeight.bold))
            )),
-          trailing: Transform(
-            transform: Matrix4.translationValues(-16.0, 0.0, 0.0),
-            child: Text(
-              '${_presentationMailbox.getCountUnReadEmails()}',
-              maxLines: 1,
-              style: TextStyle(
-                fontSize: 15,
-                color: _presentationMailbox.selectMode == SelectMode.ACTIVE
-                  ? AppColor.mailboxSelectedTextNumberColor
-                  : AppColor.mailboxTextNumberColor,
-                fontWeight: FontWeight.bold))
-          )),
+        )
      )
    );
  }
@@ -5,20 +5,19 @@ import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:flutter_typeahead/flutter_typeahead.dart';
-import 'package:get/get.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 typedef OnNewSearchQuery = Function(String);

 class SearchFormWidgetBuilder {
-  final imagePath = Get.find<ImagePaths>();
-  final TextEditingController _typeAheadController = TextEditingController();

+  final _typeAheadController = TextEditingController();
  final BuildContext _context;
+  final ImagePaths _imagePaths;

  OnNewSearchQuery? _onNewSearchQuery;

-  SearchFormWidgetBuilder(this._context);
+  SearchFormWidgetBuilder(this._context, this._imagePaths);

  SearchFormWidgetBuilder onNewSearchQuery(OnNewSearchQuery onNewSearchQuery) {
    _onNewSearchQuery = onNewSearchQuery;
@@ -46,7 +45,7 @@ class SearchFormWidgetBuilder {
            hintStyle: TextStyle(color: AppColor.searchHintTextColor, fontSize: 15.0, fontWeight: FontWeight.w500),
            icon: Padding(
              padding: EdgeInsets.only(left: 20),
-              child: SvgPicture.asset(imagePath.icSearch, width: 24, height: 24, fit: BoxFit.fill),
+              child: SvgPicture.asset(_imagePaths.icSearch, width: 24, height: 24, fit: BoxFit.fill),
            ))),
        debounceDuration: Duration(milliseconds: 300),
        suggestionsCallback: (pattern) async {
@@ -4,11 +4,9 @@ import 'package:core/core.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
-import 'package:get/get.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class StorageWidgetBuilder {
-  final imagePath = Get.find<ImagePaths>();
  final BuildContext _context;

  StorageWidgetBuilder(this._context);
@@ -4,16 +4,15 @@ 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';

 typedef OnOpenUserInformationActionClick = void Function();

 class UserInformationWidgetBuilder {
-  final imagePath = Get.find<ImagePaths>();
+  final ImagePaths _imagePaths;

  OnOpenUserInformationActionClick? _onOpenUserInformationActionClick;

-  UserInformationWidgetBuilder();
+  UserInformationWidgetBuilder(this._imagePaths);

  UserInformationWidgetBuilder onOpenUserInformationAction(
      OnOpenUserInformationActionClick onOpenUserInformationActionClick) {
@@ -34,7 +33,7 @@ class UserInformationWidgetBuilder {
            _onOpenUserInformationActionClick!();
          }
        },
-        leading: SvgPicture.asset(imagePath.icTMailLogo, width: 40, height: 40, fit: BoxFit.fill),
+        leading: SvgPicture.asset(_imagePaths.icTMailLogo, width: 40, height: 40, fit: BoxFit.fill),
        title: Transform(
          transform: Matrix4.translationValues(0.0, 0.0, 0.0),
          child: Text(
@@ -52,7 +51,7 @@ class UserInformationWidgetBuilder {
        trailing: Transform(
          transform: Matrix4.translationValues(0.0, 0.0, 0.0),
          child: IconButton(
-            icon: SvgPicture.asset(imagePath.icNextArrow, width: 7, height: 12, fit: BoxFit.fill),
+            icon: SvgPicture.asset(_imagePaths.icNextArrow, width: 7, height: 12, fit: BoxFit.fill),
            onPressed: () => {}))),
    );
  }
@@ -0,0 +1,124 @@
+import 'dart:ui';
+
+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/mailbox/presentation_mailbox.dart';
+
+typedef OnOpenSearchMailActionClick = void Function();
+typedef OnOpenListMailboxActionClick = void Function();
+typedef OnOpenUserInformationActionClick = void Function();
+
+class AppBarListMailWidgetBuilder {
+  OnOpenSearchMailActionClick? _onOpenSearchMailActionClick;
+  OnOpenListMailboxActionClick? _onOpenListMailboxActionClick;
+  OnOpenUserInformationActionClick? _onOpenUserInformationActionClick;
+
+  final BuildContext _context;
+  final ImagePaths _imagePaths;
+  final ResponsiveUtils _responsiveUtils;
+  final PresentationMailbox _presentationMailbox;
+
+  AppBarListMailWidgetBuilder(
+    this._context,
+    this._imagePaths,
+    this._responsiveUtils,
+    this._presentationMailbox
+  );
+
+  AppBarListMailWidgetBuilder onOpenUserInformationAction(
+      OnOpenUserInformationActionClick onOpenUserInformationActionClick) {
+    _onOpenUserInformationActionClick = onOpenUserInformationActionClick;
+    return this;
+  }
+
+  AppBarListMailWidgetBuilder onOpenSearchMailActionClick(
+      OnOpenSearchMailActionClick onOpenSearchMailActionClick) {
+    _onOpenSearchMailActionClick = onOpenSearchMailActionClick;
+    return this;
+  }
+
+  AppBarListMailWidgetBuilder onOpenListMailboxActionClick(
+      OnOpenListMailboxActionClick onOpenListMailboxActionClick) {
+    _onOpenListMailboxActionClick = onOpenListMailboxActionClick;
+    return this;
+  }
+
+  Widget build() {
+    return Container(
+      key: Key('app_bar_list_mail_widget'),
+      alignment: Alignment.center,
+      color: Colors.white,
+      child: MediaQuery(
+        data: MediaQueryData(padding: EdgeInsets.zero),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            if (_responsiveUtils.isMobile(_context)) _buildIconUser(),
+            Expanded(child: _buildContentCenterAppBar()),
+            _buildIconSearch(),
+          ]
+        )
+      )
+    );
+  }
+
+  Widget _buildIconUser() {
+    return GestureDetector(
+      onTap: () => {
+        if (_onOpenUserInformationActionClick != null) {
+          _onOpenUserInformationActionClick!()
+        }},
+      child: Padding(
+        padding: EdgeInsets.only(left: _responsiveUtils.isMobile(_context) ? 24 : 0),
+        child: SvgPicture.asset(_imagePaths.icTMailLogo, width: 24, height: 24, fit: BoxFit.fill)));
+  }
+
+  Widget _buildIconSearch() {
+    return Padding(
+      padding: EdgeInsets.only(left: 16, right: 0),
+      child: IconButton(
+        icon: SvgPicture.asset(_imagePaths.icSearch, width: 24, height: 24, fit: BoxFit.fill),
+        onPressed: () => {
+          if (_onOpenSearchMailActionClick != null) {
+            _onOpenSearchMailActionClick!()
+          }
+        }
+      ));
+  }
+
+  Widget _buildContentCenterAppBar() {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        GestureDetector(
+          onTap: () => {
+            if (_onOpenListMailboxActionClick != null) {
+              _onOpenListMailboxActionClick!()
+            }},
+          child: Padding(
+            padding: EdgeInsets.only(left: 16),
+            child: Text(
+              '${_presentationMailbox.name?.name}',
+              maxLines: 1,
+              style: TextStyle(fontSize: 22, color: AppColor.titleAppBarMailboxListMail, fontWeight: FontWeight.w500),
+            ))),
+        if(_presentationMailbox.getCountUnReadEmails().isNotEmpty)
+          Container(
+            margin: EdgeInsets.only(left: 9),
+            padding: EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 2),
+            decoration:BoxDecoration(
+              borderRadius: BorderRadius.circular(8),
+              color: AppColor.bgNotifyCountAppBarMailboxListMail),
+            child: Text(
+              '${_presentationMailbox.getCountUnReadEmails()} new',
+              maxLines: 1,
+              style: TextStyle(fontSize: 10, color: AppColor.notifyCountAppBarMailboxListMail, fontWeight: FontWeight.w500),
+            ))
+      ]
+    );
+  }
+}
@@ -0,0 +1,130 @@
+import 'dart:ui';
+
+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/model.dart';
+
+typedef OnOpenMailActionClick = void Function();
+
+class MailTileBuilder {
+
+  final SelectMode _selectMode;
+  final ImagePaths _imagePaths;
+  final PresentationMail _presentationMail;
+
+  OnOpenMailActionClick? _onOpenMailActionClick;
+
+  MailTileBuilder(
+    this._imagePaths,
+    this._selectMode,
+    this._presentationMail,
+  );
+
+  MailTileBuilder onOpenMailAction(OnOpenMailActionClick onOpenMailActionClick) {
+    _onOpenMailActionClick = onOpenMailActionClick;
+    return this;
+  }
+
+  Widget build() {
+    return Theme(
+      data: ThemeData(
+        splashColor: Colors.transparent,
+        highlightColor: Colors.transparent),
+      child: Container(
+        key: Key('mail_list_tile'),
+        margin: EdgeInsets.only(bottom: 10),
+        padding: EdgeInsets.only(left: 16, right: 16, top: 10, bottom: 10),
+        alignment: Alignment.center,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(16),
+          color: _selectMode== SelectMode.ACTIVE
+            ? AppColor.mailboxSelectedBackgroundColor
+            : AppColor.mailboxBackgroundColor),
+        child: MediaQuery(
+          data: MediaQueryData(padding: EdgeInsets.zero),
+          child: ListTile(
+            focusColor: AppColor.primaryLightColor,
+            hoverColor: AppColor.primaryLightColor,
+            contentPadding: EdgeInsets.zero,
+            onTap: () => {
+              if (_onOpenMailActionClick != null) {
+                _onOpenMailActionClick!()
+              }
+            },
+            leading: Transform(
+              transform: Matrix4.translationValues(0.0, -12.0, 0.0),
+              child: SvgPicture.asset(
+                _imagePaths.icTMailLogo,
+                width: 32,
+                height: 32,
+                color: _selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedIconColor : AppColor.mailboxIconColor,
+                fit: BoxFit.fill)),
+            title: Padding(
+              padding: EdgeInsets.only(left: 0),
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisAlignment: MainAxisAlignment.start,
+                children: [
+                  Expanded(
+                    child: Text(
+                      'TMail app',
+                      maxLines: 1,
+                      overflow:TextOverflow.ellipsis,
+                      style: TextStyle(
+                        fontSize: 14,
+                        color: _selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedTextColor : AppColor.mailboxTextColor,
+                        fontWeight: FontWeight.bold))),
+                  Text(
+                    '9:29 AM',
+                    maxLines: 1,
+                    overflow:TextOverflow.ellipsis,
+                    style: TextStyle(
+                        fontSize: 12,
+                        color: _selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedTextColor : AppColor.mailboxTextColor))
+                ],
+              )
+            ),
+            subtitle: Padding(
+              padding: EdgeInsets.only(left: 0, top: 8),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisAlignment: MainAxisAlignment.start,
+                children: [
+                  Padding(
+                    padding: EdgeInsets.only(bottom: 3),
+                    child: Text(
+                      'Welcome to TMail!',
+                      maxLines: 1,
+                      overflow:TextOverflow.ellipsis,
+                      style: TextStyle(
+                          fontSize: 12,
+                          color: AppColor.appColor,
+                          fontWeight: FontWeight.bold))),
+                  Row(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    children: [
+                      Expanded(
+                        child: Text(
+                          '${_presentationMail.message}',
+                          maxLines: 1,
+                          overflow:TextOverflow.ellipsis,
+                          style: TextStyle(fontSize: 12, color: AppColor.baseTextColor))),
+                      ButtonBuilder(_imagePaths.icCalendar).build(),
+                      SizedBox(width: 12),
+                      ButtonBuilder(_imagePaths.icShare).build(),
+                      SizedBox(width: 12),
+                      ButtonBuilder(_imagePaths.icStar).build(),
+                    ],
+                  )
+                ],
+              )
+            ),
+          ),
+        )
+      )
+    );
+  }
+}
@@ -0,0 +1,75 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+typedef OnBackActionClick = void Function();
+
+class AppBarMessengerWidgetBuilder {
+  OnBackActionClick? _onBackActionClick;
+
+  final BuildContext _context;
+  final ImagePaths _imagePaths;
+  final ResponsiveUtils _responsiveUtils;
+
+  AppBarMessengerWidgetBuilder(
+    this._context,
+    this._imagePaths,
+    this._responsiveUtils,
+  );
+
+  AppBarMessengerWidgetBuilder onBackActionClick(
+      OnBackActionClick onBackActionClick) {
+    _onBackActionClick = onBackActionClick;
+    return this;
+  }
+
+  Widget build() {
+    return Container(
+      key: Key('app_bar_messenger_widget'),
+      alignment: Alignment.center,
+      color: Colors.white,
+      child: MediaQuery(
+        data: MediaQueryData(padding: EdgeInsets.zero),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.end,
+          children: [
+            if (!_responsiveUtils.isDesktop(_context))
+              Expanded(child: Row(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                mainAxisAlignment: MainAxisAlignment.start,
+                children:[_buildBackButton()])),
+            _buildListOptionButton(),
+          ]
+        )
+      )
+    );
+  }
+
+  Widget _buildBackButton() {
+    return ButtonBuilder(_imagePaths.icBack)
+      .size(20)
+      .onBackActionClick(() {
+        if (_onBackActionClick != null) {
+          _onBackActionClick!();
+        }})
+      .build();
+  }
+
+  Widget _buildListOptionButton() {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        ButtonBuilder(_imagePaths.icTrash).key(Key('button_delete_message')).build(),
+        SizedBox(width: 20),
+        ButtonBuilder(_imagePaths.icEyeDisable).key(Key('button_hide_message')).build(),
+        SizedBox(width: 20),
+        ButtonBuilder(_imagePaths.icStar).key(Key('button_favorite_message')).build(),
+        SizedBox(width: 20),
+        ButtonBuilder(_imagePaths.icFolder).key(Key('button_add_folder_message')).build(),
+      ]
+    );
+  }
+}
@@ -0,0 +1,50 @@
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class BottomBarMessengerWidgetBuilder {
+
+  final BuildContext _context;
+  final ImagePaths _imagePaths;
+  final ResponsiveUtils _responsiveUtils;
+
+  BottomBarMessengerWidgetBuilder(
+    this._context,
+    this._imagePaths,
+    this._responsiveUtils,
+  );
+
+  Widget build() {
+    return Container(
+      key: Key('bottom_bar_messenger_widget'),
+      alignment: Alignment.center,
+      color: Colors.white,
+      child: MediaQuery(
+        data: MediaQueryData(padding: EdgeInsets.zero),
+        child: _buildListOptionButton()
+      )
+    );
+  }
+
+  Widget _buildListOptionButton() {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceAround,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        ButtonBuilder(_imagePaths.icReplyAll)
+          .key(Key('button_reply_all_message'))
+          .text(AppLocalizations.of(_context).reply_all, isVertical: _responsiveUtils.isMobile(_context))
+          .build(),
+        ButtonBuilder(_imagePaths.icReply)
+          .key(Key('button_reply_message'))
+          .text(AppLocalizations.of(_context).reply, isVertical: _responsiveUtils.isMobile(_context))
+          .build(),
+        ButtonBuilder(_imagePaths.icForward)
+          .key(Key('button_forward_message'))
+          .text(AppLocalizations.of(_context).forward, isVertical: _responsiveUtils.isMobile(_context))
+          .build()
+      ]
+    );
+  }
+}