From 476b929b908002d7caeb7c365064f5a4562d1628 Mon Sep 17 00:00:00 2001 From: dab246 Date: Mon, 24 Apr 2023 15:01:59 +0700 Subject: [PATCH] TF-1711 Fix label displayed overlap for create identity button (cherry picked from commit aa939af0d136d3d11f13c14ca3b550fe1513d270) --- .../widget/material_text_icon_button.dart | 68 +++++++++++++++++++ .../profiles/identities/identities_view.dart | 6 +- .../widgets/identities_header_widget.dart | 48 ++++++------- 3 files changed, 88 insertions(+), 34 deletions(-) create mode 100644 lib/features/base/widget/material_text_icon_button.dart diff --git a/lib/features/base/widget/material_text_icon_button.dart b/lib/features/base/widget/material_text_icon_button.dart new file mode 100644 index 000000000..32783f739 --- /dev/null +++ b/lib/features/base/widget/material_text_icon_button.dart @@ -0,0 +1,68 @@ + +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; + +typedef OnTapMaterialTextIconButton = Function(); + +class MaterialTextIconButton extends StatelessWidget { + + final String label; + final String icon; + final OnTapMaterialTextIconButton onTap; + final double borderRadius; + final double elevation; + final double iconSize; + final Size? minimumSize; + final Color? labelColor; + final Color? iconColor; + final Color? backgroundColor; + final TextStyle? labelStyle; + final EdgeInsets? padding; + + const MaterialTextIconButton({ + Key? key, + required this.label, + required this.icon, + required this.onTap, + this.borderRadius = 12, + this.elevation = 0, + this.iconSize = 24, + this.labelColor, + this.iconColor, + this.backgroundColor, + this.padding, + this.labelStyle, + this.minimumSize + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return ElevatedButton.icon( + onPressed: onTap, + icon: SvgPicture.asset( + icon, + width: iconSize, + height: iconSize, + fit: BoxFit.fill, + colorFilter: (iconColor ?? AppColor.colorTextButton).asFilter(), + ), + label: Text( + label, + style: labelStyle ?? TextStyle( + fontSize: 16, + color: labelColor ?? AppColor.colorTextButton, + fontWeight: FontWeight.w500 + ), + ), + style: ElevatedButton.styleFrom( + foregroundColor: labelColor ?? AppColor.colorTextButton, + backgroundColor: backgroundColor ?? AppColor.colorCreateNewIdentityButton, + elevation: 0, + padding: padding, + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(borderRadius)), + minimumSize: minimumSize + ) + ); + } +} \ No newline at end of file diff --git a/lib/features/manage_account/presentation/profiles/identities/identities_view.dart b/lib/features/manage_account/presentation/profiles/identities/identities_view.dart index 396758c92..75e4092af 100644 --- a/lib/features/manage_account/presentation/profiles/identities/identities_view.dart +++ b/lib/features/manage_account/presentation/profiles/identities/identities_view.dart @@ -18,7 +18,6 @@ class IdentitiesView extends GetWidget with PopupMenuWidge @override Widget build(BuildContext context) { return Container( - color: Colors.transparent, margin: const EdgeInsets.all(24), child: _responsiveUtils.isWebDesktop(context) ? _buildIdentitiesViewWebDesktop(context) @@ -28,10 +27,9 @@ class IdentitiesView extends GetWidget with PopupMenuWidge Widget _buildIdentitiesViewMobile(BuildContext context) { return Column( + crossAxisAlignment: CrossAxisAlignment.start, children: [ IdentitiesHeaderWidget( - imagePaths: _imagePaths, - responsiveUtils: _responsiveUtils, onAddNewIdentityAction: () => controller.goToCreateNewIdentity(context), ), const SizedBox(height: 12), @@ -51,8 +49,6 @@ class IdentitiesView extends GetWidget with PopupMenuWidge SizedBox( width: 224, child: IdentitiesHeaderWidget( - imagePaths: _imagePaths, - responsiveUtils: _responsiveUtils, onAddNewIdentityAction: () => controller.goToCreateNewIdentity(context), ) ), diff --git a/lib/features/manage_account/presentation/profiles/identities/widgets/identities_header_widget.dart b/lib/features/manage_account/presentation/profiles/identities/widgets/identities_header_widget.dart index 6d581de4c..7d4ca163d 100644 --- a/lib/features/manage_account/presentation/profiles/identities/widgets/identities_header_widget.dart +++ b/lib/features/manage_account/presentation/profiles/identities/widgets/identities_header_widget.dart @@ -1,8 +1,8 @@ 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:tmail_ui_user/features/base/widget/material_text_icon_button.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; typedef OnAddNewIdentityAction = Function(); @@ -11,20 +11,18 @@ class IdentitiesHeaderWidget extends StatelessWidget { const IdentitiesHeaderWidget({ Key? key, - required this.imagePaths, - required this.responsiveUtils, - this.onAddNewIdentityAction, + required this.onAddNewIdentityAction, }) : super(key: key); - final ImagePaths imagePaths; - final ResponsiveUtils responsiveUtils; - final OnAddNewIdentityAction? onAddNewIdentityAction; + final OnAddNewIdentityAction onAddNewIdentityAction; @override Widget build(BuildContext context) { - return Container( - color: Colors.transparent, - child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ + final imagePaths = Get.find(); + + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ Text( AppLocalizations.of(context).identities, style: const TextStyle( @@ -39,24 +37,16 @@ class IdentitiesHeaderWidget extends StatelessWidget { fontWeight: FontWeight.normal, color: AppColor.colorSettingExplanation)), const SizedBox(height: 24), - (ButtonBuilder(imagePaths.icAddIdentity) - ..key(const Key('button_add_identity')) - ..decoration(BoxDecoration( - borderRadius: BorderRadius.circular(12), - color: AppColor.colorCreateNewIdentityButton)) - ..paddingIcon(const EdgeInsets.only(right: 8)) - ..iconColor(AppColor.colorTextButton) - ..size(28) - ..radiusSplash(12) - ..padding(const EdgeInsets.symmetric(vertical: 10)) - ..textStyle(const TextStyle( - fontSize: 16, - color: AppColor.colorTextButton, - fontWeight: FontWeight.w500)) - ..onPressActionClick(() => onAddNewIdentityAction?.call()) - ..text(AppLocalizations.of(context).createNewIdentity, isVertical: false) - ).build() - ]), + MaterialTextIconButton( + key: const Key('button_add_identity'), + label: AppLocalizations.of(context).createNewIdentity, + icon: imagePaths.icAddIdentity, + iconSize: 28, + padding: const EdgeInsets.all(16), + minimumSize: const Size(double.infinity, 44), + onTap: onAddNewIdentityAction + ) + ] ); } } \ No newline at end of file