Wyatt-FOSS/wyatt-packages
Wyatt-FOSS/wyatt-packages
6
2
Fork 0
Code Issues 20 Pull Requests 4 Actions Packages Projects Releases Activity

feat(ui_kit): make flat button fade on transition

Browse Source
This commit is contained in:
Hugo Pointcheval 2023-04-18 11:47:56 +02:00
parent 2baaf5c0bb
commit 32cc6e8288
Signed by: hugo
GPG Key ID: 3AAC487E131E00BC
1 changed files with 108 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart
View File

@ -130,115 +130,126 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
onPressed?.call(state.state); onPressed?.call(state.state);
bloc(context).onClickUpOut(); 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( decoration: BoxDecoration(
color: style.backgroundColors?.color, 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 // if no gradient colors => no default value
gradient: (style.backgroundColors?.isGradient ?? false) gradient: (style.backgroundColors?.isGradient ?? false)
? LinearGradient( ? LinearGradient(
colors: style.backgroundColors!.colors, colors: style.backgroundColors!.colors,
) )
: null, : null,
boxShadow: [
if (style.shadow != null) ...[style.shadow!]
],
borderRadius: style.radius, borderRadius: style.radius,
), ),
child: ConstrainedBox( child: DecoratedBox(
constraints: const BoxConstraints( decoration: BoxDecoration(
minWidth: 88, // If no border color => no default value
minHeight: 36, border: (style.borderColors != null && style.stroke != null)
), // min sizes for Material buttons ? (style.borderColors?.isGradient ?? false)
child: Padding( ? GradientBoxBorder(
padding: style.padding ?? EdgeInsets.zero, gradient: LinearGradient(
child: Row( colors: style.borderColors!.colors,
mainAxisSize: mainAxisSize ?? MainAxisSize.min, ),
mainAxisAlignment: MainAxisAlignment.spaceBetween, width: style.stroke!,
children: [ )
if (prefix != null && : Border.all(
(prefix is Icon?) && color: style.borderColors!.color,
((prefix as Icon?)?.color != null)) ...[ width: style.stroke!,
prefix! )
] else if (style.foregroundColors?.color != null && : 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 boxShadow: [
/// buttonStyle.label.style.color ?? if (style.shadow != null) ...[style.shadow!]
/// context.textTheme.labelLarge.color ],
/// borderRadius: style.radius,
/// Choose gradient ),
/// label.gradient ?? child: ConstrainedBox(
/// buttonStyle.foregroundColor.colors ?? constraints: const BoxConstraints(
/// null minWidth: 88,
/// minHeight: 36,
/// More infos in ThemeResolver class ), // min sizes for Material buttons
if (label != null) ...[ child: Padding(
Text( padding: style.padding ?? EdgeInsets.zero,
label!.data, child: Row(
style: label!.style ?? style.label, mainAxisSize: mainAxisSize ?? MainAxisSize.min,
textAlign: label!.textAlign, mainAxisAlignment: MainAxisAlignment.spaceBetween,
textDirection: label!.textDirection, children: [
softWrap: label!.softWrap, if (prefix != null &&
overflow: label!.overflow, (prefix is Icon?) &&
maxLines: label!.maxLines, ((prefix as Icon?)?.color != null)) ...[
selectionColor: label!.selectionColor, prefix!
).toGradient( ] else if (style.foregroundColors?.color != null &&
gradientColors: style.foregroundColors, 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()
],
],
), ),
), ),
), ),