From 32cc6e8288ae08915f52b362bf50d7a260923790 Mon Sep 17 00:00:00 2001 From: Hugo Pointcheval Date: Tue, 18 Apr 2023 11:47:56 +0200 Subject: [PATCH] feat(ui_kit): make flat button fade on transition --- .../flat_button/flat_button_screen.dart | 205 +++++++++--------- 1 file changed, 108 insertions(+), 97 deletions(-) diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart index da65300f..bd5648e1 100644 --- a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart +++ b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart @@ -130,115 +130,126 @@ class FlatButtonScreen extends CubitScreen { onPressed?.call(state.state); bloc(context).onClickUpOut(); }, - child: DecoratedBox( + child: AnimatedContainer( + // TODO(wyatt): make it configurable, and generalize it + duration: const Duration(milliseconds: 150), + curve: Curves.easeOut, decoration: BoxDecoration( color: style.backgroundColors?.color, - // If no border color => no default value - border: (style.borderColors != null && style.stroke != null) - ? (style.borderColors?.isGradient ?? false) - ? GradientBoxBorder( - gradient: LinearGradient( - colors: style.borderColors!.colors, - ), - width: style.stroke!, - ) - : Border.all( - color: style.borderColors!.color, - width: style.stroke!, - ) - : null, + // if no gradient colors => no default value gradient: (style.backgroundColors?.isGradient ?? false) ? LinearGradient( colors: style.backgroundColors!.colors, ) : null, - boxShadow: [ - if (style.shadow != null) ...[style.shadow!] - ], + borderRadius: style.radius, ), - child: ConstrainedBox( - constraints: const BoxConstraints( - minWidth: 88, - minHeight: 36, - ), // min sizes for Material buttons - child: Padding( - padding: style.padding ?? EdgeInsets.zero, - child: Row( - mainAxisSize: mainAxisSize ?? MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - if (prefix != null && - (prefix is Icon?) && - ((prefix as Icon?)?.color != null)) ...[ - prefix! - ] else if (style.foregroundColors?.color != null && - prefix != null) ...[ - ColorFiltered( - colorFilter: ColorFilter.mode( - style.foregroundColors!.color, - BlendMode.srcIn, - ), - child: prefix, - ) - ] else ...[ - prefix ?? const SizedBox.shrink() - ], - Gap(style.padding?.vertical ?? 10), + child: DecoratedBox( + decoration: BoxDecoration( + // If no border color => no default value + border: (style.borderColors != null && style.stroke != null) + ? (style.borderColors?.isGradient ?? false) + ? GradientBoxBorder( + gradient: LinearGradient( + colors: style.borderColors!.colors, + ), + width: style.stroke!, + ) + : Border.all( + color: style.borderColors!.color, + width: style.stroke!, + ) + : null, - /// Choose color - /// buttonStyle.label.style.color ?? - /// context.textTheme.labelLarge.color - /// - /// Choose gradient - /// label.gradient ?? - /// buttonStyle.foregroundColor.colors ?? - /// null - /// - /// More infos in ThemeResolver class - if (label != null) ...[ - Text( - label!.data, - style: label!.style ?? style.label, - textAlign: label!.textAlign, - textDirection: label!.textDirection, - softWrap: label!.softWrap, - overflow: label!.overflow, - maxLines: label!.maxLines, - selectionColor: label!.selectionColor, - ).toGradient( - gradientColors: style.foregroundColors, - ) + boxShadow: [ + if (style.shadow != null) ...[style.shadow!] + ], + borderRadius: style.radius, + ), + child: ConstrainedBox( + constraints: const BoxConstraints( + minWidth: 88, + minHeight: 36, + ), // min sizes for Material buttons + child: Padding( + padding: style.padding ?? EdgeInsets.zero, + child: Row( + mainAxisSize: mainAxisSize ?? MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + if (prefix != null && + (prefix is Icon?) && + ((prefix as Icon?)?.color != null)) ...[ + prefix! + ] else if (style.foregroundColors?.color != null && + prefix != null) ...[ + ColorFiltered( + colorFilter: ColorFilter.mode( + style.foregroundColors!.color, + BlendMode.srcIn, + ), + child: prefix, + ) + ] else ...[ + prefix ?? const SizedBox.shrink() + ], + Gap(style.padding?.vertical ?? 10), + + /// Choose color + /// buttonStyle.label.style.color ?? + /// context.textTheme.labelLarge.color + /// + /// Choose gradient + /// label.gradient ?? + /// buttonStyle.foregroundColor.colors ?? + /// null + /// + /// More infos in ThemeResolver class + if (label != null) ...[ + Text( + label!.data, + style: label!.style ?? style.label, + textAlign: label!.textAlign, + textDirection: label!.textDirection, + softWrap: label!.softWrap, + overflow: label!.overflow, + maxLines: label!.maxLines, + selectionColor: label!.selectionColor, + ).toGradient( + gradientColors: style.foregroundColors, + ) + ], + Gap(style.padding?.vertical ?? 10), + if (suffix != null && + (suffix is Icon?) && + ((suffix as Icon?)?.color != null)) ...[ + suffix! + ] else if (style.foregroundColors?.colors != null && + style.foregroundColors!.colors.isNotEmpty && + suffix != null) ...[ + ColorFiltered( + colorFilter: ColorFilter.mode( + style.foregroundColors!.colors.last, + BlendMode.srcIn, + ), + child: suffix, + ) + ] else if (style.foregroundColors?.color != null && + suffix != null) ...[ + ColorFiltered( + colorFilter: ColorFilter.mode( + style.foregroundColors!.color, + BlendMode.srcIn, + ), + child: suffix, + ) + ] else ...[ + suffix ?? const SizedBox.shrink() + ], ], - Gap(style.padding?.vertical ?? 10), - if (suffix != null && - (suffix is Icon?) && - ((suffix as Icon?)?.color != null)) ...[ - suffix! - ] else if (style.foregroundColors?.colors != null && - style.foregroundColors!.colors.isNotEmpty && - suffix != null) ...[ - ColorFiltered( - colorFilter: ColorFilter.mode( - style.foregroundColors!.colors.last, - BlendMode.srcIn, - ), - child: suffix, - ) - ] else if (style.foregroundColors?.color != null && - suffix != null) ...[ - ColorFiltered( - colorFilter: ColorFilter.mode( - style.foregroundColors!.color, - BlendMode.srcIn, - ), - child: suffix, - ) - ] else ...[ - suffix ?? const SizedBox.shrink() - ], - ], + ), ), ), ),