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

feat(ui): add animated decorated box + animate all buttons + customize duration in style

Browse Source
This commit is contained in:
Hugo Pointcheval 2023-04-28 15:33:26 +02:00
parent abd5e1b558
commit 4ebb679a29
Signed by: hugo
GPG Key ID: 3AAC487E131E00BC
18 changed files with 352 additions and 350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/file_selection_button_theme_extension_default.dart
View File

@ -47,6 +47,7 @@ class FileSelectionButtonThemeExtensionDefault
padding: const EdgeInsets.symmetric(horizontal: 10),
foregroundColors: MultiColor.single(theme.colorScheme.onPrimary),
backgroundColors: MultiColor.single(theme.colorScheme.primary),
animationDuration: Duration.zero,
);
return FileSelectionButtonThemeExtensionDefault(

1
packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/flat_button_theme_extension_default.dart
View File

@ -46,6 +46,7 @@ class FlatButtonThemeExtensionDefault extends FlatButtonThemeExtension {
padding: theme.buttonTheme.padding,
foregroundColors: foregroundColor,
backgroundColors: backgroundColor,
animationDuration: Duration.zero,
);
return FlatButtonThemeExtensionDefault(

1
packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/simple_icon_button_theme_extension_default.dart
View File

@ -46,6 +46,7 @@ class SimpleIconButtonThemeExtensionDefault
padding: theme.buttonTheme.padding,
foregroundColors: foregroundColor,
backgroundColors: backgroundColor,
animationDuration: Duration.zero,
);
return SimpleIconButtonThemeExtensionDefault(

1
packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/symbol_button_theme_extension_default.dart
View File

@ -48,6 +48,7 @@ class SymbolButtonThemeExtensionDefault extends SymbolButtonThemeExtension {
padding: theme.buttonTheme.padding,
foregroundColors: foregroundColor,
backgroundColors: backgroundColor,
animationDuration: Duration.zero,
);
return SymbolButtonThemeExtensionDefault(

9
packages/wyatt_ui_components/lib/src/domain/entities/buttons/button_style.dart
View File

@ -31,6 +31,7 @@ abstract class ButtonStyle<T> extends ThemeStyle<T> {
this.borderColors,
this.stroke,
this.shadow,
this.animationDuration,
});
/// Button radius
@ -68,9 +69,15 @@ abstract class ButtonStyle<T> extends ThemeStyle<T> {
/// Default to `null`
final BoxShadow? shadow;
/// Animation duration
///
/// Default to `Duration.zero`
final Duration? animationDuration;
@override
String toString() =>
'ButtonStyle(radius: $radius, padding: $padding, foregroundColors: '
'$foregroundColors, backgroundColors: $backgroundColors, borderColors: '
'$borderColors, stroke: $stroke, shadow: $shadow)';
'$borderColors, stroke: $stroke, shadow: $shadow, '
'animationDuration: $animationDuration)';
}

10
packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_style.dart
View File

@ -16,6 +16,7 @@
import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
@ -37,6 +38,7 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
super.borderColors,
super.stroke,
super.shadow,
super.animationDuration,
});
/// Merges non-null `b` attributes in `a`
@ -61,6 +63,7 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
borderColors: b.borderColors,
stroke: b.stroke,
shadow: b.shadow,
animationDuration: b.animationDuration,
);
}
@ -96,6 +99,11 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
stroke: lerpDouble(a.stroke, b.stroke, t),
shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
animationDuration: lerpDuration(
a.animationDuration ?? Duration.zero,
b.animationDuration ?? Duration.zero,
t,
),
);
}
@ -124,6 +132,7 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
MultiColor? borderColors,
double? stroke,
BoxShadow? shadow,
Duration? animationDuration,
}) =>
FileSelectionButtonStyle(
titleStyle: titleStyle ?? this.titleStyle,
@ -135,5 +144,6 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
borderColors: borderColors ?? this.borderColors,
stroke: stroke ?? this.stroke,
shadow: shadow ?? this.shadow,
animationDuration: animationDuration ?? this.animationDuration,
);
}

10
packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.dart
View File

