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);
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()
],
],
),
),
),
),