TF-1118 Apply new latest design forwarding

2022-11-08 15:45:49 +07:00
parent 2402371ca3
commit eaa47b9cd7
31 changed files with 897 additions and 714 deletions
@@ -15,11 +15,10 @@ import 'package:tmail_ui_user/features/composer/domain/state/get_autocomplete_st
 import 'package:tmail_ui_user/features/composer/domain/usecases/get_autocomplete_interactor.dart';
 import 'package:tmail_ui_user/features/composer/domain/usecases/get_autocomplete_with_device_contact_interactor.dart';
 import 'package:tmail_ui_user/features/contact/presentation/model/contact_arguments.dart';
+import 'package:tmail_ui_user/features/contact/presentation/widgets/contact_suggestion_box_item.dart';
 import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';

-typedef OnSelectedContactCallback = Function(EmailAddress emailAddress);
-
 class ContactController extends BaseController {

  TextEditingController? textInputSearchController;
@@ -38,7 +37,7 @@ class ContactController extends BaseController {

  ContactArguments? arguments;
  EmailAddress? contactSelected;
-  OnSelectedContactCallback? onSelectedContactCallback;
+  SelectedContactCallbackAction? onSelectedContactCallback;
  VoidCallback? onDismissContactView;

  @override
@@ -2,16 +2,16 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/presentation/utils/style_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
-import 'package:model/extensions/email_address_extension.dart';
+import 'package:tmail_ui_user/features/composer/presentation/widgets/suggestion_email_address.dart';
 import 'package:tmail_ui_user/features/contact/presentation/contact_controller.dart';
 import 'package:tmail_ui_user/features/contact/presentation/model/contact_arguments.dart';
 import 'package:tmail_ui_user/features/contact/presentation/utils/contact_utils.dart';
 import 'package:tmail_ui_user/features/contact/presentation/widgets/app_bar_contact_widget.dart';
+import 'package:tmail_ui_user/features/contact/presentation/widgets/contact_suggestion_box_item.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_bar_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

@@ -30,7 +30,7 @@ class ContactView extends GetWidget<ContactController> {
  ContactView.fromArguments(
      ContactArguments arguments, {
      Key? key,
-      OnSelectedContactCallback? onSelectedContactCallback,
+      SelectedContactCallbackAction? onSelectedContactCallback,
      VoidCallback? onDismissCallback
  }) : super(key: key) {
    controller.arguments = arguments;
@@ -117,7 +117,17 @@ class ContactView extends GetWidget<ContactController> {
                                    },
                                    itemBuilder: (context, index) {
                                      final emailAddress = controller.listContactSearched[index];
-                                      return _buildItemSearchContact(context, emailAddress);
+                                      final suggestionEmailAddress = _toSuggestionEmailAddress(
+                                        emailAddress,
+                                        controller.contactSelected != null
+                                          ? [controller.contactSelected!]
+                                          : []
+                                      );
+                                      return ContactSuggestionBoxItem(
+                                        suggestionEmailAddress,
+                                        padding: ContactUtils.getPaddingSearchResultList(context, _responsiveUtils),
+                                        selectedContactCallbackAction: (contact) => controller.selectContact(context, contact),
+                                      );
                                    }
                                )
                            );
@@ -134,68 +144,11 @@ class ContactView extends GetWidget<ContactController> {
    );
  }

-  Widget _buildItemSearchContact(BuildContext context, EmailAddress emailAddress) {
-    return Material(
-      color: Colors.transparent,
-      child: ListTile(
-        onTap: () => controller.selectContact(context, emailAddress),
-        contentPadding: ContactUtils.getPaddingSearchInputForm(context, _responsiveUtils),
-        leading: Container(
-            width: 44,
-            height: 44,
-            alignment: Alignment.center,
-            decoration: BoxDecoration(
-                borderRadius: BorderRadius.circular(44) * 0.5,
-                border: Border.all(color: Colors.transparent),
-                gradient: LinearGradient(
-                    begin: Alignment.topCenter,
-                    end: Alignment.bottomCenter,
-                    stops: const [0.0, 1.0],
-                    colors: emailAddress.avatarColors),
-                color: AppColor.avatarColor
-            ),
-            child: Text(
-                emailAddress.asString().isNotEmpty
-                    ? emailAddress.asString()[0].toUpperCase()
-                    : '',
-                style: const TextStyle(
-                    color: Colors.white,
-                    fontSize: 16,
-                    fontWeight: FontWeight.w600))),
-        title: Column(
-            mainAxisSize: MainAxisSize.min,
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-                Text(
-                    emailAddress.asString(),
-                    maxLines: 1,
-                    overflow: CommonTextStyle.defaultTextOverFlow,
-                    softWrap: CommonTextStyle.defaultSoftWrap,
-                    style: const TextStyle(
-                        color: Colors.black,
-                        fontSize: 15,
-                        fontWeight: FontWeight.normal)),
-                if (emailAddress.displayName.isNotEmpty && emailAddress.emailAddress.isNotEmpty)
-                    Padding(
-                      padding: const EdgeInsets.only(top: 4),
-                      child: Text(
-                          emailAddress.emailAddress,
-                          maxLines: 1,
-                          overflow: CommonTextStyle.defaultTextOverFlow,
-                          softWrap: CommonTextStyle.defaultSoftWrap,
-                          style: const TextStyle(
-                              color: AppColor.colorContentEmail,
-                              fontSize: 13,
-                              fontWeight: FontWeight.normal)))
-            ]
-        ),
-        trailing: controller.contactSelected?.email == emailAddress.email
-            ? SvgPicture.asset(_imagePaths.icFilterSelected,
-                width: 24,
-                height: 24,
-                fit: BoxFit.fill)
-            : null,
-      ),
-    );
+  SuggestionEmailAddress _toSuggestionEmailAddress(EmailAddress item, List<EmailAddress> addedEmailAddresses) {
+    if (addedEmailAddresses.contains(item)) {
+      return SuggestionEmailAddress(item, state: SuggestionEmailState.duplicated);
+    } else {
+      return SuggestionEmailAddress(item);
+    }
  }
 }