@ -16,6 +16,7 @@
import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
@ -36,6 +37,7 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
super.borderColors,
super.stroke,
super.shadow,
super.animationDuration,
});
/// Merges non-null `b` attributes in `a`
@ -59,6 +61,7 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
borderColors: b.borderColors,
stroke: b.stroke,
shadow: b.shadow,
animationDuration: b.animationDuration,
);
}
@ -93,6 +96,11 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
stroke: lerpDouble(a.stroke, b.stroke, t),
shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
animationDuration: lerpDuration(
a.animationDuration ?? Duration.zero,
b.animationDuration ?? Duration.zero,
t,
),
);
}
@ -115,6 +123,7 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
MultiColor? borderColors,
double? stroke,
BoxShadow? shadow,
Duration? animationDuration,
}) =>
FlatButtonStyle(
labelStyle: labelStyle ?? this.labelStyle,
@ -125,5 +134,6 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
borderColors: borderColors ?? this.borderColors,
stroke: stroke ?? this.stroke,
shadow: shadow ?? this.shadow,
animationDuration: animationDuration ?? this.animationDuration,
);
}

10
packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_style.dart
View File

@ -16,6 +16,7 @@
import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
@ -36,6 +37,7 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
super.borderColors,
super.stroke,
super.shadow,
super.animationDuration,
});
/// Merges non-null `b` attributes in `a`
@ -59,6 +61,7 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
borderColors: b.borderColors,
stroke: b.stroke,
shadow: b.shadow,
animationDuration: b.animationDuration,
);
}
@ -93,6 +96,11 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
stroke: lerpDouble(a.stroke, b.stroke, t),
shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
animationDuration: lerpDuration(
a.animationDuration ?? Duration.zero,
b.animationDuration ?? Duration.zero,
t,
),
);
}
@ -115,6 +123,7 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
MultiColor? borderColors,
double? stroke,
BoxShadow? shadow,
Duration? animationDuration,
}) =>
SimpleIconButtonStyle(
dimension: dimension ?? this.dimension,
@ -125,5 +134,6 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
borderColors: borderColors ?? this.borderColors,
stroke: stroke ?? this.stroke,
shadow: shadow ?? this.shadow,
animationDuration: animationDuration ?? this.animationDuration,
);
}

10
packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_style.dart
View File

@ -16,6 +16,7 @@
import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
@ -37,6 +38,7 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
super.borderColors,
super.stroke,
super.shadow,
super.animationDuration,
});
/// Merges non-null `b` attributes in `a`
@ -61,6 +63,7 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
borderColors: b.borderColors,
stroke: b.stroke,
shadow: b.shadow,
animationDuration: b.animationDuration,
);
}
@ -96,6 +99,11 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
stroke: lerpDouble(a.stroke, b.stroke, t),
shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
animationDuration: lerpDuration(
a.animationDuration ?? Duration.zero,
b.animationDuration ?? Duration.zero,
t,
),
);
}
@ -124,6 +132,7 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
MultiColor? borderColors,
double? stroke,
BoxShadow? shadow,
Duration? animationDuration,
}) =>
SymbolButtonStyle(
labelStyle: labelStyle ?? this.labelStyle,
@ -135,5 +144,6 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
borderColors: borderColors ?? this.borderColors,
stroke: stroke ?? this.stroke,
shadow: shadow ?? this.shadow,
animationDuration: animationDuration ?? this.animationDuration,
);
}

4
packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
View File

@ -49,10 +49,10 @@ class Buttons extends DemoPage {
SymbolButtons(),
Gap(20),
SimpleIconButtons(),
Gap(20),
FileSelectionButtons()
],
),
const Gap(20),
const Align(child: FileSelectionButtons()),
],
);
}

68
packages/wyatt_ui_kit/lib/src/components/buttons/animated_decorated_box.dart Normal file
View File

