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): add theme extension support in buttons + theme negociation

Browse Source
This commit is contained in:
Hugo Pointcheval 2023-02-15 15:57:36 +01:00
parent 77ce4e33ab
commit c331bc6056
Signed by: hugo
GPG Key ID: 3AAC487E131E00BC
18 changed files with 724 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button.g.dart
View File

@ -21,25 +21,25 @@ class $FileSelectionButtonCWProxyImpl
FileSelectionButton subTitle(TextWrapper? subTitle) => FileSelectionButton subTitle(TextWrapper? subTitle) =>
this(subTitle: subTitle); this(subTitle: subTitle);
@override @override
FileSelectionButton disabledStyle(ButtonStyle? disabledStyle) => FileSelectionButton disabledStyle(ButtonStyle<dynamic>? disabledStyle) =>
this(disabledStyle: disabledStyle); this(disabledStyle: disabledStyle);
@override @override
FileSelectionButton normalStyle(ButtonStyle? normalStyle) => FileSelectionButton normalStyle(ButtonStyle<dynamic>? normalStyle) =>
this(normalStyle: normalStyle); this(normalStyle: normalStyle);
@override @override
FileSelectionButton hoveredStyle(ButtonStyle? hoveredStyle) => FileSelectionButton hoveredStyle(ButtonStyle<dynamic>? hoveredStyle) =>
this(hoveredStyle: hoveredStyle); this(hoveredStyle: hoveredStyle);
@override @override
FileSelectionButton focusedStyle(ButtonStyle? focusedStyle) => FileSelectionButton focusedStyle(ButtonStyle<dynamic>? focusedStyle) =>
this(focusedStyle: focusedStyle); this(focusedStyle: focusedStyle);
@override @override
FileSelectionButton tappedStyle(ButtonStyle? tappedStyle) => FileSelectionButton tappedStyle(ButtonStyle<dynamic>? tappedStyle) =>
this(tappedStyle: tappedStyle); this(tappedStyle: tappedStyle);
@override @override
FileSelectionButton selectedStyle(ButtonStyle? selectedStyle) => FileSelectionButton selectedStyle(ButtonStyle<dynamic>? selectedStyle) =>
this(selectedStyle: selectedStyle); this(selectedStyle: selectedStyle);
@override @override
FileSelectionButton invalidStyle(ButtonStyle? invalidStyle) => FileSelectionButton invalidStyle(ButtonStyle<dynamic>? invalidStyle) =>
this(invalidStyle: invalidStyle); this(invalidStyle: invalidStyle);
@override @override
FileSelectionButton onPressed(void Function(ControlState)? onPressed) => FileSelectionButton onPressed(void Function(ControlState)? onPressed) =>
@ -52,13 +52,13 @@ class $FileSelectionButtonCWProxyImpl
Widget? leading, Widget? leading,
TextWrapper? title, TextWrapper? title,
TextWrapper? subTitle, TextWrapper? subTitle,
ButtonStyle? disabledStyle, ButtonStyle<dynamic>? disabledStyle,
ButtonStyle? normalStyle, ButtonStyle<dynamic>? normalStyle,
ButtonStyle? hoveredStyle, ButtonStyle<dynamic>? hoveredStyle,
ButtonStyle? focusedStyle, ButtonStyle<dynamic>? focusedStyle,
ButtonStyle? tappedStyle, ButtonStyle<dynamic>? tappedStyle,
ButtonStyle? selectedStyle, ButtonStyle<dynamic>? selectedStyle,
ButtonStyle? invalidStyle, ButtonStyle<dynamic>? invalidStyle,
void Function(ControlState)? onPressed, void Function(ControlState)? onPressed,
Key? key, Key? key,
}) => }) =>

279
packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_screen.dart
View File