@@ -0,0 +1,258 @@
+
+import 'dart:async';
+
+import 'package:collection/collection.dart';
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/presentation/views/button/button_builder.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
+import 'package:model/model.dart';
+import 'package:super_tag_editor/tag_editor.dart';
+import 'package:tmail_ui_user/features/composer/presentation/widgets/suggestion_email_address.dart';
+import 'package:tmail_ui_user/features/contact/presentation/widgets/contact_input_tag_item.dart';
+import 'package:tmail_ui_user/features/contact/presentation/widgets/contact_suggestion_box_item.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef OnSuggestionContactCallbackAction = Future<List<EmailAddress>> Function(String query);
+typedef OnAddListContactCallbackAction = Function(List<EmailAddress> listEmailAddress);
+typedef OnExceptionAddListContactCallbackAction = Function();
+
+class AutocompleteContactTextFieldWithTags extends StatefulWidget {
+
+  final List<EmailAddress> listEmailAddress;
+  final TextEditingController? controller;
+  final bool? hasAddContactButton;
+  final OnSuggestionContactCallbackAction? onSuggestionCallback;
+  final OnAddListContactCallbackAction? onAddContactCallback;
+  final OnExceptionAddListContactCallbackAction? onExceptionCallback;
+
+  const AutocompleteContactTextFieldWithTags(this.listEmailAddress, {
+    Key? key,
+    this.controller,
+    this.hasAddContactButton = false,
+    this.onSuggestionCallback,
+    this.onAddContactCallback,
+    this.onExceptionCallback
+  }) : super(key: key);
+
+  @override
+  State<AutocompleteContactTextFieldWithTags> createState() => _AutocompleteContactTextFieldWithTagsState();
+}
+
+class _AutocompleteContactTextFieldWithTagsState extends State<AutocompleteContactTextFieldWithTags> {
+
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+  final _imagePaths = Get.find<ImagePaths>();
+
+  late List<EmailAddress> listEmailAddress;
+  late Timer _gapBetweenTagChangedAndFindSuggestion;
+
+  @override
+  void initState() {
+    super.initState();
+    listEmailAddress = widget.listEmailAddress;
+    _gapBetweenTagChangedAndFindSuggestion = Timer(
+      const Duration(microseconds: 500),
+      () {}
+    );
+  }
+
+  @override
+  void dispose() {
+    _gapBetweenTagChangedAndFindSuggestion.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final itemTagEditor = TagEditor<SuggestionEmailAddress>(
+      length: listEmailAddress.length,
+      controller: widget.controller,
+      borderRadius: 12,
+      backgroundColor: AppColor.colorInputBackgroundCreateMailbox,
+      focusedBorderColor: AppColor.colorTextButton,
+      enableBorderColor: AppColor.colorInputBorderCreateMailbox,
+      cursorColor: AppColor.primaryColor,
+      padding: const EdgeInsets.symmetric(horizontal: 12),
+      suggestionPadding: const EdgeInsets.symmetric(vertical: 12),
+      suggestionMargin: const EdgeInsets.symmetric(vertical: 4),
+      keyboardType: TextInputType.emailAddress,
+      textInputAction: TextInputAction.done,
+      hasAddButton: false,
+      tagSpacing: 12,
+      delimiters: const [' '],
+      autofocus: false,
+      minTextFieldWidth: 20,
+      resetTextOnSubmitted: true,
+      suggestionsBoxBackgroundColor: Colors.white,
+      suggestionsBoxRadius: 16,
+      suggestionsBoxMaxHeight: 350,
+      onSubmitted: (value) {
+        if (!_isDuplicatedRecipient(value)) {
+          setState(() => listEmailAddress.add(EmailAddress(null, value)));
+        }
+      },
+      textStyle: const TextStyle(
+        color: Colors.black,
+        fontSize: 16,
+        fontWeight: FontWeight.w500),
+      inputDecoration: const InputDecoration(border: InputBorder.none),
+      tagBuilder: (context, index) => ContactInputTagItem(
+        listEmailAddress[index],
+        deleteContactCallbackAction: (contact) {
+          setState(() => listEmailAddress.remove(contact));
+        }
+      ),
+      onTagChanged: (value) {
+        if (!_isDuplicatedRecipient(value)) {
+          setState(() => listEmailAddress.add(EmailAddress(null, value)));
+        }
+      },
+      findSuggestions: _findSuggestions,
+      suggestionBuilder: (context, tagEditorState, suggestionEmailAddress) {
+        return Container(
+          padding: const EdgeInsets.symmetric(horizontal: 12),
+          child: ContactSuggestionBoxItem(
+            suggestionEmailAddress,
+            shapeBorder: const RoundedRectangleBorder(
+              borderRadius: BorderRadius.all(Radius.circular(12))),
+            selectedContactCallbackAction: (contact) {
+              setState(() => listEmailAddress.add(contact));
+              tagEditorState.selectSuggestion(suggestionEmailAddress);
+            },
+          ),
+        );
+      },
+    );
+
+    if (widget.hasAddContactButton == true) {
+      if (_responsiveUtils.isScreenWithShortestSide(context)) {
+        return Container(
+          color: Colors.transparent,
+          width: double.infinity,
+          padding: const EdgeInsets.all(16),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              itemTagEditor,
+              const SizedBox(height: 16),
+              _buildAddRecipientButton(context, maxWidth: double.infinity)
+            ],
+          ),
+        );
+      } else {
+        return Container(
+          color: Colors.transparent,
+          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+          child: Row(
+            children: [
+              Expanded(child: itemTagEditor),
+              const SizedBox(width: 12),
+              _buildAddRecipientButton(context)
+            ],
+          ),
+        );
+      }
+    } else {
+      return itemTagEditor;
+    }
+  }
+
+  bool _isDuplicatedRecipient(String inputEmail) {
+    if (inputEmail.isEmpty) {
+      return false;
+    }
+    return listEmailAddress
+      .map((emailAddress) => emailAddress.email)
+      .whereNotNull()
+      .contains(inputEmail);
+  }
+
+  FutureOr<List<SuggestionEmailAddress>> _findSuggestions(String query) async {
+    if (_gapBetweenTagChangedAndFindSuggestion.isActive) {
+      return [];
+    }
+
+    final processedQuery = query.trim();
+
+    if (processedQuery.isEmpty) {
+      return [];
+    }
+
+    final teamMailSuggestion = List<SuggestionEmailAddress>.empty(growable: true);
+    if (processedQuery.isNotEmpty && widget.onSuggestionCallback != null) {
+      final addedEmailAddresses = await widget.onSuggestionCallback!(processedQuery);
+      final listSuggestionEmailAddress = addedEmailAddresses
+        .map((emailAddress) => _toSuggestionEmailAddress(emailAddress, listEmailAddress))
+        .toList();
+      teamMailSuggestion.addAll(listSuggestionEmailAddress);
+    }
+
+    teamMailSuggestion.addAll(_matchedSuggestionEmailAddress(processedQuery, listEmailAddress));
+
+    return teamMailSuggestion.toSet().toList();
+  }
+
+  SuggestionEmailAddress _toSuggestionEmailAddress(
+      EmailAddress item,
+      List<EmailAddress> addedEmailAddresses
+  ) {
+    if (addedEmailAddresses.contains(item)) {
+      return SuggestionEmailAddress(item, state: SuggestionEmailState.duplicated);
+    } else {
+      return SuggestionEmailAddress(item);
+    }
+  }
+
+  Iterable<SuggestionEmailAddress> _matchedSuggestionEmailAddress(
+    String query,
+    List<EmailAddress> addedEmailAddress
+  ) {
+    return addedEmailAddress
+      .where((addedMail) => addedMail.emailAddress.contains(query))
+      .map((emailAddress) => SuggestionEmailAddress(emailAddress, state: SuggestionEmailState.duplicated));
+  }
+
+  bool _isValidAllEmailAddress(List<EmailAddress> addedEmailAddress) {
+    return addedEmailAddress.every((addedMail) => addedMail.emailAddress.isEmail);
+  }
+
+  bool _inputFieldIsEmpty() {
+    return widget.controller?.text.isEmpty == true;
+  }
+
+  Widget _buildAddRecipientButton(BuildContext context, {double? maxWidth}) {
+    return (ButtonBuilder(_imagePaths.icAddIdentity)
+      ..key(const Key('button_add_recipient'))
+      ..decoration(BoxDecoration(
+          borderRadius: BorderRadius.circular(12),
+          color: AppColor.colorTextButton))
+      ..paddingIcon(const EdgeInsets.only(right: 8))
+      ..iconColor(Colors.white)
+      ..maxWidth(maxWidth ?? 167)
+      ..size(20)
+      ..radiusSplash(12)
+      ..padding(const EdgeInsets.symmetric(vertical: 12))
+      ..textStyle(const TextStyle(
+          fontSize: 16,
+          color: Colors.white,
+          fontWeight: FontWeight.w500))
+      ..onPressActionClick(() {
+        if (_isValidAllEmailAddress(listEmailAddress) && _inputFieldIsEmpty()) {
+          widget.onAddContactCallback?.call(List.from(listEmailAddress));
+          setState(() {
+            widget.controller?.clear();
+            listEmailAddress.clear();
+          });
+        } else {
+          widget.onExceptionCallback?.call();
+        }
+      })
+      ..text(AppLocalizations.of(context).addRecipientButton, isVertical: false)
+    ).build();
+  }
+}
@@ -0,0 +1,57 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/views/text/input_decoration_builder.dart';
+import 'package:core/utils/build_utils.dart';
+import 'package:flutter/material.dart';
+
+class ContactInputDecorationBuilder extends InputDecorationBuilder {
+
+  @override
+  InputDecoration build() {
+    return InputDecoration(
+      enabledBorder: enabledBorder ?? const OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(12)),
+        borderSide: BorderSide(
+          width: 0.5,
+          color: AppColor.colorInputBorderCreateMailbox)),
+      focusedBorder: enabledBorder ?? const OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(12)),
+        borderSide: BorderSide(
+          width: 1,
+          color: AppColor.colorTextButton)),
+      errorBorder: errorBorder ?? const OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(12)),
+        borderSide: BorderSide(
+          width: 1,
+          color: AppColor.colorInputBorderErrorVerifyName)),
+      focusedErrorBorder: errorBorder ?? const OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(12)),
+        borderSide: BorderSide(
+          width: 0.5,
+          color: AppColor.colorInputBorderErrorVerifyName)),
+      prefixText: prefixText,
+      labelText: labelText,
+      floatingLabelBehavior: FloatingLabelBehavior.never,
+      labelStyle: labelStyle ?? const TextStyle(
+          color: Colors.black,
+          fontSize: 16,
+          fontWeight: FontWeight.w500),
+      hintText: hintText,
+      isDense: true,
+      hintStyle: hintStyle ?? const TextStyle(
+        color: AppColor.colorEmailAddressFull,
+        fontWeight: FontWeight.w500,
+        fontSize: 16),
+      contentPadding: const EdgeInsets.symmetric(
+        vertical: BuildUtils.isWeb ? 16 : 12,
+        horizontal: 12),
+      errorText: errorText,
+      errorStyle: errorTextStyle ?? const TextStyle(
+        color: AppColor.colorInputBorderErrorVerifyName,
+        fontSize: 13),
+      filled: true,
+      fillColor: errorText?.isNotEmpty == true
+        ? AppColor.colorInputBackgroundErrorVerifyName
+        : AppColor.colorInputBackgroundCreateMailbox);
+  }
+}
@@ -0,0 +1,82 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/style_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
+import 'package:model/extensions/email_address_extension.dart';
+import 'package:tmail_ui_user/features/contact/presentation/widgets/gradient_color_avatar_icon.dart';
+
+typedef DeleteContactCallbackAction = Function(EmailAddress contactDeleted);
+
+class ContactInputTagItem extends StatelessWidget {
+
+  final EmailAddress contact;
+  final DeleteContactCallbackAction? deleteContactCallbackAction;
+
+  const ContactInputTagItem(
+    this.contact,
+    {
+      Key? key,
+      this.deleteContactCallbackAction
+    }
+  ) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final imagePaths = Get.find<ImagePaths>();
+
+    final itemChild = Chip(
+      avatar: contact.displayName.isNotEmpty
+        ? GradientColorAvatarIcon(
+            contact.avatarColors,
+            iconSize: 20,
+            labelFontSize: 11,
+            label: contact.labelAvatar)
+        : null,
+      labelPadding: const EdgeInsets.symmetric(horizontal: 8),
+      padding: const EdgeInsets.all(6),
+      label: Text(
+        contact.asString(),
+        maxLines: 1,
+        softWrap: CommonTextStyle.defaultSoftWrap,
+        overflow: CommonTextStyle.defaultTextOverFlow,
+        style: const TextStyle(
+          fontSize: 14,
+          fontWeight: FontWeight.normal,
+          color: Colors.black)
+      ),
+      deleteIcon: deleteContactCallbackAction != null
+        ? SvgPicture.asset(
+            imagePaths.icClose,
+            width: 20,
+            height: 20,
+            color: AppColor.colorDeleteContactIcon,
+            fit: BoxFit.fill)
+        : null,
+      labelStyle: const TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.normal),
+      backgroundColor: _isValidEmailAddress(contact.emailAddress)
+        ? AppColor.colorBackgroundContactTagItem
+        : Colors.white,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(20),
+        side: BorderSide(
+          width: _isValidEmailAddress(contact.emailAddress) ? 0 : 1,
+          color: _isValidEmailAddress(contact.emailAddress)
+            ? AppColor.colorBackgroundContactTagItem
+            : AppColor.colorBorderEmailAddressInvalid
+        )
+      ),
+      onDeleted: () => deleteContactCallbackAction?.call(contact),
+    );
+
+    return Padding(
+      padding: const EdgeInsets.only(top: 10),
+      child: itemChild
+    );
+  }
+
+  bool _isValidEmailAddress(String value) => value.isEmail;
+}
@@ -0,0 +1,101 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/style_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
+import 'package:model/extensions/email_address_extension.dart';
+import 'package:tmail_ui_user/features/composer/presentation/widgets/suggestion_email_address.dart';
+import 'package:tmail_ui_user/features/contact/presentation/widgets/gradient_color_avatar_icon.dart';
+
+typedef SelectedContactCallbackAction = Function(EmailAddress contactSelected);
+
+class ContactSuggestionBoxItem extends StatelessWidget {
+
+  final SuggestionEmailAddress suggestionEmailAddress;
+  final SelectedContactCallbackAction? selectedContactCallbackAction;
+  final EdgeInsets? padding;
+  final ShapeBorder? shapeBorder;
+
+  const ContactSuggestionBoxItem(this.suggestionEmailAddress, {
+    Key? key,
+    this.padding,
+    this.shapeBorder,
+    this.selectedContactCallbackAction
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final imagePaths = Get.find<ImagePaths>();
+
+    final itemChild = Row(children: [
+      GradientColorAvatarIcon(
+        suggestionEmailAddress.emailAddress.avatarColors,
+        label: suggestionEmailAddress.emailAddress.labelAvatar,
+      ),
+      const SizedBox(width: 12),
+      Expanded(child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            suggestionEmailAddress.emailAddress.asString(),
+            maxLines: 1,
+            overflow: CommonTextStyle.defaultTextOverFlow,
+            softWrap: CommonTextStyle.defaultSoftWrap,
+            style: const TextStyle(
+              color: Colors.black,
+              fontSize: 16,
+              fontWeight: FontWeight.w500)
+          ),
+          if (suggestionEmailAddress.emailAddress.displayName.isNotEmpty)
+            Padding(
+              padding: const EdgeInsets.only(top: 2),
+              child: Text(
+                suggestionEmailAddress.emailAddress.emailAddress,
+                maxLines: 1,
+                overflow: CommonTextStyle.defaultTextOverFlow,
+                softWrap: CommonTextStyle.defaultSoftWrap,
+                style: const TextStyle(
+                  color: AppColor.colorEmailAddressFull,
+                  fontSize: 14,
+                  fontWeight: FontWeight.normal)
+              )
+            )
+        ]
+      )),
+      if (suggestionEmailAddress.state == SuggestionEmailState.duplicated)
+        Padding(
+          padding: const EdgeInsets.only(left: 12),
+          child: SvgPicture.asset(imagePaths.icFilterSelected,
+            width: 24,
+            height: 24,
+            fit: BoxFit.fill),
+        )
+    ]);
+
+    if (selectedContactCallbackAction != null && suggestionEmailAddress.state == SuggestionEmailState.valid) {
+      return Material(
+        color: Colors.transparent,
+        child: InkWell(
+          onTap: () => selectedContactCallbackAction?.call(suggestionEmailAddress.emailAddress),
+          customBorder: shapeBorder,
+          child: Padding(
+            padding: padding ?? const EdgeInsets.all(12),
+            child: itemChild,
+          ),
+        ),
+      );
+    } else {
+      return Material(
+        color: Colors.transparent,
+        child: Padding(
+          padding: padding ?? const EdgeInsets.all(12),
+          child: itemChild,
+        ),
+      );
+    }
+  }
+}
@@ -0,0 +1,44 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class GradientColorAvatarIcon extends StatelessWidget {
+
+  final List<Color> colors;
+  final double iconSize;
+  final double labelFontSize;
+  final String label;
+
+  const GradientColorAvatarIcon(this.colors, {
+    Key? key,
+    this.iconSize = 40,
+    this.label = '',
+    this.labelFontSize = 24.0,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: iconSize,
+      height: iconSize,
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(iconSize * 0.5),
+        border: Border.all(color: Colors.transparent),
+        gradient: LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          stops: const [0.0, 1.0],
+          colors: colors),
+        color: AppColor.avatarColor
+      ),
+      child: Text(
+        label,
+        style: TextStyle(
+          color: Colors.white,
+          fontSize: labelFontSize,
+          fontWeight: FontWeight.w600)
+      )
+    );
+  }
+}