@ -0,0 +1,68 @@
// Copyright (C) 2023 WYATT GROUP
// Please see the AUTHORS file for details.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import 'package:flutter/material.dart';
/// {@template animated_decorated_box}
/// A wrapper for [DecoratedBox] that animates the decoration when it changes.
/// {@endtemplate}
class AnimatedDecoratedBox extends ImplicitlyAnimatedWidget {
/// {@macro animated_decorated_box}
const AnimatedDecoratedBox({
required super.duration,
this.decoration,
this.child,
super.key,
});
/// The decoration to paint behind the [child].
///
/// A shorthand for specifying just a solid color is available in the
/// constructor: set the `color` argument instead of the `decoration`
/// argument.
final Decoration? decoration;
/// The [child] contained by the box.
final Widget? child;
@override
ImplicitlyAnimatedWidgetState<ImplicitlyAnimatedWidget> createState() =>
_AnimatedDecoratedBoxState();
}
class _AnimatedDecoratedBoxState
extends AnimatedWidgetBaseState<AnimatedDecoratedBox> {
DecorationTween? _decoration;
@override
Widget build(BuildContext context) {
final Animation<double> animation = this.animation;
return DecoratedBox(
decoration: _decoration?.evaluate(animation) ??
widget.decoration ??
const BoxDecoration(),
child: widget.child,
);
}
@override
void forEachTween(TweenVisitor<dynamic> visitor) {
_decoration = visitor(
_decoration,
widget.decoration,
(dynamic value) => DecorationTween(begin: value as Decoration),
) as DecorationTween?;
}
}

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

@ -19,6 +19,7 @@ import 'package:flutter/services.dart';
import 'package:gap/gap.dart';
import 'package:wyatt_bloc_helper/wyatt_bloc_helper.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/buttons/animated_decorated_box.dart';
import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
import 'package:wyatt_ui_kit/src/components/buttons/cubit/state_listener.dart';
import 'package:wyatt_ui_kit/src/components/buttons/flat_button/flat_button_theme_resolver.dart';
@ -130,119 +131,109 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
onPressed?.call(state.state);
bloc(context).onClickUpOut();
},
child: AnimatedContainer(
// TODO(wyatt): make it configurable, and generalize it
duration: const Duration(milliseconds: 150),
curve: Curves.easeOut,
child: AnimatedDecoratedBox(
duration: style.animationDuration ?? Duration.zero,
decoration: BoxDecoration(
color: style.backgroundColors?.color,
// if no gradient colors => no default value
gradient: (style.backgroundColors?.isGradient ?? false)
? LinearGradient(
colors: style.backgroundColors!.colors,
)
: null,
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,
boxShadow: [
if (style.shadow != null) ...[style.shadow!]
],
borderRadius: style.radius,
),
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,
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) ...[
GradientText.fromWrapper(
label!,
style: style.labelStyle,
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()
],
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) ...[
GradientText.fromWrapper(
label!,
style: style.labelStyle,
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()
],
],
),
),
),

4
packages/wyatt_ui_kit/lib/src/components/buttons/simple_icon_button/simple_icon_screen.dart
View File