@ -25,6 +25,7 @@ import 'package:wyatt_ui_kit/src/components/buttons/cubit/invalid_button_cubit.d
import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart'; import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart'; import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart'; import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
import 'package:wyatt_ui_kit/src/domain/button_theme_extension/file_selection_button_theme_extension.dart';
class FileSelectionButtonScreen class FileSelectionButtonScreen
extends CubitScreen<InvalidButtonCubit, ButtonState> { extends CubitScreen<InvalidButtonCubit, ButtonState> {
@ -47,6 +48,7 @@ class FileSelectionButtonScreen
final Widget? leading; final Widget? leading;
final TextWrapper? title; final TextWrapper? title;
final TextWrapper? subTitle; final TextWrapper? subTitle;
final MainAxisSize? mainAxisSize;
final FileSelectionButtonStyle? disabledStyle; final FileSelectionButtonStyle? disabledStyle;
final FileSelectionButtonStyle? normalStyle; final FileSelectionButtonStyle? normalStyle;
@ -58,44 +60,164 @@ class FileSelectionButtonScreen
final void Function(ControlState state)? onPressed; final void Function(ControlState state)? onPressed;
final MainAxisSize? mainAxisSize;
@override @override
InvalidButtonCubit create(BuildContext context) => InvalidButtonCubit(); InvalidButtonCubit create(BuildContext context) => InvalidButtonCubit();
@override /// Negotiate the theme to get a complete style.
Widget onBuild(BuildContext context, ButtonState state) { FileSelectionButtonStyle negotiate(BuildContext context, ButtonState state) {
// Set a default style // Define default style from Flutter values.
FileSelectionButtonStyle? style = FileSelectionButtonStyle style =
normalStyle ?? const FileSelectionButtonStyle(); FileSelectionButtonStyle.fromFlutter(context);
// Try to retrieve custom theme extension
final fileSelectionButtonThemeExtension =
context.themeExtension<FileSelectionButtonThemeExtension>();
switch (state.state) { switch (state.state) {
case ControlState.disabled: case ControlState.disabled:
style = disabledStyle ?? style; style = disabledStyle ??
fileSelectionButtonThemeExtension?.disabledStyle ??
style.copyWith(
foregroundColors:
MultiColor.single(context.colorScheme.onSurface),
backgroundColors: MultiColor.single(context.colorScheme.surface),
);
break; break;
case ControlState.hovered: case ControlState.hovered:
style = hoveredStyle ?? style; style = hoveredStyle ??
fileSelectionButtonThemeExtension?.hoveredStyle ??
style;
break; break;
case ControlState.tapped: case ControlState.tapped:
style = tappedStyle ?? style; style = tappedStyle ??
fileSelectionButtonThemeExtension?.tappedStyle ??
style;
break; break;
case ControlState.focused: case ControlState.focused:
style = focusedStyle ?? style; style = focusedStyle ??
fileSelectionButtonThemeExtension?.focusedStyle ??
style;
break; break;
case ControlState.normal: case ControlState.normal:
// already done style = normalStyle ??
fileSelectionButtonThemeExtension?.normalStyle ??
style;
break; break;
} }
// Apply extra theme
if (state.isSelected) { if (state.isSelected) {
style = selectedStyle ?? style; // TODO(hpcl): enhance copyWith to copy only non-null attributes of an object
style = style.copyWith(
title: (selectedStyle ??
fileSelectionButtonThemeExtension?.selectedStyle ??
style)
.title,
subTitle: (selectedStyle ??
fileSelectionButtonThemeExtension?.selectedStyle ??
style)
.subTitle,
radius: (selectedStyle ??
fileSelectionButtonThemeExtension?.selectedStyle ??
style)
.radius,
padding: (selectedStyle ??
fileSelectionButtonThemeExtension?.selectedStyle ??
style)
.padding,
foregroundColors: (selectedStyle ??
fileSelectionButtonThemeExtension?.selectedStyle ??
style)
.foregroundColors,
backgroundColors: (selectedStyle ??
fileSelectionButtonThemeExtension?.selectedStyle ??
style)
.backgroundColors,
borderColors: (selectedStyle ??
fileSelectionButtonThemeExtension?.selectedStyle ??
style)
.borderColors,
stroke: (selectedStyle ??
fileSelectionButtonThemeExtension?.selectedStyle ??
style)
.stroke,
shadow: (selectedStyle ??
fileSelectionButtonThemeExtension?.selectedStyle ??
style)
.shadow,
);
} }
if (state.isInvalid) { if (state.isInvalid) {
style = invalidStyle ?? style; // TODO(hpcl): enhance copyWith to copy only non-null attributes of an object
style = style.copyWith(
title: (invalidStyle ??
fileSelectionButtonThemeExtension?.invalidStyle ??
style)
.title,
subTitle: (invalidStyle ??
fileSelectionButtonThemeExtension?.invalidStyle ??
style)
.subTitle,
radius: (invalidStyle ??
fileSelectionButtonThemeExtension?.invalidStyle ??
style)
.radius,
padding: (invalidStyle ??
fileSelectionButtonThemeExtension?.invalidStyle ??
style)
.padding,
foregroundColors: (invalidStyle ??
fileSelectionButtonThemeExtension?.invalidStyle ??
style)
.foregroundColors,
backgroundColors: (invalidStyle ??
fileSelectionButtonThemeExtension?.invalidStyle ??
style)
.backgroundColors,
borderColors: (invalidStyle ??
fileSelectionButtonThemeExtension?.invalidStyle ??
style)
.borderColors,
stroke: (invalidStyle ??
fileSelectionButtonThemeExtension?.invalidStyle ??
style)
.stroke,
shadow: (invalidStyle ??
fileSelectionButtonThemeExtension?.invalidStyle ??
style)
.shadow,
);
} }
print(state); return style;
}
Widget _border(
BuildContext context,
FileSelectionButtonStyle style,
Widget child,
) {
if (style.borderColors != null && style.stroke != null) {
return DottedBorder(
padding: EdgeInsets.zero,
dashPattern: const [5, 5],
strokeWidth: style.stroke!,
color: style.borderColors!.color,
borderType: BorderType.RRect,
radius:
style.radius?.resolve(TextDirection.ltr).bottomLeft ?? Radius.zero,
strokeCap: StrokeCap.square,
child: child,
);
} else {
return child;
}
}
@override
Widget onBuild(BuildContext context, ButtonState state) {
final style = negotiate(context, state);
return Focus( return Focus(
onFocusChange: (hasFocus) => onFocusChange: (hasFocus) =>
@ -128,18 +250,12 @@ class FileSelectionButtonScreen
onPressed?.call(state.state); onPressed?.call(state.state);
bloc(context).onClickUpOut(); bloc(context).onClickUpOut();
}, },
child: DottedBorder( child: _border(
padding: EdgeInsets.zero, context,
dashPattern: const [5, 5], style,
strokeWidth: style.stroke ?? 3, DecoratedBox(
color: style.borderColors?.color ?? context.colorScheme.primary,
borderType: BorderType.RRect,
radius: Radius.circular(style.radius ?? 0),
strokeCap: StrokeCap.square,
child: DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: style.backgroundColors?.color ?? color: style.backgroundColors?.color,
context.colorScheme.primary,
// 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(
@ -149,9 +265,7 @@ class FileSelectionButtonScreen
boxShadow: [ boxShadow: [
if (style.shadow != null) ...[style.shadow!] if (style.shadow != null) ...[style.shadow!]
], ],
borderRadius: BorderRadius.all( borderRadius: style.radius,
Radius.circular(style.radius ?? 0),
),
), ),
child: ConstrainedBox( child: ConstrainedBox(
constraints: const BoxConstraints( constraints: const BoxConstraints(
@ -159,81 +273,70 @@ class FileSelectionButtonScreen
minHeight: 50, minHeight: 50,
), // min sizes for Material buttons ), // min sizes for Material buttons
child: Padding( child: Padding(
padding: EdgeInsets.all(style.padding ?? 0), padding: style.padding ?? EdgeInsets.zero,
child: Row( child: Row(
mainAxisSize: mainAxisSize ?? MainAxisSize.min, mainAxisSize: mainAxisSize ?? MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
if (leading != null) ...[ if (leading != null) ...[
leading ?? const SizedBox.shrink(), leading ?? const SizedBox.shrink(),
Gap(style.padding ?? 10), Gap(style.padding?.horizontal ?? 10),
], ],
// Choose color
// label.style.color ??
// buttonStyle.foregroundColor.color ??
// context.textTheme.titleLarge.color
//
// Choose gradient
// label.gradient ??
// buttonStyle.foregroundColor.colors ??
// null
Column( Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
/// Choose color
/// title.style.color ??
/// buttonStyle.title.style.color ??
/// context.textTheme.titleLarge.color
///
/// Choose gradient
/// title.gradient ??
/// buttonStyle.foregroundColor.colors ??
/// null
///
/// More infos in `negociate()` method
if (title != null) ...[ if (title != null) ...[
Builder( Gap(style.padding?.horizontal ?? 10),
builder: (context) { Text(
final color = title?.style?.color ?? title!.text,
style?.foregroundColors?.color ?? style: title!.style ?? style.title,
context.textTheme.titleLarge?.color; ).toGradient(
final buttonStyleGradient = LinearGradientHelper.fromNullableColors(
(style?.foregroundColors?.isGradient ?? title?.gradient ??
((style.foregroundColors?.isGradient ??
false) false)
? style?.foregroundColors?.colors ? style.foregroundColors?.colors
: null; : null),
final gradient = ),
title?.gradient ?? buttonStyleGradient;
return Text(
title!.text,
style: (title!.style ??
context.textTheme.titleLarge)
?.copyWith(color: color),
).toGradient(
LinearGradientHelper.fromNullableColors(
gradient,
),
);
},
), ),
], ],
if (subTitle != null) ...[
Builder(
builder: (context) {
final color = subTitle?.style?.color ??
style?.foregroundColors?.color ??
context.textTheme.bodyMedium?.color;
final buttonStyleGradient =
(style?.foregroundColors?.isGradient ??
false)
? style?.foregroundColors?.colors
: null;
final gradient =
subTitle?.gradient ?? buttonStyleGradient;
return Text( /// Choose color
subTitle!.text, /// subTitle.style.color ??
style: (subTitle!.style ?? /// buttonStyle.subTitle.style.color ??
context.textTheme.bodyMedium) /// context.textTheme.subTitleLarge.color
?.copyWith(color: color), ///
).toGradient( /// Choose gradient
LinearGradientHelper.fromNullableColors( /// subTitle.gradient ??
gradient, /// buttonStyle.foregroundColor.colors ??
), /// null
); ///
}, /// More infos in `negociate()` method
if (subTitle != null) ...[
Gap(style.padding?.horizontal ?? 10),
Text(
subTitle!.text,
style: subTitle!.style ?? style.subTitle,
).toGradient(
LinearGradientHelper.fromNullableColors(
subTitle?.gradient ??
((style.foregroundColors?.isGradient ??
false)
? style.foregroundColors?.colors
: null),
),
), ),
], ],
], ],

20
packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.g.dart
View File

@ -19,19 +19,19 @@ class $FlatButtonCWProxyImpl implements $FlatButtonComponentCWProxy {
@override @override
FlatButton label(TextWrapper? label) => this(label: label); FlatButton label(TextWrapper? label) => this(label: label);
@override @override
FlatButton disabledStyle(ButtonStyle? disabledStyle) => FlatButton disabledStyle(ButtonStyle<dynamic>? disabledStyle) =>
this(disabledStyle: disabledStyle); this(disabledStyle: disabledStyle);
@override @override
FlatButton normalStyle(ButtonStyle? normalStyle) => FlatButton normalStyle(ButtonStyle<dynamic>? normalStyle) =>
this(normalStyle: normalStyle); this(normalStyle: normalStyle);
@override @override
FlatButton hoveredStyle(ButtonStyle? hoveredStyle) => FlatButton hoveredStyle(ButtonStyle<dynamic>? hoveredStyle) =>
this(hoveredStyle: hoveredStyle); this(hoveredStyle: hoveredStyle);
@override @override
FlatButton focusedStyle(ButtonStyle? focusedStyle) => FlatButton focusedStyle(ButtonStyle<dynamic>? focusedStyle) =>
this(focusedStyle: focusedStyle); this(focusedStyle: focusedStyle);
@override @override
FlatButton tappedStyle(ButtonStyle? tappedStyle) => FlatButton tappedStyle(ButtonStyle<dynamic>? tappedStyle) =>
this(tappedStyle: tappedStyle); this(tappedStyle: tappedStyle);
@override @override
FlatButton onPressed(void Function(ControlState)? onPressed) => FlatButton onPressed(void Function(ControlState)? onPressed) =>
@ -44,11 +44,11 @@ class $FlatButtonCWProxyImpl implements $FlatButtonComponentCWProxy {
Widget? prefix, Widget? prefix,
Widget? suffix, Widget? suffix,
TextWrapper? label, TextWrapper? label,
ButtonStyle? disabledStyle, ButtonStyle<dynamic>? disabledStyle,
ButtonStyle? normalStyle, ButtonStyle<dynamic>? normalStyle,
ButtonStyle? hoveredStyle, ButtonStyle<dynamic>? hoveredStyle,
ButtonStyle? focusedStyle, ButtonStyle<dynamic>? focusedStyle,
ButtonStyle? tappedStyle, ButtonStyle<dynamic>? tappedStyle,
void Function(ControlState)? onPressed, void Function(ControlState)? onPressed,
Key? key, Key? key,
}) => }) =>

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

@ -24,6 +24,7 @@ import 'package:wyatt_ui_kit/src/components/gradients/gradient_box_border.dart';
import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart'; import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart'; import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart'; import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
import 'package:wyatt_ui_kit/src/domain/button_theme_extension/flat_button_theme_extension.dart';
class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> { class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
const FlatButtonScreen({ const FlatButtonScreen({
@ -43,6 +44,7 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
final Widget? prefix; final Widget? prefix;
final Widget? suffix; final Widget? suffix;
final TextWrapper? label; final TextWrapper? label;
final MainAxisSize? mainAxisSize;
final FlatButtonStyle? disabledStyle; final FlatButtonStyle? disabledStyle;
final FlatButtonStyle? normalStyle; final FlatButtonStyle? normalStyle;
@ -52,34 +54,49 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
final void Function(ControlState state)? onPressed; final void Function(ControlState state)? onPressed;
final MainAxisSize? mainAxisSize;
@override @override
ButtonCubit create(BuildContext context) => ButtonCubit(); ButtonCubit create(BuildContext context) => ButtonCubit();
@override /// Negotiate the theme to get a complete style.
Widget onBuild(BuildContext context, ButtonState state) { FlatButtonStyle negotiate(BuildContext context, ControlState state) {
// Set a default style // Define default style from Flutter values.
FlatButtonStyle? style = normalStyle ?? const FlatButtonStyle(); FlatButtonStyle style = FlatButtonStyle.fromFlutter(context);
switch (state.state) { // Try to retrieve custom theme extension
final flatButtonThemeExtension =
context.themeExtension<FlatButtonThemeExtension>();
switch (state) {
case ControlState.disabled: case ControlState.disabled:
style = disabledStyle ?? style; style = disabledStyle ??
flatButtonThemeExtension?.disabledStyle ??
style.copyWith(
foregroundColors:
MultiColor.single(context.colorScheme.onSurface),
backgroundColors: MultiColor.single(context.colorScheme.surface),
);
break; break;
case ControlState.hovered: case ControlState.hovered:
style = hoveredStyle ?? style; style = hoveredStyle ?? flatButtonThemeExtension?.hoveredStyle ?? style;
break; break;
case ControlState.tapped: case ControlState.tapped:
style = tappedStyle ?? style; style = tappedStyle ?? flatButtonThemeExtension?.tappedStyle ?? style;
break; break;
case ControlState.focused: case ControlState.focused:
style = focusedStyle ?? style; style = focusedStyle ?? flatButtonThemeExtension?.focusedStyle ?? style;
break; break;
case ControlState.normal: case ControlState.normal:
// already done style = normalStyle ?? flatButtonThemeExtension?.normalStyle ?? style;
break; break;
} }
return style;
}
@override
Widget onBuild(BuildContext context, ButtonState state) {
final style = negotiate(context, state.state);
return Focus( return Focus(
onFocusChange: (hasFocus) => onFocusChange: (hasFocus) =>
hasFocus ? bloc(context).onFocus() : bloc(context).onUnfocus(), hasFocus ? bloc(context).onFocus() : bloc(context).onUnfocus(),
@ -113,20 +130,19 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
}, },
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: style.backgroundColors?.color ?? color: style.backgroundColors?.color,
context.colorScheme.primary,
// If no border color => no default value // If no border color => no default value
border: (style.borderColors != null) border: (style.borderColors != null && style.stroke != null)
? (style.borderColors?.isGradient ?? false) ? (style.borderColors?.isGradient ?? false)
? GradientBoxBorder( ? GradientBoxBorder(
gradient: LinearGradient( gradient: LinearGradient(
colors: style.borderColors!.colors, colors: style.borderColors!.colors,
), ),
width: style.stroke ?? 2, width: style.stroke!,
) )
: Border.all( : Border.all(
color: style.borderColors!.color, color: style.borderColors!.color,
width: style.stroke ?? 2, width: style.stroke!,
) )
: null, : null,
// if no gradient colors => no default value // if no gradient colors => no default value
@ -138,9 +154,7 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
boxShadow: [ boxShadow: [
if (style.shadow != null) ...[style.shadow!] if (style.shadow != null) ...[style.shadow!]
], ],
borderRadius: BorderRadius.all( borderRadius: style.radius,
Radius.circular(style.radius ?? 0),
),
), ),
child: ConstrainedBox( child: ConstrainedBox(
constraints: const BoxConstraints( constraints: const BoxConstraints(
@ -148,76 +162,62 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
minHeight: 36, minHeight: 36,
), // min sizes for Material buttons ), // min sizes for Material buttons
child: Padding( child: Padding(
padding: EdgeInsets.all(style.padding ?? 0), padding: style.padding ?? EdgeInsets.zero,
child: Row( child: Row(
mainAxisSize: mainAxisSize ?? MainAxisSize.min, mainAxisSize: mainAxisSize ?? MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Builder( if (style.foregroundColors?.color != null &&
builder: (context) { prefix != null) ...[
final color = style?.foregroundColors?.color; ColorFiltered(
if (color != null) { colorFilter: ColorFilter.mode(
return ColorFiltered( style.foregroundColors!.color,
colorFilter: BlendMode.srcIn,
ColorFilter.mode(color, BlendMode.srcIn), ),
child: prefix ?? const SizedBox.shrink(), child: prefix,
); )
} else { ] else ...[
return prefix ?? const SizedBox.shrink(); prefix ?? const SizedBox.shrink()
} ],
}, Gap(style.padding?.vertical ?? 10),
),
Gap(style.padding ?? 10), /// Choose color
// Choose color /// label.style.color ??
// label.style.color ?? /// buttonStyle.label.style.color ??
// buttonStyle.foregroundColor.color ?? /// context.textTheme.labelLarge.color
// context.textTheme.titleLarge.color ///
// /// Choose gradient
// Choose gradient /// label.gradient ??
// label.gradient ?? /// buttonStyle.foregroundColor.colors ??
// buttonStyle.foregroundColor.colors ?? /// null
// null ///
if (label != null) ...[ /// More infos in `negociate()` method
Builder( if (label != null) ...[
builder: (context) { Text(
final color = label?.style?.color ?? label!.text,
style?.foregroundColors?.color ?? style: label!.style ?? style.label,
context.textTheme.titleLarge?.color; ).toGradient(
final buttonStyleGradient = LinearGradientHelper.fromNullableColors(
(style?.foregroundColors?.isGradient ?? false) label?.gradient ??
? style?.foregroundColors?.colors ((style.foregroundColors?.isGradient ?? false)
: null; ? style.foregroundColors?.colors
final gradient = : null),
label?.gradient ?? buttonStyleGradient; ),
)
return Text( ],
label!.text, Gap(style.padding?.vertical ?? 10),
style: if (style.foregroundColors?.color != null &&
(label!.style ?? context.textTheme.titleLarge) suffix != null) ...[
?.copyWith(color: color), ColorFiltered(
).toGradient( colorFilter: ColorFilter.mode(
LinearGradientHelper.fromNullableColors( style.foregroundColors!.color,
gradient, BlendMode.srcIn,
), ),
); child: suffix,
}, )
), ] else ...[
suffix ?? const SizedBox.shrink()
], ],
Gap(style.padding ?? 10),
Builder(
builder: (context) {
final color = style?.foregroundColors?.color;
if (color != null) {
return ColorFiltered(
colorFilter:
ColorFilter.mode(color, BlendMode.srcIn),
child: suffix ?? const SizedBox.shrink(),
);
} else {
return suffix ?? const SizedBox.shrink();
}
},
),
], ],
), ),
), ),

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

@ -33,7 +33,6 @@ class SimpleIconButton extends SimpleIconButtonComponent
super.hoveredStyle, super.hoveredStyle,
super.focusedStyle, super.focusedStyle,
super.tappedStyle, super.tappedStyle,
super.selectedStyle,
super.onPressed, super.onPressed,
super.key, super.key,
}); });
@ -63,9 +62,6 @@ class SimpleIconButton extends SimpleIconButtonComponent
SimpleIconButtonStyle? get tappedStyle => SimpleIconButtonStyle? get tappedStyle =>
super.tappedStyle as SimpleIconButtonStyle?; super.tappedStyle as SimpleIconButtonStyle?;
@override
SimpleIconButtonStyle? get selectedStyle =>
super.selectedStyle as SimpleIconButtonStyle?;
@override @override
Widget build(BuildContext context) => exportBloc( Widget build(BuildContext context) => exportBloc(
@ -76,7 +72,6 @@ class SimpleIconButton extends SimpleIconButtonComponent
hoveredStyle: hoveredStyle, hoveredStyle: hoveredStyle,
focusedStyle: focusedStyle, focusedStyle: focusedStyle,
tappedStyle: tappedStyle, tappedStyle: tappedStyle,
selectedStyle: selectedStyle,
onPressed: onPressed, onPressed: onPressed,
key: key, key: key,
), ),

25
packages/wyatt_ui_kit/lib/src/components/buttons/simple_icon_button/simple_icon_button.g.dart
View File

@ -13,24 +13,21 @@ class $SimpleIconButtonCWProxyImpl
@override @override
SimpleIconButton icon(Icon? icon) => this(icon: icon); SimpleIconButton icon(Icon? icon) => this(icon: icon);
@override @override
SimpleIconButton disabledStyle(ButtonStyle? disabledStyle) => SimpleIconButton disabledStyle(ButtonStyle<dynamic>? disabledStyle) =>
this(disabledStyle: disabledStyle); this(disabledStyle: disabledStyle);
@override @override
SimpleIconButton normalStyle(ButtonStyle? normalStyle) => SimpleIconButton normalStyle(ButtonStyle<dynamic>? normalStyle) =>
this(normalStyle: normalStyle); this(normalStyle: normalStyle);
@override @override
SimpleIconButton hoveredStyle(ButtonStyle? hoveredStyle) => SimpleIconButton hoveredStyle(ButtonStyle<dynamic>? hoveredStyle) =>
this(hoveredStyle: hoveredStyle); this(hoveredStyle: hoveredStyle);
@override @override
SimpleIconButton focusedStyle(ButtonStyle? focusedStyle) => SimpleIconButton focusedStyle(ButtonStyle<dynamic>? focusedStyle) =>
this(focusedStyle: focusedStyle); this(focusedStyle: focusedStyle);
@override @override
SimpleIconButton tappedStyle(ButtonStyle? tappedStyle) => SimpleIconButton tappedStyle(ButtonStyle<dynamic>? tappedStyle) =>
this(tappedStyle: tappedStyle); this(tappedStyle: tappedStyle);
@override @override
SimpleIconButton selectedStyle(ButtonStyle? selectedStyle) =>
this(selectedStyle: selectedStyle);
@override
SimpleIconButton onPressed(void Function(ControlState)? onPressed) => SimpleIconButton onPressed(void Function(ControlState)? onPressed) =>
this(onPressed: onPressed); this(onPressed: onPressed);
@override @override
@ -38,12 +35,11 @@ class $SimpleIconButtonCWProxyImpl
@override @override
SimpleIconButton call({ SimpleIconButton call({
Icon? icon, Icon? icon,
ButtonStyle? disabledStyle, ButtonStyle<dynamic>? disabledStyle,
ButtonStyle? normalStyle, ButtonStyle<dynamic>? normalStyle,
ButtonStyle? hoveredStyle, ButtonStyle<dynamic>? hoveredStyle,
ButtonStyle? focusedStyle, ButtonStyle<dynamic>? focusedStyle,
ButtonStyle? tappedStyle, ButtonStyle<dynamic>? tappedStyle,
ButtonStyle? selectedStyle,
void Function(ControlState)? onPressed, void Function(ControlState)? onPressed,
Key? key, Key? key,
}) => }) =>
@ -54,7 +50,6 @@ class $SimpleIconButtonCWProxyImpl
hoveredStyle: hoveredStyle ?? _value.hoveredStyle, hoveredStyle: hoveredStyle ?? _value.hoveredStyle,
focusedStyle: focusedStyle ?? _value.focusedStyle, focusedStyle: focusedStyle ?? _value.focusedStyle,
tappedStyle: tappedStyle ?? _value.tappedStyle, tappedStyle: tappedStyle ?? _value.tappedStyle,
selectedStyle: selectedStyle ?? _value.selectedStyle,
onPressed: onPressed ?? _value.onPressed, onPressed: onPressed ?? _value.onPressed,
key: key ?? _value.key, key: key ?? _value.key,
); );

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

@ -20,7 +20,10 @@ import 'package:wyatt_bloc_helper/wyatt_bloc_helper.dart';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart'; import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart'; import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
import 'package:wyatt_ui_kit/src/components/gradients/gradient_box_border.dart'; import 'package:wyatt_ui_kit/src/components/gradients/gradient_box_border.dart';
import 'package:wyatt_ui_kit/src/components/gradients/gradient_icon.dart';
import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart'; import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
import 'package:wyatt_ui_kit/src/domain/button_theme_extension/simple_icon_button_theme_extension.dart';
class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> { class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
const SimpleIconButtonScreen({ const SimpleIconButtonScreen({
@ -30,7 +33,6 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
this.hoveredStyle, this.hoveredStyle,
this.focusedStyle, this.focusedStyle,
this.tappedStyle, this.tappedStyle,
this.selectedStyle,
this.onPressed, this.onPressed,
super.key, super.key,
}); });
@ -42,35 +44,58 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
final SimpleIconButtonStyle? hoveredStyle; final SimpleIconButtonStyle? hoveredStyle;
final SimpleIconButtonStyle? focusedStyle; final SimpleIconButtonStyle? focusedStyle;
final SimpleIconButtonStyle? tappedStyle; final SimpleIconButtonStyle? tappedStyle;
final SimpleIconButtonStyle? selectedStyle;
final void Function(ControlState state)? onPressed; final void Function(ControlState state)? onPressed;
@override @override
ButtonCubit create(BuildContext context) => ButtonCubit(); ButtonCubit create(BuildContext context) => ButtonCubit();
@override /// Negotiate the theme to get a complete style.
Widget onBuild(BuildContext context, ButtonState state) { SimpleIconButtonStyle negotiate(BuildContext context, ControlState state) {
// Set a default style // Define default style from Flutter values.
SimpleIconButtonStyle? style = normalStyle ?? const SimpleIconButtonStyle(); SimpleIconButtonStyle style = SimpleIconButtonStyle.fromFlutter(context);
switch (state.state) { // Try to retrieve custom theme extension
final simpleIconButtonThemeExtension =
context.themeExtension<SimpleIconButtonThemeExtension>();
switch (state) {
case ControlState.disabled: case ControlState.disabled:
style = disabledStyle ?? style; style = disabledStyle ??
simpleIconButtonThemeExtension?.disabledStyle ??
style.copyWith(
foregroundColors:
MultiColor.single(context.colorScheme.onSurface),
backgroundColors: MultiColor.single(context.colorScheme.surface),
);
break; break;
case ControlState.hovered: case ControlState.hovered:
style = hoveredStyle ?? style; style = hoveredStyle ??
simpleIconButtonThemeExtension?.hoveredStyle ??
style;
break; break;
case ControlState.tapped: case ControlState.tapped:
style = tappedStyle ?? style; style =
tappedStyle ?? simpleIconButtonThemeExtension?.tappedStyle ?? style;
break; break;
case ControlState.focused: case ControlState.focused:
style = focusedStyle ?? style; style = focusedStyle ??
simpleIconButtonThemeExtension?.focusedStyle ??
style;
break; break;
case ControlState.normal: case ControlState.normal:
style =
normalStyle ?? simpleIconButtonThemeExtension?.normalStyle ?? style;
break; break;
} }
return style;
}
@override
Widget onBuild(BuildContext context, ButtonState state) {
final style = negotiate(context, state.state);
return Focus( return Focus(
onFocusChange: (hasFocus) => onFocusChange: (hasFocus) =>
hasFocus ? bloc(context).onFocus() : bloc(context).onUnfocus(), hasFocus ? bloc(context).onFocus() : bloc(context).onUnfocus(),
@ -104,25 +129,24 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
bloc(context).onClickUpOut(); bloc(context).onClickUpOut();
}, },
child: SizedBox.square( child: SizedBox.square(
dimension: style.dimension ?? 30, dimension: style.dimension,
child: AspectRatio( child: AspectRatio(
aspectRatio: 1, aspectRatio: 1,
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: style.backgroundColors?.color ?? color: style.backgroundColors?.color,
context.colorScheme.tertiary,
// If no border color => no default value // If no border color => no default value
border: (style.borderColors != null) border: (style.borderColors != null && style.stroke != null)
? (style.borderColors?.isGradient ?? false) ? (style.borderColors?.isGradient ?? false)
? GradientBoxBorder( ? GradientBoxBorder(
gradient: LinearGradient( gradient: LinearGradient(
colors: style.borderColors!.colors, colors: style.borderColors!.colors,
), ),
width: style.stroke ?? 2, width: style.stroke!,
) )
: Border.all( : Border.all(
color: style.borderColors!.color, color: style.borderColors!.color,
width: style.stroke ?? 2, width: style.stroke!,
) )
: null, : null,
// if no gradient colors => no default value // if no gradient colors => no default value
@ -134,52 +158,40 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
boxShadow: [ boxShadow: [
if (style.shadow != null) ...[style.shadow!] if (style.shadow != null) ...[style.shadow!]
], ],
borderRadius: BorderRadius.all( borderRadius: style.radius,
Radius.circular(style.radius ?? 0),
),
), ),
child: ConstrainedBox( child: ConstrainedBox(
constraints: BoxConstraints( constraints: BoxConstraints(
minWidth: style.dimension ?? 30, minWidth: style.dimension ?? 30,
), // min sizes for Material buttons ),
child: Padding( child: Padding(
padding: EdgeInsets.all(style.padding ?? 0), padding: style.padding ?? EdgeInsets.zero,
child: Center( child: Center(
// Choose color /// Choose color
// button.foreground.colors (gradient) ?? /// icon.color ??
// buttonStyle.foregroundColor.color ?? /// button.foregroundColors.colors ??
// context.colorScheme.onTertiary /// buttonStyle.foregroundColors.colors ??
/// context.buttonTheme.onPrimary
child: Builder( child: Builder(
builder: (context) { builder: (context) {
if (icon?.color != null) { if (icon?.color != null) {
return icon!; return icon!;
} }
final gradient =
(style?.foregroundColors?.isGradient ?? false) if (!(style.foregroundColors?.isGradient ?? false)) {
? LinearGradient( return ColorFiltered(
colors: style!.foregroundColors!.colors, colorFilter: ColorFilter.mode(
) style.foregroundColors!.color,
: null; BlendMode.srcIn,
final color = style?.foregroundColors?.color ??
context.colorScheme.onTertiary;
if (gradient != null) {
return ShaderMask(
blendMode: BlendMode.srcIn,
shaderCallback: (bounds) => gradient.createShader(
Rect.fromLTWH(
0,
0,
bounds.width,
bounds.height,
),
), ),
child: icon, child: icon,
); );
} }
return ColorFiltered(
colorFilter: return icon!.toGradient(
ColorFilter.mode(color, BlendMode.srcIn), LinearGradientHelper.fromMultiColor(
child: icon, style.foregroundColors!,
),
); );
}, },
), ),

24
packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button.g.dart
View File

@ -17,22 +17,22 @@ class $SymbolButtonCWProxyImpl implements $SymbolButtonComponentCWProxy {
@override @override
SymbolButton icon(Widget? icon) => this(icon: icon); SymbolButton icon(Widget? icon) => this(icon: icon);
@override @override
SymbolButton disabledStyle(ButtonStyle? disabledStyle) => SymbolButton disabledStyle(ButtonStyle<dynamic>? disabledStyle) =>
this(disabledStyle: disabledStyle); this(disabledStyle: disabledStyle);
@override @override
SymbolButton normalStyle(ButtonStyle? normalStyle) => SymbolButton normalStyle(ButtonStyle<dynamic>? normalStyle) =>
this(normalStyle: normalStyle); this(normalStyle: normalStyle);
@override @override
SymbolButton hoveredStyle(ButtonStyle? hoveredStyle) => SymbolButton hoveredStyle(ButtonStyle<dynamic>? hoveredStyle) =>
this(hoveredStyle: hoveredStyle); this(hoveredStyle: hoveredStyle);
@override @override
SymbolButton focusedStyle(ButtonStyle? focusedStyle) => SymbolButton focusedStyle(ButtonStyle<dynamic>? focusedStyle) =>
this(focusedStyle: focusedStyle); this(focusedStyle: focusedStyle);
@override @override
SymbolButton tappedStyle(ButtonStyle? tappedStyle) => SymbolButton tappedStyle(ButtonStyle<dynamic>? tappedStyle) =>
this(tappedStyle: tappedStyle); this(tappedStyle: tappedStyle);
@override @override
SymbolButton selectedStyle(ButtonStyle? selectedStyle) => SymbolButton selectedStyle(ButtonStyle<dynamic>? selectedStyle) =>
this(selectedStyle: selectedStyle); this(selectedStyle: selectedStyle);
@override @override
SymbolButton onPressed(void Function(ControlState)? onPressed) => SymbolButton onPressed(void Function(ControlState)? onPressed) =>
@ -44,12 +44,12 @@ class $SymbolButtonCWProxyImpl implements $SymbolButtonComponentCWProxy {
MainAxisSize? mainAxisSize, MainAxisSize? mainAxisSize,
TextWrapper? label, TextWrapper? label,
Widget? icon, Widget? icon,
ButtonStyle? disabledStyle, ButtonStyle<dynamic>? disabledStyle,
ButtonStyle? normalStyle, ButtonStyle<dynamic>? normalStyle,
ButtonStyle? hoveredStyle, ButtonStyle<dynamic>? hoveredStyle,
ButtonStyle? focusedStyle, ButtonStyle<dynamic>? focusedStyle,
ButtonStyle? tappedStyle, ButtonStyle<dynamic>? tappedStyle,
ButtonStyle? selectedStyle, ButtonStyle<dynamic>? selectedStyle,
void Function(ControlState)? onPressed, void Function(ControlState)? onPressed,
Key? key, Key? key,
}) => }) =>

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

@ -25,6 +25,7 @@ import 'package:wyatt_ui_kit/src/components/gradients/gradient_box_border.dart';
import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart'; import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart'; import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart'; import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
import 'package:wyatt_ui_kit/src/domain/button_theme_extension/symbol_button_theme_extension.dart';
class SymbolButtonScreen class SymbolButtonScreen
extends CubitScreen<SelectableButtonCubit, ButtonState> { extends CubitScreen<SelectableButtonCubit, ButtonState> {
@ -44,6 +45,7 @@ class SymbolButtonScreen
final Widget? icon; final Widget? icon;
final TextWrapper? label; final TextWrapper? label;
final MainAxisSize? mainAxisSize;
final SymbolButtonStyle? disabledStyle; final SymbolButtonStyle? disabledStyle;
final SymbolButtonStyle? normalStyle; final SymbolButtonStyle? normalStyle;
@ -54,37 +56,94 @@ class SymbolButtonScreen
final void Function(ControlState state)? onPressed; final void Function(ControlState state)? onPressed;
final MainAxisSize? mainAxisSize;
@override @override
SelectableButtonCubit create(BuildContext context) => SelectableButtonCubit(); SelectableButtonCubit create(BuildContext context) => SelectableButtonCubit();
@override /// Negotiate the theme to get a complete style.
Widget onBuild(BuildContext context, ButtonState state) { SymbolButtonStyle negotiate(BuildContext context, ButtonState state) {
// Set a default style // Define default style from Flutter values.
SymbolButtonStyle? style = normalStyle ?? const SymbolButtonStyle(); SymbolButtonStyle style = SymbolButtonStyle.fromFlutter(context);
// Try to retrieve custom theme extension
final symbolButtonThemeExtension =
context.themeExtension<SymbolButtonThemeExtension>();
switch (state.state) { switch (state.state) {
case ControlState.disabled: case ControlState.disabled:
style = disabledStyle ?? style; style = disabledStyle ??
symbolButtonThemeExtension?.disabledStyle ??
style.copyWith(
foregroundColors:
MultiColor.single(context.colorScheme.onSurface),
backgroundColors: MultiColor.single(context.colorScheme.surface),
);
break; break;
case ControlState.hovered: case ControlState.hovered:
style = hoveredStyle ?? style; style =
hoveredStyle ?? symbolButtonThemeExtension?.hoveredStyle ?? style;
break; break;
case ControlState.tapped: case ControlState.tapped:
style = tappedStyle ?? style; style = tappedStyle ?? symbolButtonThemeExtension?.tappedStyle ?? style;
break; break;
case ControlState.focused: case ControlState.focused:
style = focusedStyle ?? style; style =
focusedStyle ?? symbolButtonThemeExtension?.focusedStyle ?? style;
break; break;
case ControlState.normal: case ControlState.normal:
style = normalStyle ?? symbolButtonThemeExtension?.normalStyle ?? style;
break; break;
} }
// Apply extra theme
if (state.isSelected) { if (state.isSelected) {
style = selectedStyle ?? style; // TODO(hpcl): enhance copyWith to copy only non-null attributes of an object
style = style.copyWith(
label: (selectedStyle ??
symbolButtonThemeExtension?.selectedStyle ??
style)
.label,
dimension: (selectedStyle ??
symbolButtonThemeExtension?.selectedStyle ??
style)
.dimension,
radius: (selectedStyle ??
symbolButtonThemeExtension?.selectedStyle ??
style)
.radius,
padding: (selectedStyle ??
symbolButtonThemeExtension?.selectedStyle ??
style)
.padding,
foregroundColors: (selectedStyle ??
symbolButtonThemeExtension?.selectedStyle ??
style)
.foregroundColors,
backgroundColors: (selectedStyle ??
symbolButtonThemeExtension?.selectedStyle ??
style)
.backgroundColors,
borderColors: (selectedStyle ??
symbolButtonThemeExtension?.selectedStyle ??
style)
.borderColors,
stroke: (selectedStyle ??
symbolButtonThemeExtension?.selectedStyle ??
style)
.stroke,
shadow: (selectedStyle ??
symbolButtonThemeExtension?.selectedStyle ??
style)
.shadow,
);
} }
return style;
}
@override
Widget onBuild(BuildContext context, ButtonState state) {
final style = negotiate(context, state);
return Focus( return Focus(
onFocusChange: (hasFocus) => onFocusChange: (hasFocus) =>
hasFocus ? bloc(context).onFocus() : bloc(context).onUnfocus(), hasFocus ? bloc(context).onFocus() : bloc(context).onUnfocus(),
@ -122,27 +181,27 @@ class SymbolButtonScreen
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
SizedBox.square( SizedBox.square(
dimension: style.dimension ?? 60, dimension: style.dimension,
child: AspectRatio( child: AspectRatio(
aspectRatio: 1, aspectRatio: 1,
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: style.backgroundColors?.color ?? color: style.backgroundColors?.color,
context.colorScheme.primary,
// If no border color => no default value // If no border color => no default value
border: (style.borderColors != null) border:
? (style.borderColors?.isGradient ?? false) (style.borderColors != null && style.stroke != null)
? GradientBoxBorder( ? (style.borderColors?.isGradient ?? false)
gradient: LinearGradient( ? GradientBoxBorder(
colors: style.borderColors!.colors, gradient: LinearGradient(
), colors: style.borderColors!.colors,
width: style.stroke ?? 2, ),
) width: style.stroke!,
: Border.all( )
color: style.borderColors!.color, : Border.all(
width: style.stroke ?? 2, color: style.borderColors!.color,
) width: style.stroke!,
: null, )
: 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(
@ -152,92 +211,44 @@ class SymbolButtonScreen
boxShadow: [ boxShadow: [
if (style.shadow != null) ...[style.shadow!] if (style.shadow != null) ...[style.shadow!]
], ],
borderRadius: BorderRadius.all( borderRadius: style.radius,
Radius.circular(style.radius ?? 0),
),
), ),
child: ConstrainedBox( child: ConstrainedBox(
constraints: BoxConstraints( constraints: BoxConstraints(
minWidth: style.dimension ?? 60, minWidth: style.dimension ?? 60,
), // min sizes for Material buttons ), // min sizes for Material buttons
child: Padding( child: Padding(
padding: EdgeInsets.all(style.padding ?? 0), padding: style.padding ?? EdgeInsets.zero,
child: Center( child: Center(child: icon),
// Choose color
// button.foreground.colors (gradient) ??
// buttonStyle.foregroundColor.color ??
// context.colorScheme.secondary
child: Builder(
builder: (context) {
final gradient =
(style?.foregroundColors?.isGradient ?? false)
? LinearGradient(
colors:
style!.foregroundColors!.colors,
)
: null;
final color = style?.foregroundColors?.color ??
context.colorScheme.secondary;
if (gradient != null) {
return ShaderMask(
blendMode: BlendMode.srcIn,
shaderCallback: (bounds) =>
gradient.createShader(
Rect.fromLTWH(
0,
0,
bounds.width,
bounds.height,
),
),
child: icon,
);
}
return ColorFiltered(
colorFilter:
ColorFilter.mode(color, BlendMode.srcIn),
child: icon,
);
},
),
),
), ),
), ),
), ),
), ),
), ),
// Choose color
// label.style.color ??
// buttonStyle.foregroundColor.color ??
// context.textTheme.titleLarge.color
//
// Choose gradient
// label.gradient ??
// buttonStyle.foregroundColor.colors ??
// null
if (label != null) ...[
const Gap(10),
Builder(
builder: (context) {
final color = label?.style?.color ??
style?.foregroundColors?.color ??
context.textTheme.titleLarge?.color;
final buttonStyleGradient =
(style?.foregroundColors?.isGradient ?? false)
? style?.foregroundColors?.colors
: null;
final gradient = label?.gradient ?? buttonStyleGradient;
return Text( /// Choose color
label!.text, /// label.style.color ??
style: (label!.style ?? context.textTheme.titleMedium) /// buttonStyle.label.style.color ??
?.copyWith(color: color), /// context.textTheme.labelLarge.color
).toGradient( ///
LinearGradientHelper.fromNullableColors( /// Choose gradient
gradient, /// label.gradient ??
), /// buttonStyle.foregroundColor.colors ??
); /// null
}, ///
/// More infos in `negociate()` method
if (label != null) ...[
Gap(style.padding?.horizontal ?? 10),
Text(
label!.text,
style: label!.style ?? style.label,
).toGradient(
LinearGradientHelper.fromNullableColors(
label?.gradient ??
((style.foregroundColors?.isGradient ?? false)
? style.foregroundColors?.colors
: null),
),
), ),
], ],
], ],

2
packages/wyatt_ui_kit/lib/src/components/gradients/gradient_icon.dart
View File

@ -16,7 +16,7 @@
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
extension GradientTextExtension on Icon { extension GradientIconExtension on Icon {
GradientIcon toGradient(Gradient? gradient) => GradientIcon toGradient(Gradient? gradient) =>
GradientIcon.from(this, gradient); GradientIcon.from(this, gradient);
} }

20
packages/wyatt_ui_kit/lib/src/domain/button_theme_extension/button_theme_extension.dart Normal file
View File

@ -0,0 +1,20 @@
// 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/>.
export 'file_selection_button_theme_extension.dart';
export 'flat_button_theme_extension.dart';
export 'simple_icon_button_theme_extension.dart';
export 'symbol_button_theme_extension.dart';

52
packages/wyatt_ui_kit/lib/src/domain/button_theme_extension/file_selection_button_theme_extension.dart Normal file
View File

@ -0,0 +1,52 @@
// 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';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
abstract class FileSelectionButtonThemeExtension
extends ThemeExtension<FileSelectionButtonThemeExtension> {
const FileSelectionButtonThemeExtension({
this.disabledStyle,
this.focusedStyle,
this.hoveredStyle,
this.normalStyle,
this.tappedStyle,
this.selectedStyle,
this.invalidStyle,
});
/// Style of this button in disabled state
final FileSelectionButtonStyle? disabledStyle;
/// Style of this button in focused state
final FileSelectionButtonStyle? focusedStyle;
/// Style of this button in hovered state
final FileSelectionButtonStyle? hoveredStyle;
/// Style of this button in normal state
final FileSelectionButtonStyle? normalStyle;
/// Style of this button in tapped state
final FileSelectionButtonStyle? tappedStyle;
/// Style of this button in selected state
final FileSelectionButtonStyle? selectedStyle;
/// Style of this button in invalid state
final FileSelectionButtonStyle? invalidStyle;
}

44
packages/wyatt_ui_kit/lib/src/domain/button_theme_extension/flat_button_theme_extension.dart Normal file
View File

@ -0,0 +1,44 @@
// 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';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
abstract class FlatButtonThemeExtension
extends ThemeExtension<FlatButtonThemeExtension> {
const FlatButtonThemeExtension({
this.disabledStyle,
this.focusedStyle,
this.hoveredStyle,
this.normalStyle,
this.tappedStyle,
});
/// Style of this button in disabled state
final FlatButtonStyle? disabledStyle;
/// Style of this button in focused state
final FlatButtonStyle? focusedStyle;
/// Style of this button in hovered state
final FlatButtonStyle? hoveredStyle;
/// Style of this button in normal state
final FlatButtonStyle? normalStyle;
/// Style of this button in tapped state
final FlatButtonStyle? tappedStyle;
}

44
packages/wyatt_ui_kit/lib/src/domain/button_theme_extension/simple_icon_button_theme_extension.dart Normal file
View File

@ -0,0 +1,44 @@
// 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';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
abstract class SimpleIconButtonThemeExtension
extends ThemeExtension<SimpleIconButtonThemeExtension> {
const SimpleIconButtonThemeExtension({
this.disabledStyle,
this.focusedStyle,
this.hoveredStyle,
this.normalStyle,
this.tappedStyle,
});
/// Style of this button in disabled state
final SimpleIconButtonStyle? disabledStyle;
/// Style of this button in focused state
final SimpleIconButtonStyle? focusedStyle;
/// Style of this button in hovered state
final SimpleIconButtonStyle? hoveredStyle;
/// Style of this button in normal state
final SimpleIconButtonStyle? normalStyle;
/// Style of this button in tapped state
final SimpleIconButtonStyle? tappedStyle;
}

48
packages/wyatt_ui_kit/lib/src/domain/button_theme_extension/symbol_button_theme_extension.dart Normal file
View File

@ -0,0 +1,48 @@
// 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';
import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
abstract class SymbolButtonThemeExtension
extends ThemeExtension<SymbolButtonThemeExtension> {
const SymbolButtonThemeExtension({
this.disabledStyle,
this.focusedStyle,
this.hoveredStyle,
this.normalStyle,
this.tappedStyle,
this.selectedStyle,
});
/// Style of this button in disabled state
final SymbolButtonStyle? disabledStyle;
/// Style of this button in focused state
final SymbolButtonStyle? focusedStyle;
/// Style of this button in hovered state
final SymbolButtonStyle? hoveredStyle;
/// Style of this button in normal state
final SymbolButtonStyle? normalStyle;
/// Style of this button in tapped state
final SymbolButtonStyle? tappedStyle;
/// Style of this button in selected state
final SymbolButtonStyle? selectedStyle;
}

18
packages/wyatt_ui_kit/lib/src/domain/domain.dart Normal file
View File

@ -0,0 +1,18 @@
// 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/>.
export 'button_theme_extension/button_theme_extension.dart';
export 'card_theme_extension.dart';

18
packages/wyatt_ui_kit/lib/src/src.dart
View File

@ -14,22 +14,6 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. // along with this program. If not, see <https://www.gnu.org/licenses/>.
// 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/>.
export './components/components.dart'; export './components/components.dart';
export './core/core.dart'; export './core/core.dart';
export './domain/card_theme_extension.dart'; export './domain/domain.dart';

2
packages/wyatt_ui_kit/lib/wyatt_ui_kit.dart
View File

@ -17,4 +17,6 @@
/// UIKit and Design System used in Wyatt Studio. /// UIKit and Design System used in Wyatt Studio.
library wyatt_ui_kit; library wyatt_ui_kit;
export 'package:wyatt_ui_components/src/core/extensions/build_context_extensions.dart';
export './src/src.dart'; export './src/src.dart';