@ -18,6 +18,7 @@ import 'package:flutter/material.dart' hide ButtonStyle;
import 'package:flutter/services.dart';
import 'package:wyatt_bloc_helper/wyatt_bloc_helper.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/buttons/animated_decorated_box.dart';
import 'package:wyatt_ui_kit/src/components/buttons/cubit/state_listener.dart';
import 'package:wyatt_ui_kit/src/components/buttons/simple_icon_button/simple_icon_button_theme_resolver.dart';
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
@ -126,7 +127,8 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
dimension: style.dimension,
child: AspectRatio(
aspectRatio: 1,
child: DecoratedBox(
child: AnimatedDecoratedBox(
duration: style.animationDuration ?? Duration.zero,
decoration: BoxDecoration(
color: style.backgroundColors?.color,
// If no border color => no default value

4
packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_screen.dart
View File

@ -19,6 +19,7 @@ import 'package:flutter/services.dart';
import 'package:gap/gap.dart';
import 'package:wyatt_bloc_helper/wyatt_bloc_helper.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/buttons/animated_decorated_box.dart';
import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
import 'package:wyatt_ui_kit/src/components/buttons/cubit/selectable_button_cubit.dart';
import 'package:wyatt_ui_kit/src/components/buttons/cubit/state_listener.dart';
@ -154,7 +155,8 @@ class SymbolButtonScreen
dimension: style.dimension,
child: AspectRatio(
aspectRatio: 1,
child: DecoratedBox(
child: AnimatedDecoratedBox(
duration: style.animationDuration ?? Duration.zero,
decoration: BoxDecoration(
color: style.backgroundColors?.color,
// If no border color => no default value

74
packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/file_selection_button_theme_extension_impl.dart
View File

@ -16,6 +16,7 @@
import 'package:flutter/material.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/core/design_system/colors.dart';
class FileSelectionButtonThemeExtensionImpl
extends FileSelectionButtonThemeExtension {
@ -36,50 +37,39 @@ class FileSelectionButtonThemeExtensionImpl
subtitleStyle: theme.textTheme.labelSmall,
radius: BorderRadius.circular(12),
padding: const EdgeInsets.all(13),
foregroundColors: const MultiColor.single(Color(0xFF24262A)),
backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
borderColors: const MultiColor([
Color(0xFFDDE0E3),
Color(0xFFCACCD4),
]),
foregroundColors: const MultiColor.single(WyattColors.black),
backgroundColors: const MultiColor.single(WyattColors.light),
borderColors: MultiColor.single(WyattColors.black.withOpacity(0.4)),
stroke: 2,
animationDuration: const Duration(milliseconds: 150),
);
return FileSelectionButtonThemeExtensionImpl(
normalStyle: style,
disabledStyle: style.copyWith(
foregroundColors:
MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
borderColors:
MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
foregroundColors: MultiColor.single(WyattColors.black.withOpacity(0.4)),
backgroundColors: const MultiColor.single(WyattColors.light),
borderColors: WyattColors.lightGradient,
),
hoveredStyle: style.copyWith(
backgroundColors:
MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
MultiColor.single(WyattColors.black.withOpacity(0.04)),
),
focusedStyle: style.copyWith(stroke: 4),
tappedStyle: style.copyWith(
backgroundColors:
MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
backgroundColors: MultiColor.single(WyattColors.black.withOpacity(0.1)),
),
invalidStyle: style.copyWith(
subtitleStyle: theme.textTheme.labelSmall?.copyWith(
fontSize: 11,
fontWeight: FontWeight.w400,
color: const Color(0xFFF44464),
color: WyattColors.red1,
),
borderColors: const MultiColor([
Color(0xFFF44464),
Color(0xFFF44464),
]),
borderColors: WyattColors.redGradient,
),
// Unused
selectedStyle: style.copyWith(
foregroundColors: const MultiColor.single(Color(0xFF24262A)),
borderColors: const MultiColor([
Color(0xFF00D16C),
Color(0xFF00D16C),
]),
foregroundColors: const MultiColor.single(WyattColors.black),
borderColors: WyattColors.greenGradient,
),
);
}
@ -91,50 +81,40 @@ class FileSelectionButtonThemeExtensionImpl
subtitleStyle: theme.textTheme.labelSmall,
radius: BorderRadius.circular(12),
padding: const EdgeInsets.all(13),
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor.single(Color(0xFF24262A)),
borderColors: const MultiColor([
Color(0xFF24262A),
Color(0xFF24262A),
]),
foregroundColors: const MultiColor.single(WyattColors.light),
backgroundColors: const MultiColor.single(WyattColors.black),
borderColors: MultiColor.single(WyattColors.light.withOpacity(0.4)),
stroke: 2,
animationDuration: const Duration(milliseconds: 150),
);
return FileSelectionButtonThemeExtensionImpl(
normalStyle: style,
disabledStyle: style.copyWith(
foregroundColors:
MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
backgroundColors: const MultiColor.single(Color(0xFF24262A)),
borderColors:
MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
MultiColor.single(WyattColors.light.withOpacity(0.04)),
backgroundColors: const MultiColor.single(WyattColors.black),
borderColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
),
hoveredStyle: style.copyWith(
backgroundColors:
MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
MultiColor.single(WyattColors.light.withOpacity(0.04)),
),
focusedStyle: style.copyWith(stroke: 4),
tappedStyle: style.copyWith(
backgroundColors:
MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.1)),
),
invalidStyle: style.copyWith(
subtitleStyle: theme.textTheme.labelSmall?.copyWith(
fontSize: 11,
fontWeight: FontWeight.w400,
color: const Color(0xFFF44464),
color: WyattColors.red1,
),
borderColors: const MultiColor([
Color(0xFFF44464),
Color(0xFFF44464),
]),
borderColors: WyattColors.redGradient,
),
// Unused
selectedStyle: style.copyWith(
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
borderColors: const MultiColor([
Color(0xFF00D16C),
Color(0xFF00D16C),
]),
foregroundColors: const MultiColor.single(WyattColors.light),
borderColors: WyattColors.greenGradient,
),
);
}

97
packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/flat_button_theme_extension_impl.dart
View File

@ -16,6 +16,7 @@
import 'package:flutter/material.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/core/design_system/colors.dart';
class FlatButtonThemeExtensionImpl extends FlatButtonThemeExtension {
const FlatButtonThemeExtensionImpl({
@ -32,54 +33,42 @@ class FlatButtonThemeExtensionImpl extends FlatButtonThemeExtension {
labelStyle: theme.textTheme.labelLarge,
radius: BorderRadius.circular(15),
padding: const EdgeInsets.all(10),
foregroundColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
borderColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
foregroundColors: WyattColors.blueBtnGradient,
backgroundColors: const MultiColor.single(WyattColors.light),
borderColors: WyattColors.blueBtnGradient,
stroke: 3,
animationDuration: const Duration(milliseconds: 150),
);
return FlatButtonThemeExtensionImpl(
normalStyle: style,
disabledStyle: style.copyWith(
labelStyle: theme.textTheme.labelLarge?.copyWith(
color: const Color(0xFF3C97FB).withOpacity(0.4),
color: WyattColors.blue1.withOpacity(0.4),
),
foregroundColors:
MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
borderColors:
MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
foregroundColors: MultiColor.single(WyattColors.blue1.withOpacity(0.4)),
backgroundColors: const MultiColor.single(WyattColors.light),
borderColors: MultiColor.single(WyattColors.blue1.withOpacity(0.4)),
stroke: 1,
),
hoveredStyle: style.copyWith(
labelStyle: theme.textTheme.labelLarge?.copyWith(
color: const Color(0xFFDDE0E3),
color: WyattColors.light,
),
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
foregroundColors: const MultiColor.single(WyattColors.light),
backgroundColors: WyattColors.blueBtnHoverGradient,
borderColors: WyattColors.blueBtnHoverGradient,
),
focusedStyle: style.copyWith(
stroke: 5,
borderColors: WyattColors.blueBtnFocusGradient,
),
focusedStyle: style.copyWith(stroke: 5),
tappedStyle: style.copyWith(
labelStyle: theme.textTheme.labelLarge?.copyWith(
color: const Color(0xFFDDE0E3),
color: WyattColors.light,
),
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor([
Color(0xFF4B68FF),
Color(0xFF3531F5),
]),
borderColors: const MultiColor([
Color(0xFF4B68FF),
Color(0xFF3531F5),
]),
foregroundColors: const MultiColor.single(WyattColors.light),
backgroundColors: WyattColors.darkBlueGradient,
borderColors: WyattColors.darkBlueGradient,
),
);
}
@ -90,43 +79,37 @@ class FlatButtonThemeExtensionImpl extends FlatButtonThemeExtension {
labelStyle: theme.textTheme.labelLarge,
radius: BorderRadius.circular(15),
padding: const EdgeInsets.all(10),
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor.single(Color(0xFF24262A)),
borderColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
foregroundColors: const MultiColor.single(WyattColors.light),
backgroundColors: const MultiColor.single(WyattColors.black),
borderColors: WyattColors.blueBtnGradient,
stroke: 3,
animationDuration: const Duration(milliseconds: 150),
);
return FlatButtonThemeExtensionImpl(
normalStyle: style,
disabledStyle: style.copyWith(
labelStyle: theme.textTheme.labelLarge?.copyWith(
color: const Color(0xFF60656A),
color: WyattColors.gray1,
),
foregroundColors: const MultiColor.single(Color(0xFF60656A)),
backgroundColors: const MultiColor.single(Color(0xFF33373E)),
borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
foregroundColors: const MultiColor.single(WyattColors.gray1),
backgroundColors:
MultiColor.single(WyattColors.light.withOpacity(0.04)),
borderColors: WyattColors.grayGradient,
stroke: 1,
),
hoveredStyle: style.copyWith(
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
foregroundColors: const MultiColor.single(WyattColors.light),
backgroundColors: WyattColors.blueBtnHoverGradient,
borderColors: WyattColors.blueBtnHoverGradient,
),
focusedStyle: style.copyWith(
stroke: 5,
borderColors: WyattColors.blueBtnFocusGradient,
),
focusedStyle: style.copyWith(stroke: 5),
tappedStyle: style.copyWith(
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor([
Color(0xFF4B68FF),
Color(0xFF3531F5),
]),
borderColors: const MultiColor([
Color(0xFF4B68FF),
Color(0xFF3531F5),
]),
foregroundColors: const MultiColor.single(WyattColors.light),
backgroundColors: WyattColors.darkBlueGradient,
borderColors: WyattColors.darkBlueGradient,
),
);
}

82
packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/simple_icon_button_theme_extension_impl.dart
View File

@ -16,6 +16,7 @@
import 'package:flutter/material.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/core/design_system/colors.dart';
class SimpleIconButtonThemeExtensionImpl
extends SimpleIconButtonThemeExtension {
@ -31,47 +32,24 @@ class SimpleIconButtonThemeExtensionImpl
theme ??= ThemeData.light();
final style = SimpleIconButtonStyle(
dimension: 30,
radius: BorderRadius.circular(15),
padding: const EdgeInsets.all(10),
foregroundColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
borderColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
stroke: 3,
radius: BorderRadius.circular(5),
padding: const EdgeInsets.all(5),
foregroundColors: const MultiColor.single(WyattColors.gray2),
backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.2)),
animationDuration: const Duration(milliseconds: 150),
);
return SimpleIconButtonThemeExtensionImpl(
normalStyle: style,
disabledStyle: style.copyWith(
foregroundColors:
MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
borderColors:
MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
stroke: 1,
foregroundColors: MultiColor.single(WyattColors.gray2.withOpacity(0.4)),
),
hoveredStyle: style.copyWith(
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
),
focusedStyle: style.copyWith(stroke: 5),
focusedStyle: style,
tappedStyle: style.copyWith(
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor([
Color(0xFF4B68FF),
Color(0xFF3531F5),
]),
borderColors: const MultiColor([
Color(0xFF4B68FF),
Color(0xFF3531F5),
]),
backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.5)),
),
);
}
@ -79,42 +57,24 @@ class SimpleIconButtonThemeExtensionImpl
factory SimpleIconButtonThemeExtensionImpl.dark({ThemeData? theme}) {
theme ??= ThemeData.dark();
final style = SimpleIconButtonStyle(
radius: BorderRadius.circular(15),
padding: const EdgeInsets.all(10),
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor.single(Color(0xFF24262A)),
borderColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
stroke: 3,
dimension: 30,
radius: const BorderRadius.all(Radius.circular(5)),
padding: const EdgeInsets.all(5),
foregroundColors: const MultiColor.single(WyattColors.light),
backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
animationDuration: const Duration(milliseconds: 150),
);
return SimpleIconButtonThemeExtensionImpl(
normalStyle: style,
disabledStyle: style.copyWith(
foregroundColors: const MultiColor.single(Color(0xFF60656A)),
backgroundColors: const MultiColor.single(Color(0xFF33373E)),
borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
stroke: 1,
foregroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
),
hoveredStyle: style.copyWith(
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
),
focusedStyle: style.copyWith(stroke: 5),
focusedStyle: style,
tappedStyle: style.copyWith(
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor([
Color(0xFF4B68FF),
Color(0xFF3531F5),
]),
borderColors: const MultiColor([
Color(0xFF4B68FF),
Color(0xFF3531F5),
]),
backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.5)),
),
);
}

119
packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/symbol_button_theme_extension_impl.dart
View File

@ -16,6 +16,7 @@
import 'package:flutter/material.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/core/design_system/colors.dart';
class SymbolButtonThemeExtensionImpl extends SymbolButtonThemeExtension {
const SymbolButtonThemeExtensionImpl({
@ -31,63 +32,38 @@ class SymbolButtonThemeExtensionImpl extends SymbolButtonThemeExtension {
theme ??= ThemeData.light();
final style = SymbolButtonStyle(
labelStyle: theme.textTheme.labelLarge,
radius: BorderRadius.circular(15),
dimension: 60,
radius: BorderRadius.circular(12),
padding: const EdgeInsets.all(10),
foregroundColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
borderColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
stroke: 3,
foregroundColors: const MultiColor.single(WyattColors.gray2),
backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
borderColors: const MultiColor.single(WyattColors.gray2),
stroke: 2,
animationDuration: const Duration(milliseconds: 150),
);
return SymbolButtonThemeExtensionImpl(
normalStyle: style,
disabledStyle: style.copyWith(
labelStyle: theme.textTheme.labelLarge?.copyWith(
color: const Color(0xFF3C97FB).withOpacity(0.4),
color: WyattColors.gray1,
),
foregroundColors:
MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
borderColors:
MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
stroke: 1,
foregroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
backgroundColors: const MultiColor.single(WyattColors.light),
borderColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
),
hoveredStyle: style.copyWith(
labelStyle: theme.textTheme.labelLarge?.copyWith(
color: const Color(0xFFDDE0E3),
),
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
),
focusedStyle: style.copyWith(stroke: 5),
focusedStyle: style.copyWith(stroke: 4),
tappedStyle: style.copyWith(
labelStyle: theme.textTheme.labelLarge?.copyWith(
color: const Color(0xFFDDE0E3),
),
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor([
Color(0xFF4B68FF),
Color(0xFF3531F5),
]),
borderColors: const MultiColor([
Color(0xFF4B68FF),
Color(0xFF3531F5),
]),
backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
),
selectedStyle: style.copyWith(
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
borderColors: const MultiColor([
Color(0xFF00D16C),
Color(0xFF00D16C),
]),
labelStyle: theme.textTheme.labelLarge?.copyWith(
fontWeight: FontWeight.w600,
),
foregroundColors: const MultiColor.single(WyattColors.gray2),
borderColors: WyattColors.greenGradient,
),
);
}
@ -96,52 +72,41 @@ class SymbolButtonThemeExtensionImpl extends SymbolButtonThemeExtension {
theme ??= ThemeData.dark();
final style = SymbolButtonStyle(
labelStyle: theme.textTheme.labelLarge,
radius: BorderRadius.circular(15),
dimension: 60,
radius: const BorderRadius.all(Radius.circular(12)),
padding: const EdgeInsets.all(10),
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor.single(Color(0xFF24262A)),
borderColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
stroke: 3,
foregroundColors: const MultiColor.single(WyattColors.light),
backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
borderColors: const MultiColor.single(WyattColors.gray1),
stroke: 2,
animationDuration: const Duration(milliseconds: 150),
);
return SymbolButtonThemeExtensionImpl(
normalStyle: style,
disabledStyle: style.copyWith(
labelStyle: theme.textTheme.labelLarge?.copyWith(
color: const Color(0xFF60656A),
color: WyattColors.gray1,
),
foregroundColors: const MultiColor.single(Color(0xFF60656A)),
backgroundColors: const MultiColor.single(Color(0xFF33373E)),
borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
stroke: 1,
foregroundColors: const MultiColor.single(WyattColors.gray1),
backgroundColors:
MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
),
hoveredStyle: style.copyWith(
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor([
Color(0xFF3C97FB),
Color(0xFF436EF4),
]),
backgroundColors:
MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
),
focusedStyle: style.copyWith(stroke: 5),
focusedStyle: style.copyWith(stroke: 4),
tappedStyle: style.copyWith(
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
backgroundColors: const MultiColor([
Color(0xFF4B68FF),
Color(0xFF3531F5),
]),
borderColors: const MultiColor([
Color(0xFF4B68FF),
Color(0xFF3531F5),
]),
backgroundColors:
MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
),
selectedStyle: style.copyWith(
foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
borderColors: const MultiColor([
Color(0xFF00D16C),
Color(0xFF00D16C),
]),
labelStyle: theme.textTheme.labelLarge?.copyWith(
fontSize: 14,
fontWeight: FontWeight.w600,
),
foregroundColors: const MultiColor.single(WyattColors.light),
borderColors: WyattColors.greenGradient,
),
);
}