From cc6025f27cffac02b48cb708da83c7b4aecac5bf Mon Sep 17 00:00:00 2001 From: BirgittMajas <79840500+BirgittMajas@users.noreply.github.com> Date: Tue, 25 Apr 2023 15:48:51 +0300 Subject: [PATCH] fix: [MDS-508] Props check and ordering (#154) --- .../accordion/accordion_item_properties.dart | 18 +- lib/src/theme/accordion/accordion_theme.dart | 22 +- lib/src/theme/alert/alert_properties.dart | 7 +- .../theme/authcode/authcode_properties.dart | 6 +- .../theme/avatar/avatar_size_properties.dart | 50 +-- lib/src/theme/button/button_colors.dart | 1 + .../theme/button/button_size_properties.dart | 50 +-- lib/src/theme/button/button_theme.dart | 2 +- lib/src/theme/checkbox/checkbox_colors.dart | 4 +- lib/src/theme/chip/chip_size_properties.dart | 38 +-- lib/src/theme/effects/controls_effects.dart | 21 +- lib/src/theme/effects/effects.dart | 37 +- lib/src/theme/popover/popover_properties.dart | 38 +-- lib/src/theme/popover/popover_shadows.dart | 2 +- lib/src/theme/popover/popover_theme.dart | 22 +- lib/src/theme/switch/switch_colors.dart | 2 +- lib/src/theme/switch/switch_shadows.dart | 2 +- .../theme/switch/switch_size_properties.dart | 22 +- lib/src/theme/tag/tag_size_properties.dart | 38 +-- lib/src/theme/textarea/textarea_colors.dart | 1 - .../theme/textarea/textarea_properties.dart | 18 +- lib/src/theme/toast/toast_properties.dart | 21 +- lib/src/theme/tooltip/tooltip_properties.dart | 36 +- lib/src/theme/tooltip/tooltip_shadows.dart | 2 +- lib/src/theme/tooltip/tooltip_theme.dart | 22 +- lib/src/widgets/accordion/accordion_item.dart | 219 ++++++------ lib/src/widgets/alert/alert.dart | 30 +- lib/src/widgets/authcode/authcode.dart | 40 +-- lib/src/widgets/avatar/avatar.dart | 60 ++-- lib/src/widgets/avatar/avatar_clipper.dart | 12 +- lib/src/widgets/buttons/button.dart | 316 +++++++++--------- lib/src/widgets/buttons/filled_button.dart | 104 +++--- lib/src/widgets/buttons/outlined_button.dart | 104 +++--- lib/src/widgets/buttons/text_button.dart | 102 +++--- lib/src/widgets/checkbox/checkbox.dart | 79 ++--- lib/src/widgets/chips/chip.dart | 203 ++++++----- lib/src/widgets/chips/text_chip.dart | 178 +++++----- lib/src/widgets/common/base_control.dart | 114 +++---- .../widgets/common/effects/focus_effect.dart | 8 +- .../widgets/common/effects/pulse_effect.dart | 8 +- .../progress_indicators/base_progress.dart | 36 +- .../circular_progress_indicator.dart | 10 +- .../linear_progress_indicator.dart | 16 +- lib/src/widgets/loaders/circular_loader.dart | 35 +- lib/src/widgets/loaders/linear_loader.dart | 31 +- lib/src/widgets/modal/modal.dart | 14 +- lib/src/widgets/popover/popover.dart | 93 +++--- .../widgets/progress/circular_progress.dart | 43 +-- lib/src/widgets/progress/linear_progress.dart | 39 ++- lib/src/widgets/radio/radio.dart | 106 +++--- lib/src/widgets/switch/switch.dart | 114 +++---- lib/src/widgets/tag/tag.dart | 68 ++-- lib/src/widgets/textarea/textarea.dart | 294 ++++++++-------- lib/src/widgets/toast/toast.dart | 56 ++-- lib/src/widgets/tooltip/tooltip.dart | 107 +++--- lib/src/widgets/tooltip/tooltip_shape.dart | 16 +- 56 files changed, 1582 insertions(+), 1555 deletions(-) diff --git a/lib/src/theme/accordion/accordion_item_properties.dart b/lib/src/theme/accordion/accordion_item_properties.dart index 2ddc1148..16e43d58 100644 --- a/lib/src/theme/accordion/accordion_item_properties.dart +++ b/lib/src/theme/accordion/accordion_item_properties.dart @@ -6,20 +6,20 @@ import 'package:moon_design/src/theme/borders.dart'; @immutable class MoonAccordionItemProperties extends ThemeExtension with DiagnosticableTreeMixin { static final properties = MoonAccordionItemProperties( + borderRadius: MoonBorders.borders.interactiveSm, transitionDuration: const Duration(milliseconds: 200), transitionCurve: Curves.easeInOutCubic, - borderRadius: MoonBorders.borders.interactiveSm, ); + /// Accordion item border radius. + final BorderRadius borderRadius; + /// Accordion item transition duration. final Duration transitionDuration; /// Accordion item transition curve. final Curve transitionCurve; - /// Accordion item border radius. - final BorderRadius borderRadius; - const MoonAccordionItemProperties({ required this.borderRadius, required this.transitionDuration, @@ -28,14 +28,14 @@ class MoonAccordionItemProperties extends ThemeExtension("borderRadius", borderRadius)) ..add(DiagnosticsProperty("transitionDuration", transitionDuration)) - ..add(DiagnosticsProperty("transitionCurve", transitionCurve)) - ..add(DiagnosticsProperty("borderRadius", borderRadius)); + ..add(DiagnosticsProperty("transitionCurve", transitionCurve)); } } diff --git a/lib/src/theme/accordion/accordion_theme.dart b/lib/src/theme/accordion/accordion_theme.dart index fe316018..d93cb7aa 100644 --- a/lib/src/theme/accordion/accordion_theme.dart +++ b/lib/src/theme/accordion/accordion_theme.dart @@ -11,15 +11,15 @@ class MoonAccordionTheme extends ThemeExtension with Diagnos static final light = MoonAccordionTheme( itemColors: MoonAccordionItemColors.light, itemProperties: MoonAccordionItemProperties.properties, - itemSizes: MoonAccordionItemSizes.sizes, itemShadows: MoonAccordionItemShadows.light, + itemSizes: MoonAccordionItemSizes.sizes, ); static final dark = MoonAccordionTheme( itemColors: MoonAccordionItemColors.dark, itemProperties: MoonAccordionItemProperties.properties, - itemSizes: MoonAccordionItemSizes.sizes, itemShadows: MoonAccordionItemShadows.dark, + itemSizes: MoonAccordionItemSizes.sizes, ); /// Accordion item colors. @@ -28,31 +28,31 @@ class MoonAccordionTheme extends ThemeExtension with Diagnos /// Accordion item properties. final MoonAccordionItemProperties itemProperties; - /// Accordion item sizes. - final MoonAccordionItemSizes itemSizes; - /// Accordion item shadows. final MoonAccordionItemShadows itemShadows; + /// Accordion item sizes. + final MoonAccordionItemSizes itemSizes; + const MoonAccordionTheme({ required this.itemColors, required this.itemProperties, - required this.itemSizes, required this.itemShadows, + required this.itemSizes, }); @override MoonAccordionTheme copyWith({ MoonAccordionItemColors? itemColors, MoonAccordionItemProperties? itemProperties, - MoonAccordionItemSizes? itemSizes, MoonAccordionItemShadows? itemShadows, + MoonAccordionItemSizes? itemSizes, }) { return MoonAccordionTheme( itemColors: itemColors ?? this.itemColors, itemProperties: itemProperties ?? this.itemProperties, - itemSizes: itemSizes ?? this.itemSizes, itemShadows: itemShadows ?? this.itemShadows, + itemSizes: itemSizes ?? this.itemSizes, ); } @@ -63,8 +63,8 @@ class MoonAccordionTheme extends ThemeExtension with Diagnos return MoonAccordionTheme( itemColors: itemColors.lerp(other.itemColors, t), itemProperties: itemProperties.lerp(other.itemProperties, t), - itemSizes: itemSizes.lerp(other.itemSizes, t), itemShadows: itemShadows.lerp(other.itemShadows, t), + itemSizes: itemSizes.lerp(other.itemSizes, t), ); } @@ -75,7 +75,7 @@ class MoonAccordionTheme extends ThemeExtension with Diagnos ..add(DiagnosticsProperty("type", "MoonAccordionTheme")) ..add(DiagnosticsProperty("itemColors", itemColors)) ..add(DiagnosticsProperty("itemProperties", itemProperties)) - ..add(DiagnosticsProperty("itemSizes", itemSizes)) - ..add(DiagnosticsProperty("itemShadows", itemShadows)); + ..add(DiagnosticsProperty("itemShadows", itemShadows)) + ..add(DiagnosticsProperty("itemSizes", itemSizes)); } } diff --git a/lib/src/theme/alert/alert_properties.dart b/lib/src/theme/alert/alert_properties.dart index 088ab497..1719fc70 100644 --- a/lib/src/theme/alert/alert_properties.dart +++ b/lib/src/theme/alert/alert_properties.dart @@ -1,4 +1,5 @@ import 'dart:ui'; + import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @@ -107,9 +108,9 @@ class MoonAlertProperties extends ThemeExtension with Diagn properties ..add(DiagnosticsProperty("type", "MoonAlertProperties")) ..add(DiagnosticsProperty("borderRadius", borderRadius)) - ..add(DiagnosticsProperty("horizontalGap", horizontalGap)) - ..add(DiagnosticsProperty("minimumHeight", minimumHeight)) - ..add(DiagnosticsProperty("verticalGap", verticalGap)) + ..add(DoubleProperty("horizontalGap", horizontalGap)) + ..add(DoubleProperty("minimumHeight", minimumHeight)) + ..add(DoubleProperty("verticalGap", verticalGap)) ..add(DiagnosticsProperty("transitionDuration", transitionDuration)) ..add(DiagnosticsProperty("transitionCurve", transitionCurve)) ..add(DiagnosticsProperty("padding", padding)) diff --git a/lib/src/theme/authcode/authcode_properties.dart b/lib/src/theme/authcode/authcode_properties.dart index 475b6666..86dca9a6 100644 --- a/lib/src/theme/authcode/authcode_properties.dart +++ b/lib/src/theme/authcode/authcode_properties.dart @@ -124,9 +124,9 @@ class MoonAuthCodeProperties extends ThemeExtension with properties ..add(DiagnosticsProperty("type", "MoonAuthCodeProperties")) ..add(DiagnosticsProperty("borderRadius", borderRadius)) - ..add(DiagnosticsProperty("gap", gap)) - ..add(DiagnosticsProperty("height", height)) - ..add(DiagnosticsProperty("width", width)) + ..add(DoubleProperty("gap", gap)) + ..add(DoubleProperty("height", height)) + ..add(DoubleProperty("width", width)) ..add(DiagnosticsProperty("animationDuration", animationDuration)) ..add(DiagnosticsProperty("errorAnimationDuration", errorAnimationDuration)) ..add(DiagnosticsProperty("peekDuration", peekDuration)) diff --git a/lib/src/theme/avatar/avatar_size_properties.dart b/lib/src/theme/avatar/avatar_size_properties.dart index 0a36029e..e5b6cec9 100644 --- a/lib/src/theme/avatar/avatar_size_properties.dart +++ b/lib/src/theme/avatar/avatar_size_properties.dart @@ -13,64 +13,64 @@ class MoonAvatarSizeProperties extends ThemeExtension static final _badgeMarginValueToAvatarRatio = MoonSizes.sizes.x5s / MoonSizes.sizes.x2l; static final xs = MoonAvatarSizeProperties( + borderRadius: MoonBorders.borders.interactiveXs, avatarSizeValue: MoonSizes.sizes.xs, - badgeSizeValue: MoonSizes.sizes.xs * _badgeToAvatarRatio, badgeMarginValue: MoonSizes.sizes.xs * _badgeMarginValueToAvatarRatio, - borderRadius: MoonBorders.borders.interactiveXs, + badgeSizeValue: MoonSizes.sizes.xs * _badgeToAvatarRatio, textStyle: MoonTextStyles.heading.text10, ); static final sm = MoonAvatarSizeProperties( + borderRadius: MoonBorders.borders.interactiveSm, avatarSizeValue: MoonSizes.sizes.sm, - badgeSizeValue: MoonSizes.sizes.sm * _badgeToAvatarRatio, badgeMarginValue: MoonSizes.sizes.sm * _badgeMarginValueToAvatarRatio, - borderRadius: MoonBorders.borders.interactiveSm, + badgeSizeValue: MoonSizes.sizes.sm * _badgeToAvatarRatio, textStyle: MoonTextStyles.heading.text12, ); static final md = MoonAvatarSizeProperties( + borderRadius: MoonBorders.borders.interactiveSm, avatarSizeValue: MoonSizes.sizes.md, - badgeSizeValue: MoonSizes.sizes.md * _badgeToAvatarRatio, badgeMarginValue: MoonSizes.sizes.md * _badgeMarginValueToAvatarRatio, - borderRadius: MoonBorders.borders.interactiveSm, + badgeSizeValue: MoonSizes.sizes.md * _badgeToAvatarRatio, textStyle: MoonTextStyles.heading.text14, ); static final lg = MoonAvatarSizeProperties( + borderRadius: MoonBorders.borders.interactiveSm, avatarSizeValue: MoonSizes.sizes.lg, - badgeSizeValue: MoonSizes.sizes.lg * _badgeToAvatarRatio, badgeMarginValue: MoonSizes.sizes.lg * _badgeMarginValueToAvatarRatio, - borderRadius: MoonBorders.borders.interactiveSm, + badgeSizeValue: MoonSizes.sizes.lg * _badgeToAvatarRatio, textStyle: MoonTextStyles.heading.text16, ); static final xl = MoonAvatarSizeProperties( + borderRadius: MoonBorders.borders.interactiveMd, avatarSizeValue: MoonSizes.sizes.xl, - badgeSizeValue: MoonSizes.sizes.xl * _badgeToAvatarRatio, badgeMarginValue: MoonSizes.sizes.xl * _badgeMarginValueToAvatarRatio, - borderRadius: MoonBorders.borders.interactiveMd, + badgeSizeValue: MoonSizes.sizes.xl * _badgeToAvatarRatio, textStyle: MoonTextStyles.heading.text16, ); static final x2l = MoonAvatarSizeProperties( + borderRadius: MoonBorders.borders.interactiveMd, avatarSizeValue: MoonSizes.sizes.x2l, - badgeSizeValue: MoonSizes.sizes.x2l * _badgeToAvatarRatio, badgeMarginValue: MoonSizes.sizes.x2l * _badgeMarginValueToAvatarRatio, - borderRadius: MoonBorders.borders.interactiveMd, + badgeSizeValue: MoonSizes.sizes.x2l * _badgeToAvatarRatio, textStyle: MoonTextStyles.heading.text20, ); + /// Avatar border radius. + final BorderRadius borderRadius; + /// Avatar size value. final double avatarSizeValue; - /// Avatar badge size value. - final double badgeSizeValue; - /// Avatar badge margin value. final double badgeMarginValue; - /// Avatar border radius. - final BorderRadius borderRadius; + /// Avatar badge size value. + final double badgeSizeValue; /// Avatar text style. final TextStyle textStyle; @@ -85,17 +85,17 @@ class MoonAvatarSizeProperties extends ThemeExtension @override MoonAvatarSizeProperties copyWith({ + BorderRadius? borderRadius, double? avatarSizeValue, - double? badgeSizeValue, double? badgeMarginValue, - BorderRadius? borderRadius, + double? badgeSizeValue, TextStyle? textStyle, }) { return MoonAvatarSizeProperties( + borderRadius: borderRadius ?? this.borderRadius, avatarSizeValue: avatarSizeValue ?? this.avatarSizeValue, - badgeSizeValue: badgeSizeValue ?? this.badgeSizeValue, badgeMarginValue: badgeMarginValue ?? this.badgeMarginValue, - borderRadius: borderRadius ?? this.borderRadius, + badgeSizeValue: badgeSizeValue ?? this.badgeSizeValue, textStyle: textStyle ?? this.textStyle, ); } @@ -105,10 +105,10 @@ class MoonAvatarSizeProperties extends ThemeExtension if (other is! MoonAvatarSizeProperties) return this; return MoonAvatarSizeProperties( + borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, avatarSizeValue: lerpDouble(avatarSizeValue, other.avatarSizeValue, t)!, - badgeSizeValue: lerpDouble(badgeSizeValue, other.badgeSizeValue, t)!, badgeMarginValue: lerpDouble(badgeMarginValue, other.badgeMarginValue, t)!, - borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, + badgeSizeValue: lerpDouble(badgeSizeValue, other.badgeSizeValue, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @@ -118,10 +118,10 @@ class MoonAvatarSizeProperties extends ThemeExtension super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAvatarSizeProperties")) + ..add(DiagnosticsProperty("borderRadius", borderRadius)) ..add(DoubleProperty("avatarSizeValue", avatarSizeValue)) - ..add(DoubleProperty("badgeSizeValue", badgeSizeValue)) ..add(DoubleProperty("badgeMarginValue", badgeMarginValue)) - ..add(DiagnosticsProperty("borderRadius", borderRadius)) + ..add(DoubleProperty("badgeSizeValue", badgeSizeValue)) ..add(DiagnosticsProperty("textStyle", textStyle)); } } diff --git a/lib/src/theme/button/button_colors.dart b/lib/src/theme/button/button_colors.dart index 62432941..89146b75 100644 --- a/lib/src/theme/button/button_colors.dart +++ b/lib/src/theme/button/button_colors.dart @@ -1,5 +1,6 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; + import 'package:moon_design/src/theme/colors.dart'; @immutable diff --git a/lib/src/theme/button/button_size_properties.dart b/lib/src/theme/button/button_size_properties.dart index bc54bd57..838a1eec 100644 --- a/lib/src/theme/button/button_size_properties.dart +++ b/lib/src/theme/button/button_size_properties.dart @@ -10,92 +10,92 @@ import 'package:moon_design/src/theme/typography/text_styles.dart'; @immutable class MoonButtonSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { static final xs = MoonButtonSizeProperties( - height: MoonSizes.sizes.xs, + borderRadius: MoonBorders.borders.interactiveXs, gap: MoonSizes.sizes.x5s, + height: MoonSizes.sizes.xs, iconSizeValue: MoonSizes.sizes.x2s, padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), - borderRadius: MoonBorders.borders.interactiveXs, textStyle: MoonTextStyles.heading.text12, ); static final sm = MoonButtonSizeProperties( - height: MoonSizes.sizes.sm, + borderRadius: MoonBorders.borders.interactiveSm, gap: MoonSizes.sizes.x5s, + height: MoonSizes.sizes.sm, iconSizeValue: MoonSizes.sizes.xs, padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - borderRadius: MoonBorders.borders.interactiveSm, textStyle: MoonTextStyles.heading.text14, ); static final md = MoonButtonSizeProperties( - height: MoonSizes.sizes.md, + borderRadius: MoonBorders.borders.interactiveSm, gap: MoonSizes.sizes.x4s, + height: MoonSizes.sizes.md, iconSizeValue: MoonSizes.sizes.xs, padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s), - borderRadius: MoonBorders.borders.interactiveSm, textStyle: MoonTextStyles.heading.text14, ); static final lg = MoonButtonSizeProperties( - height: MoonSizes.sizes.lg, + borderRadius: MoonBorders.borders.interactiveSm, gap: MoonSizes.sizes.x3s, + height: MoonSizes.sizes.lg, iconSizeValue: MoonSizes.sizes.xs, padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s), - borderRadius: MoonBorders.borders.interactiveSm, textStyle: MoonTextStyles.heading.text16, ); static final xl = MoonButtonSizeProperties( - height: MoonSizes.sizes.xl, + borderRadius: MoonBorders.borders.interactiveMd, gap: MoonSizes.sizes.x2s, + height: MoonSizes.sizes.xl, iconSizeValue: MoonSizes.sizes.xs, padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.xs), - borderRadius: MoonBorders.borders.interactiveMd, textStyle: MoonTextStyles.heading.text16, ); - /// Button height. - final double height; + /// Button border radius. + final BorderRadius borderRadius; /// Space between button children. final double gap; + /// Button height. + final double height; + /// Button icon size value. final double iconSizeValue; /// Padding around button children. final EdgeInsetsGeometry padding; - /// Button border radius. - final BorderRadius borderRadius; - /// Button text style. final TextStyle textStyle; const MoonButtonSizeProperties({ - required this.height, + required this.borderRadius, required this.gap, + required this.height, required this.iconSizeValue, required this.padding, - required this.borderRadius, required this.textStyle, }); @override MoonButtonSizeProperties copyWith({ - double? height, + BorderRadius? borderRadius, double? gap, + double? height, double? iconSizeValue, EdgeInsetsGeometry? padding, - BorderRadius? borderRadius, TextStyle? textStyle, }) { return MoonButtonSizeProperties( - height: height ?? this.height, + borderRadius: borderRadius ?? this.borderRadius, gap: gap ?? this.gap, + height: height ?? this.height, iconSizeValue: iconSizeValue ?? this.iconSizeValue, padding: padding ?? this.padding, - borderRadius: borderRadius ?? this.borderRadius, textStyle: textStyle ?? this.textStyle, ); } @@ -105,11 +105,11 @@ class MoonButtonSizeProperties extends ThemeExtension if (other is! MoonButtonSizeProperties) return this; return MoonButtonSizeProperties( - height: lerpDouble(height, other.height, t)!, + borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, gap: lerpDouble(gap, other.gap, t)!, + height: lerpDouble(height, other.height, t)!, iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, padding: EdgeInsetsGeometry.lerp(padding, other.padding, t)!, - borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @@ -119,11 +119,11 @@ class MoonButtonSizeProperties extends ThemeExtension super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonButtonSizeProperties")) - ..add(DoubleProperty("height", height)) + ..add(DiagnosticsProperty("borderRadius", borderRadius)) ..add(DoubleProperty("gap", gap)) + ..add(DoubleProperty("height", height)) ..add(DoubleProperty("iconSizeValue", iconSizeValue)) ..add(DiagnosticsProperty("padding", padding)) - ..add(DiagnosticsProperty("borderRadius", borderRadius)) ..add(DiagnosticsProperty("textStyle", textStyle)); } } diff --git a/lib/src/theme/button/button_theme.dart b/lib/src/theme/button/button_theme.dart index 4139b93a..9c4baff9 100644 --- a/lib/src/theme/button/button_theme.dart +++ b/lib/src/theme/button/button_theme.dart @@ -1,7 +1,7 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/button/button_colors.dart'; +import 'package:moon_design/src/theme/button/button_colors.dart'; import 'package:moon_design/src/theme/button/button_sizes.dart'; @immutable diff --git a/lib/src/theme/checkbox/checkbox_colors.dart b/lib/src/theme/checkbox/checkbox_colors.dart index 56aa7840..085bba62 100644 --- a/lib/src/theme/checkbox/checkbox_colors.dart +++ b/lib/src/theme/checkbox/checkbox_colors.dart @@ -7,16 +7,16 @@ import 'package:moon_design/src/theme/colors.dart'; class MoonCheckboxColors extends ThemeExtension with DiagnosticableTreeMixin { static final light = MoonCheckboxColors( activeColor: MoonColors.light.piccolo, + borderColor: MoonColors.light.trunks, checkColor: MoonColors.light.goten, inactiveColor: Colors.transparent, - borderColor: MoonColors.light.trunks, ); static final dark = MoonCheckboxColors( activeColor: MoonColors.dark.piccolo, + borderColor: MoonColors.dark.trunks, checkColor: MoonColors.dark.goten, inactiveColor: Colors.transparent, - borderColor: MoonColors.dark.trunks, ); /// Checkbox active color. diff --git a/lib/src/theme/chip/chip_size_properties.dart b/lib/src/theme/chip/chip_size_properties.dart index e6efec9c..02c933b9 100644 --- a/lib/src/theme/chip/chip_size_properties.dart +++ b/lib/src/theme/chip/chip_size_properties.dart @@ -10,65 +10,65 @@ import 'package:moon_design/src/theme/typography/text_styles.dart'; @immutable class MoonChipSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { static final sm = MoonChipSizeProperties( - height: MoonSizes.sizes.sm, + borderRadius: MoonBorders.borders.interactiveXs, gap: MoonSizes.sizes.x5s, + height: MoonSizes.sizes.sm, iconSizeValue: MoonSizes.sizes.x2s, padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - borderRadius: MoonBorders.borders.interactiveXs, textStyle: MoonTextStyles.heading.text14, ); static final md = MoonChipSizeProperties( - height: MoonSizes.sizes.md, + borderRadius: MoonBorders.borders.interactiveSm, gap: MoonSizes.sizes.x4s, + height: MoonSizes.sizes.md, iconSizeValue: MoonSizes.sizes.xs, padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - borderRadius: MoonBorders.borders.interactiveSm, textStyle: MoonTextStyles.heading.text14, ); - /// Chip height. - final double height; + /// Chip border radius. + final BorderRadius borderRadius; /// Space between chip children. final double gap; + /// Chip height. + final double height; + /// Chip icon size value. final double iconSizeValue; /// Padding around chip children. final EdgeInsetsGeometry padding; - /// Chip border radius. - final BorderRadius borderRadius; - /// Chip text style. final TextStyle textStyle; const MoonChipSizeProperties({ - required this.height, + required this.borderRadius, required this.gap, + required this.height, required this.iconSizeValue, required this.padding, - required this.borderRadius, required this.textStyle, }); @override MoonChipSizeProperties copyWith({ - double? height, + BorderRadius? borderRadius, double? gap, + double? height, double? iconSizeValue, EdgeInsetsGeometry? padding, - BorderRadius? borderRadius, TextStyle? textStyle, }) { return MoonChipSizeProperties( - height: height ?? this.height, + borderRadius: borderRadius ?? this.borderRadius, gap: gap ?? this.gap, + height: height ?? this.height, iconSizeValue: iconSizeValue ?? this.iconSizeValue, padding: padding ?? this.padding, - borderRadius: borderRadius ?? this.borderRadius, textStyle: textStyle ?? this.textStyle, ); } @@ -78,11 +78,11 @@ class MoonChipSizeProperties extends ThemeExtension with if (other is! MoonChipSizeProperties) return this; return MoonChipSizeProperties( - height: lerpDouble(height, other.height, t)!, + borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, gap: lerpDouble(gap, other.gap, t)!, + height: lerpDouble(height, other.height, t)!, iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, padding: EdgeInsetsGeometry.lerp(padding, other.padding, t)!, - borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @@ -92,11 +92,11 @@ class MoonChipSizeProperties extends ThemeExtension with super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonChipSizeProperties")) - ..add(DoubleProperty("height", height)) + ..add(DiagnosticsProperty("borderRadius", borderRadius)) ..add(DoubleProperty("gap", gap)) + ..add(DoubleProperty("height", height)) ..add(DoubleProperty("iconSizeValue", iconSizeValue)) ..add(DiagnosticsProperty("padding", padding)) - ..add(DiagnosticsProperty("borderRadius", borderRadius)) ..add(DiagnosticsProperty("textStyle", textStyle)); } } diff --git a/lib/src/theme/effects/controls_effects.dart b/lib/src/theme/effects/controls_effects.dart index 70ce4d4a..a9d9e677 100644 --- a/lib/src/theme/effects/controls_effects.dart +++ b/lib/src/theme/effects/controls_effects.dart @@ -2,6 +2,7 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; + import 'package:moon_design/src/theme/colors.dart'; @immutable @@ -13,21 +14,21 @@ class MoonControlsEffects extends ThemeExtension with Diagn ); static final controlPulseEffect = MoonControlsEffects( + effectColor: MoonColors.light.piccolo, effectDuration: const Duration(milliseconds: 1400), effectCurve: Curves.easeInOutCubic, - effectColor: MoonColors.light.piccolo, effectExtent: 24, ); + /// Controls effect color. + final Color? effectColor; + /// Controls effect duration. final Duration effectDuration; /// Controls effect curve. final Curve effectCurve; - /// Controls effect color. - final Color? effectColor; - /// Controls effect width. final double? effectExtent; @@ -35,25 +36,25 @@ class MoonControlsEffects extends ThemeExtension with Diagn final double? effectScalar; const MoonControlsEffects({ + this.effectColor, required this.effectDuration, required this.effectCurve, - this.effectColor, this.effectExtent, this.effectScalar, }); @override MoonControlsEffects copyWith({ + Color? effectColor, Duration? effectDuration, Curve? effectCurve, - Color? effectColor, double? effectExtent, double? effectScalar, }) { return MoonControlsEffects( + effectColor: effectColor ?? this.effectColor, effectDuration: effectDuration ?? this.effectDuration, effectCurve: effectCurve ?? this.effectCurve, - effectColor: effectColor ?? this.effectColor, effectExtent: effectExtent ?? this.effectExtent, effectScalar: effectScalar ?? this.effectScalar, ); @@ -64,9 +65,9 @@ class MoonControlsEffects extends ThemeExtension with Diagn if (other is! MoonControlsEffects) return this; return MoonControlsEffects( + effectColor: Color.lerp(effectColor, other.effectColor, t), effectDuration: lerpDuration(effectDuration, other.effectDuration, t), effectCurve: other.effectCurve, - effectColor: Color.lerp(effectColor, other.effectColor, t), effectExtent: lerpDouble(effectExtent, other.effectExtent, t), effectScalar: lerpDouble(effectScalar, other.effectScalar, t), ); @@ -77,10 +78,10 @@ class MoonControlsEffects extends ThemeExtension with Diagn super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonControlsEffects")) + ..add(ColorProperty("effectColor", effectColor)) ..add(DiagnosticsProperty("effectDuration", effectDuration)) ..add(DiagnosticsProperty("effectCurve", effectCurve)) - ..add(ColorProperty("effectColor", effectColor)) ..add(DoubleProperty("effectExtent", effectExtent)) - ..add(DoubleProperty("transitionLowerBound", effectScalar)); + ..add(DoubleProperty("effectScalar", effectScalar)); } } diff --git a/lib/src/theme/effects/effects.dart b/lib/src/theme/effects/effects.dart index cffd32ef..14a97603 100644 --- a/lib/src/theme/effects/effects.dart +++ b/lib/src/theme/effects/effects.dart @@ -8,50 +8,50 @@ import 'package:moon_design/src/theme/effects/hover_effects.dart'; @immutable class MoonEffects extends ThemeExtension with DiagnosticableTreeMixin { static final light = MoonEffects( - controlScaleEffect: MoonControlsEffects.controlScaleEffect, - controlPulseEffect: MoonControlsEffects.controlPulseEffect, controlFocusEffect: MoonFocusEffects.lightFocusEffect, controlHoverEffect: MoonHoverEffects.lightHoverEffect, + controlPulseEffect: MoonControlsEffects.controlPulseEffect, + controlScaleEffect: MoonControlsEffects.controlScaleEffect, ); static final dark = MoonEffects( - controlScaleEffect: MoonControlsEffects.controlScaleEffect, - controlPulseEffect: MoonControlsEffects.controlPulseEffect, controlFocusEffect: MoonFocusEffects.darkFocusEffect, controlHoverEffect: MoonHoverEffects.darkHoverEffect, + controlPulseEffect: MoonControlsEffects.controlPulseEffect, + controlScaleEffect: MoonControlsEffects.controlScaleEffect, ); - /// Control widgets scale effect. - final MoonControlsEffects controlScaleEffect; - - /// Control widgets focus effect. - final MoonControlsEffects controlPulseEffect; - /// Control widgets focus effect. final MoonFocusEffects controlFocusEffect; /// Control widgets hover effect. final MoonHoverEffects controlHoverEffect; + /// Control widgets focus effect. + final MoonControlsEffects controlPulseEffect; + + /// Control widgets scale effect. + final MoonControlsEffects controlScaleEffect; + const MoonEffects({ - required this.controlScaleEffect, - required this.controlPulseEffect, required this.controlFocusEffect, required this.controlHoverEffect, + required this.controlPulseEffect, + required this.controlScaleEffect, }); @override MoonEffects copyWith({ - MoonControlsEffects? controlScaleEffect, - MoonControlsEffects? controlPulseEffect, MoonFocusEffects? controlFocusEffect, MoonHoverEffects? controlHoverEffect, + MoonControlsEffects? controlPulseEffect, + MoonControlsEffects? controlScaleEffect, }) { return MoonEffects( - controlScaleEffect: controlScaleEffect ?? this.controlScaleEffect, - controlPulseEffect: controlPulseEffect ?? this.controlPulseEffect, controlFocusEffect: controlFocusEffect ?? this.controlFocusEffect, controlHoverEffect: controlHoverEffect ?? this.controlHoverEffect, + controlPulseEffect: controlPulseEffect ?? this.controlPulseEffect, + controlScaleEffect: controlScaleEffect ?? this.controlScaleEffect, ); } @@ -60,10 +60,11 @@ class MoonEffects extends ThemeExtension with DiagnosticableTreeMix if (other is! MoonEffects) return this; return MoonEffects( - controlScaleEffect: controlScaleEffect.lerp(other.controlScaleEffect, t), - controlPulseEffect: controlPulseEffect.lerp(other.controlPulseEffect, t), controlFocusEffect: controlFocusEffect.lerp(other.controlFocusEffect, t), controlHoverEffect: controlHoverEffect.lerp(other.controlHoverEffect, t), + controlScaleEffect: controlScaleEffect.lerp(other.controlScaleEffect, t), + controlPulseEffect: controlPulseEffect.lerp(other.controlPulseEffect, t), + ); } diff --git a/lib/src/theme/popover/popover_properties.dart b/lib/src/theme/popover/popover_properties.dart index f3415f28..201dc6f0 100644 --- a/lib/src/theme/popover/popover_properties.dart +++ b/lib/src/theme/popover/popover_properties.dart @@ -9,50 +9,50 @@ import 'package:moon_design/src/theme/sizes.dart'; @immutable class MoonPopoverProperties extends ThemeExtension with DiagnosticableTreeMixin { static final properties = MoonPopoverProperties( - distanceToTarget: MoonSizes.sizes.x4s, - contentPadding: EdgeInsets.all(MoonSizes.sizes.x3s), borderRadius: MoonBorders.borders.interactiveMd, + distanceToTarget: MoonSizes.sizes.x4s, transitionDuration: const Duration(milliseconds: 150), transitionCurve: Curves.easeInOutCubic, + contentPadding: EdgeInsets.all(MoonSizes.sizes.x3s), ); - /// Popover distance to target child widget. - final double distanceToTarget; - - /// Padding around popover content. - final EdgeInsetsGeometry contentPadding; - /// Popover border radius. final BorderRadius borderRadius; + /// Popover distance to target child widget. + final double distanceToTarget; + /// Popover transition duration (fade in or out animation). final Duration transitionDuration; /// Popover transition curve (fade in or out animation). final Curve transitionCurve; + /// Padding around popover content. + final EdgeInsetsGeometry contentPadding; + const MoonPopoverProperties({ - required this.distanceToTarget, - required this.contentPadding, required this.borderRadius, + required this.distanceToTarget, required this.transitionDuration, required this.transitionCurve, + required this.contentPadding, }); @override MoonPopoverProperties copyWith({ - double? distanceToTarget, - EdgeInsetsGeometry? contentPadding, BorderRadius? borderRadius, + double? distanceToTarget, Duration? transitionDuration, Curve? transitionCurve, + EdgeInsetsGeometry? contentPadding, }) { return MoonPopoverProperties( - distanceToTarget: distanceToTarget ?? this.distanceToTarget, - contentPadding: contentPadding ?? this.contentPadding, borderRadius: borderRadius ?? this.borderRadius, + distanceToTarget: distanceToTarget ?? this.distanceToTarget, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, + contentPadding: contentPadding ?? this.contentPadding, ); } @@ -61,11 +61,11 @@ class MoonPopoverProperties extends ThemeExtension with D if (other is! MoonPopoverProperties) return this; return MoonPopoverProperties( - distanceToTarget: lerpDouble(distanceToTarget, other.distanceToTarget, t)!, - contentPadding: EdgeInsetsGeometry.lerp(contentPadding, other.contentPadding, t)!, borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, + distanceToTarget: lerpDouble(distanceToTarget, other.distanceToTarget, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, + contentPadding: EdgeInsetsGeometry.lerp(contentPadding, other.contentPadding, t)!, ); } @@ -74,10 +74,10 @@ class MoonPopoverProperties extends ThemeExtension with D super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonPopoverProperties")) - ..add(DoubleProperty("distanceToTarget", distanceToTarget)) - ..add(DiagnosticsProperty("contentPadding", contentPadding)) ..add(DiagnosticsProperty("borderRadius", borderRadius)) + ..add(DoubleProperty("distanceToTarget", distanceToTarget)) ..add(DiagnosticsProperty("transitionDuration", transitionDuration)) - ..add(DiagnosticsProperty("transitionCurve", transitionCurve)); + ..add(DiagnosticsProperty("transitionCurve", transitionCurve)) + ..add(DiagnosticsProperty("contentPadding", contentPadding)); } } diff --git a/lib/src/theme/popover/popover_shadows.dart b/lib/src/theme/popover/popover_shadows.dart index 715fadd5..b672f014 100644 --- a/lib/src/theme/popover/popover_shadows.dart +++ b/lib/src/theme/popover/popover_shadows.dart @@ -41,6 +41,6 @@ class MoonPopoverShadows extends ThemeExtension with Diagnos super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonPopoverShadows")) - ..add(DiagnosticsProperty>("shadows", popoverShadows)); + ..add(DiagnosticsProperty>("popoverShadows", popoverShadows)); } } diff --git a/lib/src/theme/popover/popover_theme.dart b/lib/src/theme/popover/popover_theme.dart index 628863ef..92ef0499 100644 --- a/lib/src/theme/popover/popover_theme.dart +++ b/lib/src/theme/popover/popover_theme.dart @@ -9,41 +9,41 @@ import 'package:moon_design/src/theme/popover/popover_shadows.dart'; class MoonPopoverTheme extends ThemeExtension with DiagnosticableTreeMixin { static final light = MoonPopoverTheme( colors: MoonPopoverColors.light, - shadows: MoonPopoverShadows.light, properties: MoonPopoverProperties.properties, + shadows: MoonPopoverShadows.light, ); static final dark = MoonPopoverTheme( colors: MoonPopoverColors.dark, - shadows: MoonPopoverShadows.dark, properties: MoonPopoverProperties.properties, + shadows: MoonPopoverShadows.dark, ); /// Popover colors. final MoonPopoverColors colors; - /// Popover shadows. - final MoonPopoverShadows shadows; - /// Popover properties. final MoonPopoverProperties properties; + /// Popover shadows. + final MoonPopoverShadows shadows; + const MoonPopoverTheme({ required this.colors, - required this.shadows, required this.properties, + required this.shadows, }); @override MoonPopoverTheme copyWith({ MoonPopoverColors? colors, - MoonPopoverShadows? shadows, MoonPopoverProperties? properties, + MoonPopoverShadows? shadows, }) { return MoonPopoverTheme( colors: colors ?? this.colors, - shadows: shadows ?? this.shadows, properties: properties ?? this.properties, + shadows: shadows ?? this.shadows, ); } @@ -53,8 +53,8 @@ class MoonPopoverTheme extends ThemeExtension with Diagnostica return MoonPopoverTheme( colors: colors.lerp(other.colors, t), - shadows: shadows.lerp(other.shadows, t), properties: properties.lerp(other.properties, t), + shadows: shadows.lerp(other.shadows, t), ); } @@ -64,7 +64,7 @@ class MoonPopoverTheme extends ThemeExtension with Diagnostica diagnosticProperties ..add(DiagnosticsProperty("type", "MoonPopoverTheme")) ..add(DiagnosticsProperty("colors", colors)) - ..add(DiagnosticsProperty("shadows", shadows)) - ..add(DiagnosticsProperty("properties", properties)); + ..add(DiagnosticsProperty("properties", properties)) + ..add(DiagnosticsProperty("shadows", shadows)); } } diff --git a/lib/src/theme/switch/switch_colors.dart b/lib/src/theme/switch/switch_colors.dart index 7a71a679..1f1e7eb1 100644 --- a/lib/src/theme/switch/switch_colors.dart +++ b/lib/src/theme/switch/switch_colors.dart @@ -23,7 +23,7 @@ class MoonSwitchColors extends ThemeExtension with Diagnostica /// Switch inactive track color. final Color inactiveTrackColor; - /// Switch thumbcolor. + /// Switch thumbColor. final Color thumbColor; const MoonSwitchColors({ diff --git a/lib/src/theme/switch/switch_shadows.dart b/lib/src/theme/switch/switch_shadows.dart index 2430da72..9ed8cee2 100644 --- a/lib/src/theme/switch/switch_shadows.dart +++ b/lib/src/theme/switch/switch_shadows.dart @@ -41,6 +41,6 @@ class MoonSwitchShadows extends ThemeExtension with Diagnosti super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonSwitchShadows")) - ..add(DiagnosticsProperty>("shadows", thumbShadows)); + ..add(DiagnosticsProperty>("thumbShadows", thumbShadows)); } } diff --git a/lib/src/theme/switch/switch_size_properties.dart b/lib/src/theme/switch/switch_size_properties.dart index bfb03bd4..da96e415 100644 --- a/lib/src/theme/switch/switch_size_properties.dart +++ b/lib/src/theme/switch/switch_size_properties.dart @@ -8,32 +8,32 @@ import 'package:moon_design/src/theme/sizes.dart'; @immutable class MoonSwitchSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { static final x2s = MoonSwitchSizeProperties( - width: 2 * MoonSizes.sizes.x3s + 3 * MoonSizes.sizes.x6s, height: MoonSizes.sizes.x2s, + width: 2 * MoonSizes.sizes.x3s + 3 * MoonSizes.sizes.x6s, thumbSizeValue: MoonSizes.sizes.x3s, padding: EdgeInsets.all(MoonSizes.sizes.x6s), ); static final xs = MoonSwitchSizeProperties( - width: 2 * MoonSizes.sizes.x2s + 3 * MoonSizes.sizes.x5s, height: MoonSizes.sizes.xs, + width: 2 * MoonSizes.sizes.x2s + 3 * MoonSizes.sizes.x5s, thumbSizeValue: MoonSizes.sizes.x2s, padding: EdgeInsets.all(MoonSizes.sizes.x5s), ); static final sm = MoonSwitchSizeProperties( - width: 2 * MoonSizes.sizes.xs + 3 * MoonSizes.sizes.x5s, height: MoonSizes.sizes.sm, + width: 2 * MoonSizes.sizes.xs + 3 * MoonSizes.sizes.x5s, thumbSizeValue: MoonSizes.sizes.xs, padding: EdgeInsets.all(MoonSizes.sizes.x5s), ); - /// Switch width. - final double width; - /// Switch height. final double height; + /// Switch width. + final double width; + /// Switch thumb size. final double thumbSizeValue; @@ -41,22 +41,22 @@ class MoonSwitchSizeProperties extends ThemeExtension final EdgeInsetsGeometry padding; const MoonSwitchSizeProperties({ - required this.width, required this.height, + required this.width, required this.thumbSizeValue, required this.padding, }); @override MoonSwitchSizeProperties copyWith({ - double? width, double? height, + double? width, double? thumbSizeValue, EdgeInsetsGeometry? padding, }) { return MoonSwitchSizeProperties( - width: width ?? this.width, height: height ?? this.height, + width: width ?? this.width, thumbSizeValue: thumbSizeValue ?? this.thumbSizeValue, padding: padding ?? this.padding, ); @@ -67,8 +67,8 @@ class MoonSwitchSizeProperties extends ThemeExtension if (other is! MoonSwitchSizeProperties) return this; return MoonSwitchSizeProperties( - width: lerpDouble(width, other.width, t)!, height: lerpDouble(height, other.height, t)!, + width: lerpDouble(width, other.width, t)!, thumbSizeValue: lerpDouble(thumbSizeValue, other.thumbSizeValue, t)!, padding: EdgeInsetsGeometry.lerp(padding, other.padding, t)!, ); @@ -79,8 +79,8 @@ class MoonSwitchSizeProperties extends ThemeExtension super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonSwitchSizeProperties")) - ..add(DoubleProperty("width", width)) ..add(DoubleProperty("height", height)) + ..add(DoubleProperty("width", width)) ..add(DoubleProperty("thumbSizeValue", thumbSizeValue)) ..add(DiagnosticsProperty("padding", padding)); } diff --git a/lib/src/theme/tag/tag_size_properties.dart b/lib/src/theme/tag/tag_size_properties.dart index b3113942..7f2ab4f6 100644 --- a/lib/src/theme/tag/tag_size_properties.dart +++ b/lib/src/theme/tag/tag_size_properties.dart @@ -10,40 +10,40 @@ import 'package:moon_design/src/theme/typography/text_styles.dart'; @immutable class MoonTagSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { static final x2s = MoonTagSizeProperties( - height: MoonSizes.sizes.x2s, + borderRadius: MoonBorders.borders.interactiveXs, gap: MoonSizes.sizes.x5s, + height: MoonSizes.sizes.x2s, iconSizeValue: MoonSizes.sizes.x3s, padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), - borderRadius: MoonBorders.borders.interactiveXs, textStyle: MoonTextStyles.body.text10.copyWith(fontWeight: FontWeight.w400), upperCaseTextStyle: MoonTextStyles.caption.text9, ); static final xs = MoonTagSizeProperties( - height: MoonSizes.sizes.xs, + borderRadius: MoonBorders.borders.interactiveXs, gap: MoonSizes.sizes.x5s, + height: MoonSizes.sizes.xs, iconSizeValue: MoonSizes.sizes.x2s, padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), - borderRadius: MoonBorders.borders.interactiveXs, textStyle: MoonTextStyles.body.text12.copyWith(fontWeight: FontWeight.w400), upperCaseTextStyle: MoonTextStyles.caption.text10, ); - /// Tag height. - final double height; + /// Tag border radius. + final BorderRadius borderRadius; /// Space between tag children. final double gap; + /// Tag height. + final double height; + /// Tag icon size value. final double iconSizeValue; /// Padding around tag children. final EdgeInsetsGeometry padding; - /// Tag border radius. - final BorderRadius borderRadius; - /// Tag body style. final TextStyle textStyle; @@ -51,31 +51,31 @@ class MoonTagSizeProperties extends ThemeExtension with D final TextStyle upperCaseTextStyle; const MoonTagSizeProperties({ - required this.height, + required this.borderRadius, required this.gap, + required this.height, required this.iconSizeValue, required this.padding, - required this.borderRadius, required this.textStyle, required this.upperCaseTextStyle, }); @override MoonTagSizeProperties copyWith({ - double? height, + BorderRadius? borderRadius, double? gap, + double? height, double? iconSizeValue, EdgeInsetsGeometry? padding, - BorderRadius? borderRadius, TextStyle? textStyle, TextStyle? upperCaseTextStyle, }) { return MoonTagSizeProperties( - height: height ?? this.height, + borderRadius: borderRadius ?? this.borderRadius, gap: gap ?? this.gap, + height: height ?? this.height, iconSizeValue: iconSizeValue ?? this.iconSizeValue, padding: padding ?? this.padding, - borderRadius: borderRadius ?? this.borderRadius, textStyle: textStyle ?? this.textStyle, upperCaseTextStyle: upperCaseTextStyle ?? this.upperCaseTextStyle, ); @@ -86,11 +86,11 @@ class MoonTagSizeProperties extends ThemeExtension with D if (other is! MoonTagSizeProperties) return this; return MoonTagSizeProperties( - height: lerpDouble(height, other.height, t)!, + borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, gap: lerpDouble(gap, other.gap, t)!, + height: lerpDouble(height, other.height, t)!, iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, padding: EdgeInsetsGeometry.lerp(padding, other.padding, t)!, - borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, upperCaseTextStyle: TextStyle.lerp(upperCaseTextStyle, other.upperCaseTextStyle, t)!, ); @@ -101,11 +101,11 @@ class MoonTagSizeProperties extends ThemeExtension with D super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTagSizeProperties")) - ..add(DoubleProperty("height", height)) + ..add(DiagnosticsProperty("borderRadius", borderRadius)) ..add(DoubleProperty("gap", gap)) + ..add(DoubleProperty("height", height)) ..add(DoubleProperty("iconSizeValue", iconSizeValue)) ..add(DiagnosticsProperty("padding", padding)) - ..add(DiagnosticsProperty("borderRadius", borderRadius)) ..add(DiagnosticsProperty("textStyle", textStyle)) ..add(DiagnosticsProperty("upperCaseTextStyle", upperCaseTextStyle)); } diff --git a/lib/src/theme/textarea/textarea_colors.dart b/lib/src/theme/textarea/textarea_colors.dart index a8cc9e79..394ba34c 100644 --- a/lib/src/theme/textarea/textarea_colors.dart +++ b/lib/src/theme/textarea/textarea_colors.dart @@ -50,7 +50,6 @@ class MoonTextAreaColors extends ThemeExtension with Diagnos Color? activeBorderColor, Color? inactiveBorderColor, Color? errorBorderColor, - Color? hoverBorderColor, Color? hintTextColor, }) { return MoonTextAreaColors( diff --git a/lib/src/theme/textarea/textarea_properties.dart b/lib/src/theme/textarea/textarea_properties.dart index 85bad80b..bcb1b983 100644 --- a/lib/src/theme/textarea/textarea_properties.dart +++ b/lib/src/theme/textarea/textarea_properties.dart @@ -8,9 +8,9 @@ import 'package:moon_design/src/theme/typography/text_styles.dart'; class MoonTextAreaProperties extends ThemeExtension with DiagnosticableTreeMixin { static final properties = MoonTextAreaProperties( borderRadius: MoonBorders.borders.interactiveSm, - textPadding: const EdgeInsets.all(16), transitionDuration: const Duration(milliseconds: 200), transitionCurve: Curves.easeInOutCubic, + textPadding: const EdgeInsets.all(16), textStyle: MoonTextStyles.body.text16, errorTextStyle: MoonTextStyles.body.text12, ); @@ -18,15 +18,15 @@ class MoonTextAreaProperties extends ThemeExtension with /// TextArea border radius. final BorderRadius borderRadius; - /// TextArea text padding. - final EdgeInsetsGeometry textPadding; - /// TextArea transition duration. final Duration transitionDuration; /// TextArea transition curve. final Curve transitionCurve; + /// TextArea text padding. + final EdgeInsetsGeometry textPadding; + /// TextArea text style. final TextStyle textStyle; @@ -35,9 +35,9 @@ class MoonTextAreaProperties extends ThemeExtension with const MoonTextAreaProperties({ required this.borderRadius, - required this.textPadding, required this.transitionDuration, required this.transitionCurve, + required this.textPadding, required this.textStyle, required this.errorTextStyle, }); @@ -45,17 +45,17 @@ class MoonTextAreaProperties extends ThemeExtension with @override MoonTextAreaProperties copyWith({ BorderRadius? borderRadius, - EdgeInsetsGeometry? textPadding, Duration? transitionDuration, Curve? transitionCurve, + EdgeInsetsGeometry? textPadding, TextStyle? textStyle, TextStyle? errorTextStyle, }) { return MoonTextAreaProperties( borderRadius: borderRadius ?? this.borderRadius, - textPadding: textPadding ?? this.textPadding, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, + textPadding: textPadding ?? this.textPadding, textStyle: textStyle ?? this.textStyle, errorTextStyle: errorTextStyle ?? this.errorTextStyle, ); @@ -67,9 +67,9 @@ class MoonTextAreaProperties extends ThemeExtension with return MoonTextAreaProperties( borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, - textPadding: EdgeInsetsGeometry.lerp(textPadding, other.textPadding, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, + textPadding: EdgeInsetsGeometry.lerp(textPadding, other.textPadding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, errorTextStyle: TextStyle.lerp(errorTextStyle, other.errorTextStyle, t)!, ); @@ -81,9 +81,9 @@ class MoonTextAreaProperties extends ThemeExtension with properties ..add(DiagnosticsProperty("type", "MoonTextAreaProperties")) ..add(DiagnosticsProperty("borderRadius", borderRadius)) - ..add(DiagnosticsProperty("textPadding", textPadding)) ..add(DiagnosticsProperty("transitionDuration", transitionDuration)) ..add(DiagnosticsProperty("transitionCurve", transitionCurve)) + ..add(DiagnosticsProperty("textPadding", textPadding)) ..add(DiagnosticsProperty("textStyle", textStyle)) ..add(DiagnosticsProperty("errorTextStyle", errorTextStyle)); } diff --git a/lib/src/theme/toast/toast_properties.dart b/lib/src/theme/toast/toast_properties.dart index 9cdd2a85..7b249fbe 100644 --- a/lib/src/theme/toast/toast_properties.dart +++ b/lib/src/theme/toast/toast_properties.dart @@ -1,4 +1,3 @@ - import 'dart:ui'; import 'package:flutter/foundation.dart'; @@ -11,19 +10,16 @@ import 'package:moon_design/src/theme/sizes.dart'; class MoonToastProperties extends ThemeExtension with DiagnosticableTreeMixin { static final properties = MoonToastProperties( borderRadius: MoonBorders.borders.surfaceSm, - contentPadding: EdgeInsets.all(MoonSizes.sizes.x2s), gap: MoonSizes.sizes.x2s, displayDuration: const Duration(seconds: 5), transitionDuration: const Duration(milliseconds: 200), transitionCurve: Curves.easeInOutCubic, + contentPadding: EdgeInsets.all(MoonSizes.sizes.x2s), ); /// Toast border radius. final BorderRadius borderRadius; - /// Padding around toast content. - final EdgeInsetsGeometry contentPadding; - /// Space between toast children. final double gap; @@ -36,31 +32,34 @@ class MoonToastProperties extends ThemeExtension with Diagn /// Toast transition curve. final Curve transitionCurve; + /// Padding around toast content. + final EdgeInsetsGeometry contentPadding; + const MoonToastProperties({ required this.borderRadius, - required this.contentPadding, required this.gap, required this.displayDuration, required this.transitionDuration, required this.transitionCurve, + required this.contentPadding, }); @override MoonToastProperties copyWith({ BorderRadius? borderRadius, - EdgeInsetsGeometry? contentPadding, double? gap, Duration? displayDuration, Duration? transitionDuration, Curve? transitionCurve, + EdgeInsetsGeometry? contentPadding, }) { return MoonToastProperties( borderRadius: borderRadius ?? this.borderRadius, - contentPadding: contentPadding ?? this.contentPadding, gap: gap ?? this.gap, displayDuration: displayDuration ?? this.displayDuration, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, + contentPadding: contentPadding ?? this.contentPadding, ); } @@ -70,11 +69,11 @@ class MoonToastProperties extends ThemeExtension with Diagn return MoonToastProperties( borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, - contentPadding: EdgeInsetsGeometry.lerp(contentPadding, other.contentPadding, t)!, gap: lerpDouble(gap, other.gap, t)!, displayDuration: lerpDuration(displayDuration, other.displayDuration, t), transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, + contentPadding: EdgeInsetsGeometry.lerp(contentPadding, other.contentPadding, t)!, ); } @@ -84,10 +83,10 @@ class MoonToastProperties extends ThemeExtension with Diagn properties ..add(DiagnosticsProperty("type", "MoonToastProperties")) ..add(DiagnosticsProperty("borderRadius", borderRadius)) - ..add(DiagnosticsProperty("contentPadding", contentPadding)) ..add(DoubleProperty("gap", gap)) ..add(DiagnosticsProperty("displayDuration", displayDuration)) ..add(DiagnosticsProperty("transitionDuration", transitionDuration)) - ..add(DiagnosticsProperty("transitionCurve", transitionCurve)); + ..add(DiagnosticsProperty("transitionCurve", transitionCurve)) + ..add(DiagnosticsProperty("contentPadding", contentPadding)); } } diff --git a/lib/src/theme/tooltip/tooltip_properties.dart b/lib/src/theme/tooltip/tooltip_properties.dart index c0dc465b..50415fad 100644 --- a/lib/src/theme/tooltip/tooltip_properties.dart +++ b/lib/src/theme/tooltip/tooltip_properties.dart @@ -10,16 +10,19 @@ import 'package:moon_design/src/theme/typography/text_styles.dart'; @immutable class MoonTooltipProperties extends ThemeExtension with DiagnosticableTreeMixin { static final properties = MoonTooltipProperties( + borderRadius: MoonBorders.borders.interactiveXs, arrowBaseWidth: MoonSizes.sizes.x2s, arrowLength: MoonSizes.sizes.x4s, arrowTipDistance: MoonSizes.sizes.x4s, - contentPadding: EdgeInsets.all(MoonSizes.sizes.x3s), - borderRadius: MoonBorders.borders.interactiveXs, transitionDuration: const Duration(milliseconds: 150), transitionCurve: Curves.easeInOutCubic, + contentPadding: EdgeInsets.all(MoonSizes.sizes.x3s), textStyle: MoonTextStyles.body.text12, ); + /// Tooltip border radius. + final BorderRadius borderRadius; + /// The tooltip arrows base width. final double arrowBaseWidth; @@ -29,51 +32,48 @@ class MoonTooltipProperties extends ThemeExtension with D /// The distance between the tooltip arrow and the widget it is attached to. final double arrowTipDistance; - /// Padding around tooltip content. - final EdgeInsetsGeometry contentPadding; - - /// Tooltip border radius. - final BorderRadius borderRadius; - /// Tooltip transition duration (fade in or out animation). final Duration transitionDuration; /// Tooltip transition curve (fade in or out animation). final Curve transitionCurve; + /// Padding around tooltip content. + final EdgeInsetsGeometry contentPadding; + /// Tooltip body style. final TextStyle textStyle; const MoonTooltipProperties({ + required this.borderRadius, required this.arrowBaseWidth, required this.arrowLength, required this.arrowTipDistance, - required this.contentPadding, - required this.borderRadius, required this.transitionDuration, required this.transitionCurve, + required this.contentPadding, required this.textStyle, }); @override MoonTooltipProperties copyWith({ + BorderRadius? borderRadius, double? arrowBaseWidth, double? arrowLength, double? arrowTipDistance, - EdgeInsetsGeometry? contentPadding, - BorderRadius? borderRadius, Duration? transitionDuration, Curve? transitionCurve, + EdgeInsetsGeometry? contentPadding, TextStyle? textStyle, }) { return MoonTooltipProperties( + borderRadius: borderRadius ?? this.borderRadius, arrowBaseWidth: arrowBaseWidth ?? this.arrowBaseWidth, arrowLength: arrowLength ?? this.arrowLength, arrowTipDistance: arrowTipDistance ?? this.arrowTipDistance, - contentPadding: contentPadding ?? this.contentPadding, - borderRadius: borderRadius ?? this.borderRadius, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, + contentPadding: contentPadding ?? this.contentPadding, textStyle: textStyle ?? this.textStyle, ); } @@ -83,13 +83,13 @@ class MoonTooltipProperties extends ThemeExtension with D if (other is! MoonTooltipProperties) return this; return MoonTooltipProperties( + borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, arrowBaseWidth: lerpDouble(arrowBaseWidth, other.arrowBaseWidth, t)!, arrowLength: lerpDouble(arrowLength, other.arrowLength, t)!, arrowTipDistance: lerpDouble(arrowTipDistance, other.arrowTipDistance, t)!, - contentPadding: EdgeInsetsGeometry.lerp(contentPadding, other.contentPadding, t)!, - borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, + contentPadding: EdgeInsetsGeometry.lerp(contentPadding, other.contentPadding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @@ -99,13 +99,13 @@ class MoonTooltipProperties extends ThemeExtension with D super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTooltipProperties")) + ..add(DiagnosticsProperty("borderRadius", borderRadius)) ..add(DoubleProperty("arrowBaseWidth", arrowBaseWidth)) ..add(DoubleProperty("arrowLength", arrowLength)) ..add(DoubleProperty("arrowTipDistance", arrowTipDistance)) - ..add(DiagnosticsProperty("contentPadding", contentPadding)) - ..add(DiagnosticsProperty("borderRadius", borderRadius)) ..add(DiagnosticsProperty("transitionDuration", transitionDuration)) ..add(DiagnosticsProperty("transitionCurve", transitionCurve)) + ..add(DiagnosticsProperty("contentPadding", contentPadding)) ..add(DiagnosticsProperty("textStyle", textStyle)); } } diff --git a/lib/src/theme/tooltip/tooltip_shadows.dart b/lib/src/theme/tooltip/tooltip_shadows.dart index 8c3e436e..c2d02ff8 100644 --- a/lib/src/theme/tooltip/tooltip_shadows.dart +++ b/lib/src/theme/tooltip/tooltip_shadows.dart @@ -41,6 +41,6 @@ class MoonTooltipShadows extends ThemeExtension with Diagnos super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTooltipShadows")) - ..add(DiagnosticsProperty>("shadows", tooltipShadows)); + ..add(DiagnosticsProperty>("tooltipShadows", tooltipShadows)); } } diff --git a/lib/src/theme/tooltip/tooltip_theme.dart b/lib/src/theme/tooltip/tooltip_theme.dart index de9e52f0..002efac4 100644 --- a/lib/src/theme/tooltip/tooltip_theme.dart +++ b/lib/src/theme/tooltip/tooltip_theme.dart @@ -9,41 +9,41 @@ import 'package:moon_design/src/theme/tooltip/tooltip_shadows.dart'; class MoonTooltipTheme extends ThemeExtension with DiagnosticableTreeMixin { static final light = MoonTooltipTheme( colors: MoonTooltipColors.light, - shadows: MoonTooltipShadows.light, properties: MoonTooltipProperties.properties, + shadows: MoonTooltipShadows.light, ); static final dark = MoonTooltipTheme( colors: MoonTooltipColors.dark, - shadows: MoonTooltipShadows.dark, properties: MoonTooltipProperties.properties, + shadows: MoonTooltipShadows.dark, ); /// Tooltip colors. final MoonTooltipColors colors; - /// Tooltip shadows. - final MoonTooltipShadows shadows; - /// Tooltip properties. final MoonTooltipProperties properties; + /// Tooltip shadows. + final MoonTooltipShadows shadows; + const MoonTooltipTheme({ required this.colors, - required this.shadows, required this.properties, + required this.shadows, }); @override MoonTooltipTheme copyWith({ MoonTooltipColors? colors, - MoonTooltipShadows? shadows, MoonTooltipProperties? properties, + MoonTooltipShadows? shadows, }) { return MoonTooltipTheme( colors: colors ?? this.colors, - shadows: shadows ?? this.shadows, properties: properties ?? this.properties, + shadows: shadows ?? this.shadows, ); } @@ -53,8 +53,8 @@ class MoonTooltipTheme extends ThemeExtension with Diagnostica return MoonTooltipTheme( colors: colors.lerp(other.colors, t), - shadows: shadows.lerp(other.shadows, t), properties: properties.lerp(other.properties, t), + shadows: shadows.lerp(other.shadows, t), ); } @@ -64,7 +64,7 @@ class MoonTooltipTheme extends ThemeExtension with Diagnostica diagnosticProperties ..add(DiagnosticsProperty("type", "MoonTooltipTheme")) ..add(DiagnosticsProperty("colors", colors)) - ..add(DiagnosticsProperty("shadows", shadows)) - ..add(DiagnosticsProperty("properties", properties)); + ..add(DiagnosticsProperty("properties", properties)) + ..add(DiagnosticsProperty("shadows", shadows)); } } diff --git a/lib/src/widgets/accordion/accordion_item.dart b/lib/src/widgets/accordion/accordion_item.dart index be7f523e..c2cc3783 100644 --- a/lib/src/widgets/accordion/accordion_item.dart +++ b/lib/src/widgets/accordion/accordion_item.dart @@ -21,29 +21,64 @@ enum MoonAccordionItemSize { } class MoonAccordionItem extends StatefulWidget { - /// The identity value represented by this accordion. - final T? identityValue; - - /// The currently selected identity value for a group of accordions. + /// Specifies the alignment of [children], which are arranged in a column when + /// the accordion is expanded. + /// The internals of the expanded accordion make use of a [Column] widget for + /// [children], and [Align] widget to align the column. The [expandedAlignment] + /// parameter is passed directly into the [Align]. /// - /// This accordion is considered selected if its [identityValue] matches the [groupIdentityValue]. - final T? groupIdentityValue; + /// Modifying this property controls the alignment of the column within the + /// expanded accordion, not the alignment of [children] widgets within the column. + /// To align each child within [children], see [expandedCrossAxisAlignment]. + /// + /// The width of the column is the width of the widest child widget in [children]. + final AlignmentGeometry? expandedAlignment; - /// Called when the accordion expands or collapses. + /// Specifies the alignment of each child within [children] when the accordion is expanded. /// - /// When the accordion expansion changes, this function is called with the [identityValue]. - final ValueChanged? onExpansionChanged; + /// The internals of the expanded accordion make use of a [Column] widget for + /// [children], and the `crossAxisAlignment` parameter is passed directly into the [Column]. + /// + /// Modifying this property controls the cross axis alignment of each child + /// within its [Column]. Note that the width of the [Column] that houses + /// [children] will be the same as the widest child widget in [children]. It is + /// not necessarily the width of [Column] is equal to the width of expanded accordion. + /// + /// To align the [Column] along the expanded accordion, use the [expandedAlignment] property + /// instead. + /// + /// When the value is null, the value of [expandedCrossAxisAlignment] is [CrossAxisAlignment.center]. + final CrossAxisAlignment? expandedCrossAxisAlignment; + + /// {@macro flutter.widgets.Focus.autofocus} + final bool autofocus; + + /// Whether the accordion content is outside + final bool hasContentOutside; /// Specifies if the accordion is initially expanded (true) or collapsed (false, the default). /// /// If [identityValue] matches [groupIdentityValue], this parameter is ignored. final bool initiallyExpanded; - /// Whether the accordion content is outside - final bool hasContentOutside; + /// Specifies whether the state of the children is maintained when the accordion expands and collapses. + /// + /// When true, the children are kept in the tree while the accordion is collapsed. + /// When false (default), the children are removed from the tree when the accordion is + /// collapsed and recreated upon expansion. + final bool maintainState; - /// The size of the accordion. - final MoonAccordionItemSize? accordionSize; + /// Whether to show a border around the accordion. + final bool showBorder; + + /// Whether to show a divider between the header and the body. + final bool showDivider; + + /// The accordion's border radius. + final BorderRadius? borderRadius; + + /// {@macro flutter.material.Material.clipBehavior} + final Clip? clipBehavior; /// The background color of the accordion when expanded. final Color? backgroundColor; @@ -66,81 +101,49 @@ class MoonAccordionItem extends StatefulWidget { /// The color of the accordion's title. final Color? textColor; - /// Whether to show a border around the accordion. - final bool showBorder; - - /// Whether to show a divider between the header and the body. - final bool showDivider; - - /// Specifies whether the state of the children is maintained when the accordion expands and collapses. - /// - /// When true, the children are kept in the tree while the accordion is collapsed. - /// When false (default), the children are removed from the tree when the accordion is - /// collapsed and recreated upon expansion. - final bool maintainState; - /// The height of the accordion header. final double? headerHeight; - /// Specifies padding for the accordion header. - final EdgeInsetsGeometry? headerPadding; + /// Accordion transition duration (expand or collapse animation). + final Duration? transitionDuration; + + /// Accordion transition curve (expand or collapse animation). + final Curve? transitionCurve; /// Specifies padding for [children]. final EdgeInsetsGeometry? childrenPadding; - /// The accordion's border radius. - final BorderRadius? borderRadius; - - /// Specifies the alignment of [children], which are arranged in a column when - /// the accordion is expanded. - /// The internals of the expanded accordion make use of a [Column] widget for - /// [children], and [Align] widget to align the column. The [expandedAlignment] - /// parameter is passed directly into the [Align]. - /// - /// Modifying this property controls the alignment of the column within the - /// expanded accordion, not the alignment of [children] widgets within the column. - /// To align each child within [children], see [expandedCrossAxisAlignment]. - /// - /// The width of the column is the width of the widest child widget in [children]. - final AlignmentGeometry? expandedAlignment; - - /// Specifies the alignment of each child within [children] when the accordion is expanded. - /// - /// The internals of the expanded accordion make use of a [Column] widget for - /// [children], and the `crossAxisAlignment` parameter is passed directly into the [Column]. - /// - /// Modifying this property controls the cross axis alignment of each child - /// within its [Column]. Note that the width of the [Column] that houses - /// [children] will be the same as the widest child widget in [children]. It is - /// not necessarily the width of [Column] is equal to the width of expanded accordion. - /// - /// To align the [Column] along the expanded accordion, use the [expandedAlignment] property - /// instead. - /// - /// When the value is null, the value of [expandedCrossAxisAlignment] is [CrossAxisAlignment.center]. - final CrossAxisAlignment? expandedCrossAxisAlignment; + /// Specifies padding for the accordion header. + final EdgeInsetsGeometry? headerPadding; - /// {@macro flutter.material.Material.clipBehavior} - final Clip? clipBehavior; + /// {@macro flutter.widgets.Focus.focusNode}. + final FocusNode? focusNode; /// Accordion shadows. final List? shadows; - /// Accordion transition duration (expand or collapse animation). - final Duration? transitionDuration; - - /// Accordion transition curve (expand or collapse animation). - final Curve? transitionCurve; - - /// {@macro flutter.widgets.Focus.autofocus} - final bool autofocus; + /// The widgets that are displayed when the accordion expands. + final List children; - /// {@macro flutter.widgets.Focus.focusNode}. - final FocusNode? focusNode; + /// The size of the accordion. + final MoonAccordionItemSize? accordionSize; /// The semantic label for the accordion. final String? semanticLabel; + /// The identity value represented by this accordion. + final T? identityValue; + + /// The currently selected identity value for a group of accordions. + /// + /// This accordion is considered selected if its [identityValue] matches the [groupIdentityValue]. + final T? groupIdentityValue; + + /// Called when the accordion expands or collapses. + /// + /// When the accordion expansion changes, this function is called with the [identityValue]. + final ValueChanged? onExpansionChanged; + /// A widget to display before the title. /// /// Typically a [CircleAvatar] widget. @@ -160,45 +163,42 @@ class MoonAccordionItem extends StatefulWidget { /// may replace the rotating expansion arrow icon. final Widget? trailing; - /// The widgets that are displayed when the accordion expands. - final List children; - /// MDS accordion widget. const MoonAccordionItem({ super.key, - this.identityValue, - this.groupIdentityValue, - this.onExpansionChanged, - this.initiallyExpanded = false, + this.expandedAlignment, + this.expandedCrossAxisAlignment, + this.autofocus = false, this.hasContentOutside = false, - this.accordionSize, - this.borderColor, + this.initiallyExpanded = false, + this.maintainState = false, + this.showBorder = false, + this.showDivider = true, + this.borderRadius, + this.clipBehavior, this.backgroundColor, this.expandedBackgroundColor, + this.borderColor, this.dividerColor, this.trailingIconColor, this.expandedTrailingIconColor, this.textColor, - this.showBorder = false, - this.showDivider = true, - this.maintainState = false, this.headerHeight, - this.headerPadding, - this.childrenPadding, - this.borderRadius, - this.expandedAlignment, - this.expandedCrossAxisAlignment, - this.clipBehavior, - this.shadows, this.transitionDuration, this.transitionCurve, - this.autofocus = false, + this.childrenPadding, + this.headerPadding, this.focusNode, + this.shadows, + this.children = const [], + this.accordionSize, this.semanticLabel, + this.identityValue, + this.groupIdentityValue, + this.onExpansionChanged, this.leading, required this.title, this.trailing, - this.children = const [], }) : assert( expandedCrossAxisAlignment != CrossAxisAlignment.baseline, 'CrossAxisAlignment.baseline is not supported since the expanded children ' @@ -218,17 +218,18 @@ class _MoonAccordionItemState extends State> with Single ActivateIntent: CallbackAction(onInvoke: (_) => _handleTap()) }; + late Animation? _iconColorAnimation; + late Animation? _backgroundColorAnimation; + AnimationController? _animationController; CurvedAnimation? _curvedAnimation; - late Animation? _iconColorAnimation; - late Animation? _backgroundColorAnimation; + FocusNode? _focusNode; bool _isExpanded = false; bool _isFocused = false; bool _isHovered = false; - FocusNode? _focusNode; FocusNode get _effectiveFocusNode => widget.focusNode ?? (_focusNode ??= FocusNode()); @@ -374,6 +375,13 @@ class _MoonAccordionItemState extends State> with Single } Widget _buildChildren(BuildContext context, Widget? child) { + final BorderRadius effectiveBorderRadius = widget.borderRadius ?? + context.moonTheme?.accordionTheme.itemProperties.borderRadius ?? + MoonBorders.borders.interactiveSm; + + final Color effectiveBorderColor = + widget.borderColor ?? context.moonTheme?.accordionTheme.itemColors.borderColor ?? MoonColors.light.beerus; + final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.accordionTheme.itemColors.backgroundColor ?? MoonColors.light.gohan; @@ -382,9 +390,6 @@ class _MoonAccordionItemState extends State> with Single context.moonTheme?.accordionTheme.itemColors.expandedBackgroundColor ?? MoonColors.light.gohan; - final Color effectiveBorderColor = - widget.borderColor ?? context.moonTheme?.accordionTheme.itemColors.borderColor ?? MoonColors.light.beerus; - final MoonAccordionItemSizeProperties effectiveMoonAccordionSize = _getMoonAccordionItemSize(context, widget.accordionSize); @@ -411,24 +416,20 @@ class _MoonAccordionItemState extends State> with Single final Color effectiveFocusEffectColor = context.moonEffects?.controlFocusEffect.effectColor ?? MoonFocusEffects.lightFocusEffect.effectColor; - final Curve effectiveFocusEffectCurve = - context.moonEffects?.controlFocusEffect.effectCurve ?? MoonFocusEffects.lightFocusEffect.effectCurve; - final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; + final Curve effectiveFocusEffectCurve = + context.moonEffects?.controlFocusEffect.effectCurve ?? MoonFocusEffects.lightFocusEffect.effectCurve; + final Color effectiveHoverEffectColor = context.moonEffects?.controlHoverEffect.primaryHoverColor ?? MoonHoverEffects.lightHoverEffect.primaryHoverColor; - final Curve effectiveHoverEffectCurve = - context.moonEffects?.controlHoverEffect.hoverCurve ?? MoonHoverEffects.lightHoverEffect.hoverCurve; - final Duration effectiveHoverEffectDuration = context.moonEffects?.controlHoverEffect.hoverDuration ?? MoonHoverEffects.lightHoverEffect.hoverDuration; - final BorderRadius effectiveBorderRadius = widget.borderRadius ?? - context.moonTheme?.accordionTheme.itemProperties.borderRadius ?? - MoonBorders.borders.interactiveSm; + final Curve effectiveHoverEffectCurve = + context.moonEffects?.controlHoverEffect.hoverCurve ?? MoonHoverEffects.lightHoverEffect.hoverCurve; _animationController ??= AnimationController(duration: effectiveTransitionDuration, vsync: this); _curvedAnimation ??= CurvedAnimation(parent: _animationController!, curve: effectiveTransitionCurve); @@ -456,11 +457,11 @@ class _MoonAccordionItemState extends State> with Single onShowHoverHighlight: _handleHover, child: MoonFocusEffect( show: _isFocused, - effectExtent: effectiveFocusEffectExtent, + childBorderRadius: effectiveBorderRadius, effectColor: effectiveFocusEffectColor, effectDuration: effectiveFocusEffectDuration, effectCurve: effectiveFocusEffectCurve, - childBorderRadius: effectiveBorderRadius, + effectExtent: effectiveFocusEffectExtent, child: MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( diff --git a/lib/src/widgets/alert/alert.dart b/lib/src/widgets/alert/alert.dart index d5b243c0..33bf6426 100644 --- a/lib/src/widgets/alert/alert.dart +++ b/lib/src/widgets/alert/alert.dart @@ -64,9 +64,6 @@ class MoonAlert extends StatefulWidget { /// The text style for title final TextStyle? titleTextStyle; - /// The widget in the body slot of the alert. - final Widget? body; - /// The widget in the leading slot of the alert. final Widget? leading; @@ -76,6 +73,9 @@ class MoonAlert extends StatefulWidget { /// The widget in the trailing slot of the alert. final Widget? trailing; + /// The widget in the body slot of the alert. + final Widget? body; + /// MDS base alert. /// /// See also: @@ -102,10 +102,10 @@ class MoonAlert extends StatefulWidget { this.semanticLabel, this.bodyTextStyle, this.titleTextStyle, - this.body, this.leading, required this.title, this.trailing, + this.body, }); @override @@ -187,8 +187,12 @@ class _MoonAlertState extends State with SingleTickerProviderStateMix @override Widget build(BuildContext context) { - final EdgeInsetsGeometry effectivePadding = - widget.padding ?? context.moonTheme?.alertTheme.properties.padding ?? EdgeInsets.all(MoonSizes.sizes.x2s); + final BorderRadius effectiveBorderRadius = widget.borderRadius ?? + context.moonTheme?.alertTheme.properties.borderRadius ?? + MoonBorders.borders.interactiveSm; + + final double effectiveBorderWidth = + widget.borderWidth ?? context.moonBorders?.borderWidth ?? MoonBorders.borders.borderWidth; final double effectiveHorizontalGap = widget.horizontalGap ?? context.moonTheme?.alertTheme.properties.horizontalGap ?? MoonSizes.sizes.x3s; @@ -199,19 +203,12 @@ class _MoonAlertState extends State with SingleTickerProviderStateMix final double effectiveMinimumHeight = widget.minimumHeight ?? context.moonTheme?.alertTheme.properties.minimumHeight ?? MoonSizes.sizes.xl; - final BorderRadius effectiveBorderRadius = widget.borderRadius ?? - context.moonTheme?.alertTheme.properties.borderRadius ?? - MoonBorders.borders.interactiveSm; - - final double effectiveBorderWidth = - widget.borderWidth ?? context.moonBorders?.borderWidth ?? MoonBorders.borders.borderWidth; + final Color effectiveBackgroundColor = + widget.backgroundColor ?? context.moonTheme?.alertTheme.colors.backgroundColor ?? MoonColors.light.gohan; final Color effectiveBorderColor = widget.borderColor ?? context.moonTheme?.alertTheme.colors.borderColor ?? MoonColors.light.bulma; - final Color effectiveBackgroundColor = - widget.backgroundColor ?? context.moonTheme?.alertTheme.colors.backgroundColor ?? MoonColors.light.gohan; - final Color effectiveLeadingColor = _getElementColor(effectiveBackgroundColor: effectiveBackgroundColor, elementColor: widget.leadingColor); @@ -221,6 +218,9 @@ class _MoonAlertState extends State with SingleTickerProviderStateMix final Color effectiveTextColor = _getElementColor(effectiveBackgroundColor: effectiveBackgroundColor, elementColor: widget.textColor); + final EdgeInsetsGeometry effectivePadding = + widget.padding ?? context.moonTheme?.alertTheme.properties.padding ?? EdgeInsets.all(MoonSizes.sizes.x2s); + final TextStyle effectiveTitleTextStyle = _getTextStyle(context: context); final TextStyle effectiveBodyTextStyle = diff --git a/lib/src/widgets/authcode/authcode.dart b/lib/src/widgets/authcode/authcode.dart index 37338d4c..eb70c480 100644 --- a/lib/src/widgets/authcode/authcode.dart +++ b/lib/src/widgets/authcode/authcode.dart @@ -45,12 +45,12 @@ class MoonAuthCode extends StatefulWidget { /// Controls whether typed character should be briefly shown before being obscured. final bool peekWhenObscuring; - /// Controls if haptic feedback is used. - final bool useHapticFeedback; - /// Controls if cursor in selected auth input field should be shown. final bool showAuthFieldCursor; + /// Controls if haptic feedback is used. + final bool useHapticFeedback; + /// Border radius of auth input field. final BorderRadius? borderRadius; @@ -646,23 +646,26 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix child: SizedBox( height: _effectiveHeight, child: TextFormField( - textInputAction: widget.textInputAction, - controller: _textEditingController, - focusNode: _focusNode, - enabled: widget.enabled, + autocorrect: false, autofocus: widget.autoFocus, - keyboardType: widget.keyboardType, autovalidateMode: AutovalidateMode.onUserInteraction, - inputFormatters: [LengthLimitingTextInputFormatter(widget.authInputFieldCount)], - onFieldSubmitted: widget.onSubmitted, - onEditingComplete: widget.onEditingComplete, - onChanged: widget.onChanged, + controller: _textEditingController, + cursorWidth: 0.01, + enabled: widget.enabled, enableInteractiveSelection: false, enableSuggestions: false, - autocorrect: false, + focusNode: _focusNode, + inputFormatters: [LengthLimitingTextInputFormatter(widget.authInputFieldCount)], + keyboardType: widget.keyboardType, + onChanged: widget.onChanged, + onEditingComplete: widget.onEditingComplete, + onFieldSubmitted: widget.onSubmitted, + obscureText: widget.obscureText, + obscuringCharacter: widget.obscuringCharacter, + scrollPadding: const EdgeInsets.all(24.0), showCursor: true, smartDashesType: SmartDashesType.disabled, - cursorWidth: 0.01, + textInputAction: widget.textInputAction, decoration: const InputDecoration( contentPadding: EdgeInsets.zero, border: InputBorder.none, @@ -672,12 +675,9 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix ), style: const TextStyle( color: Colors.transparent, - height: .01, fontSize: kIsWeb ? 1 : 0.01, + height: .01, ), - scrollPadding: const EdgeInsets.all(24.0), - obscureText: widget.obscureText, - obscuringCharacter: widget.obscuringCharacter, ), ), ); @@ -691,12 +691,12 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix _effectiveBorderWidth = widget.borderWidth ?? context.moonBorders?.borderWidth ?? MoonBorders.borders.borderWidth; + _effectiveGap = widget.gap ?? context.moonTheme?.authCodeTheme.properties.gap ?? MoonSizes.sizes.x4s; + _effectiveHeight = widget.height ?? context.moonTheme?.authCodeTheme.properties.height ?? MoonSizes.sizes.xl; _effectiveWidth = widget.width ?? context.moonTheme?.authCodeTheme.properties.width ?? MoonSizes.sizes.lg; - _effectiveGap = widget.gap ?? context.moonTheme?.authCodeTheme.properties.gap ?? MoonSizes.sizes.x4s; - _effectiveSelectedBorderColor = widget.selectedBorderColor ?? context.moonTheme?.authCodeTheme.colors.selectedBorderColor ?? MoonColors.light.piccolo; diff --git a/lib/src/widgets/avatar/avatar.dart b/lib/src/widgets/avatar/avatar.dart index 9eddd32d..bc1f970a 100644 --- a/lib/src/widgets/avatar/avatar.dart +++ b/lib/src/widgets/avatar/avatar.dart @@ -24,32 +24,35 @@ enum MoonBadgeAlignment { } class MoonAvatar extends StatelessWidget { - /// The height of the avatar. - final double? width; - - /// The width of the avatar. - final double? height; + /// Whether to show the avatar badge or not. + final bool showBadge; /// The border radius of the avatar. final BorderRadius? borderRadius; - /// The size of the avatars badge. - final double? badgeSize; + /// The background color of the avatar. + final Color? backgroundColor; + + /// The color of the avatar badge. + final Color? badgeColor; + + /// The text color of the avatar. + final Color? textColor; /// The margin value of the avatars badge. final double? badgeMarginValue; - /// Whether to show the avatar badge or not. - final bool showBadge; + /// The size of the avatars badge. + final double? badgeSize; - /// The color of the avatar badge. - final Color? badgeColor; + /// The width of the avatar. + final double? height; - /// The background color of the avatar. - final Color? backgroundColor; + /// The height of the avatar. + final double? width; - /// The text color of the avatar. - final Color? textColor; + /// The background image of the avatar. + final ImageProvider? backgroundImage; /// The size of the avatar. final MoonAvatarSize? avatarSize; @@ -57,9 +60,6 @@ class MoonAvatar extends StatelessWidget { /// The alignment of the avatar badge. final MoonBadgeAlignment badgeAlignment; - /// The background image of the avatar. - final ImageProvider? backgroundImage; - /// The semantic label for the avatar. final String? semanticLabel; @@ -69,18 +69,18 @@ class MoonAvatar extends StatelessWidget { /// MDS avatar widget. const MoonAvatar({ super.key, - this.width, - this.height, - this.borderRadius, - this.badgeSize, - this.badgeMarginValue, this.showBadge = false, - this.badgeColor, + this.borderRadius, this.backgroundColor, + this.badgeColor, this.textColor, + this.badgeMarginValue, + this.badgeSize, + this.height, + this.width, + this.backgroundImage, this.avatarSize, this.badgeAlignment = MoonBadgeAlignment.bottomRight, - this.backgroundImage, this.semanticLabel, this.content, }); @@ -150,6 +150,10 @@ class MoonAvatar extends StatelessWidget { @override Widget build(BuildContext context) { + final MoonAvatarSizeProperties effectiveMoonAvatarSize = _getMoonAvatarSize(context, avatarSize); + + final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonAvatarSize.borderRadius; + final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.avatarTheme.colors.backgroundColor ?? MoonColors.light.gohan; @@ -159,15 +163,13 @@ class MoonAvatar extends StatelessWidget { final Color effectiveTextColor = textColor ?? _getTextColor(context, isDarkMode: context.isDarkMode, effectiveBackgroundColor: effectiveBackgroundColor); - final MoonAvatarSizeProperties effectiveMoonAvatarSize = _getMoonAvatarSize(context, avatarSize); + final double effectiveAvatarHeight = height ?? effectiveMoonAvatarSize.avatarSizeValue; final double effectiveAvatarWidth = width ?? effectiveMoonAvatarSize.avatarSizeValue; - final double effectiveAvatarHeight = height ?? effectiveMoonAvatarSize.avatarSizeValue; - final double effectiveBadgeSize = badgeSize ?? effectiveMoonAvatarSize.badgeSizeValue; final double effectiveBadgeMarginValue = badgeMarginValue ?? effectiveMoonAvatarSize.badgeMarginValue; - final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonAvatarSize.borderRadius; + final double effectiveBadgeSize = badgeSize ?? effectiveMoonAvatarSize.badgeSizeValue; return Semantics( label: semanticLabel, diff --git a/lib/src/widgets/avatar/avatar_clipper.dart b/lib/src/widgets/avatar/avatar_clipper.dart index 983204c2..a89b24fa 100644 --- a/lib/src/widgets/avatar/avatar_clipper.dart +++ b/lib/src/widgets/avatar/avatar_clipper.dart @@ -5,21 +5,21 @@ import 'package:moon_design/src/widgets/avatar/avatar.dart'; class AvatarClipper extends CustomClipper { final bool showBadge; - final double width; + final BorderRadius borderRadius; final double height; - final double badgeSize; + final double width; final double badgeMarginValue; - final BorderRadius borderRadius; + final double badgeSize; final MoonBadgeAlignment badgeAlignment; final TextDirection textDirection; AvatarClipper({ required this.showBadge, - required this.width, + required this.borderRadius, required this.height, - required this.badgeSize, + required this.width, required this.badgeMarginValue, - required this.borderRadius, + required this.badgeSize, required this.badgeAlignment, required this.textDirection, }); diff --git a/lib/src/widgets/buttons/button.dart b/lib/src/widgets/buttons/button.dart index ab1d8681..b49a5afe 100644 --- a/lib/src/widgets/buttons/button.dart +++ b/lib/src/widgets/buttons/button.dart @@ -19,69 +19,21 @@ enum MoonButtonSize { } class MoonButton extends StatelessWidget { - /// The callback that is called when the button is tapped or pressed. - final VoidCallback? onTap; - - /// The callback that is called when the button is long-pressed. - final VoidCallback? onLongPress; - - /// The size of the button. - final MoonButtonSize? buttonSize; - - /// {@macro flutter.widgets.Focus.focusNode}. - final FocusNode? focusNode; - - /// The semantic label for the button. - final String? semanticLabel; - - /// The tooltip message for the button. - final String tooltipMessage; - - /// The width of the button. - final double? width; - - /// The height of the button. - final double? height; - - /// The opacity value of the button when it is disabled. - final double? disabledOpacityValue; - - /// The border width of the button. - final double? borderWidth; - - /// The gap between the leading or trailing and the label widgets. - final double? gap; - - /// The extent of the focus effect. - final double? focusEffectExtent; - - /// The extent of the pulse effect. - final double? pulseEffectExtent; - - /// The scalar controlling the scaling of the scale effect. - final double? scaleEffectScalar; - - /// The minimum size of the touch target. - final double minTouchTargetSize; - /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; /// Whether the button should be focusable. final bool isFocusable; - /// Whether the button should be full width. - final bool isFullWidth; - /// Whether this button should ensure that it has a minimal touch target size. final bool ensureMinimalTouchTargetSize; + /// Whether the button should be full width. + final bool isFullWidth; + /// Whether the button should show a border. final bool showBorder; - /// Whether the button should show a tooltip. - final bool showTooltip; - /// Whether the button should show a focus effect. final bool showFocusEffect; @@ -94,15 +46,18 @@ class MoonButton extends StatelessWidget { /// Whether the button should show a scale animation. final bool showScaleAnimation; + /// Whether the button should show a tooltip. + final bool showTooltip; + + /// The border radius of the button. + final BorderRadius? borderRadius; + /// The background color of the button. final Color? backgroundColor; /// The border color of the button. final Color? borderColor; - /// The text color of the button. - final Color? textColor; - /// The color of the focus effect. final Color? focusEffectColor; @@ -112,35 +67,80 @@ class MoonButton extends StatelessWidget { /// The color of the pulse effect. final Color? pulseEffectColor; + /// The text color of the button. + final Color? textColor; + + /// The border width of the button. + final double? borderWidth; + + /// The opacity value of the button when it is disabled. + final double? disabledOpacityValue; + + /// The gap between the leading or trailing and the label widgets. + final double? gap; + + /// The height of the button. + final double? height; + + /// The width of the button. + final double? width; + + /// The minimum size of the touch target. + final double minTouchTargetSize; + + /// The extent of the focus effect. + final double? focusEffectExtent; + + /// The extent of the pulse effect. + final double? pulseEffectExtent; + + /// The scalar controlling the scaling of the scale effect. + final double? scaleEffectScalar; + /// The duration of the focus effect. final Duration? focusEffectDuration; /// The duration of the hover effect. final Duration? hoverEffectDuration; - /// The duration of the scale effect. - final Duration? scaleEffectDuration; - /// The duration of the pulse effect. final Duration? pulseEffectDuration; + /// The duration of the scale effect. + final Duration? scaleEffectDuration; + /// The curve of the focus effect. final Curve? focusEffectCurve; /// The curve of the hover effect. final Curve? hoverEffectCurve; - /// The curve of the scale effect. - final Curve? scaleEffectCurve; - /// The curve of the pulse effect. final Curve? pulseEffectCurve; + /// The curve of the scale effect. + final Curve? scaleEffectCurve; + /// The padding of the button. final EdgeInsetsGeometry? padding; - /// The border radius of the button. - final BorderRadius? borderRadius; + /// {@macro flutter.widgets.Focus.focusNode}. + final FocusNode? focusNode; + + /// The size of the button. + final MoonButtonSize? buttonSize; + + /// The semantic label for the button. + final String? semanticLabel; + + /// The tooltip message for the button. + final String tooltipMessage; + + /// The callback that is called when the button is tapped or pressed. + final VoidCallback? onTap; + + /// The callback that is called when the button is long-pressed. + final VoidCallback? onLongPress; /// The widget in the leading slot of the button. final Widget? leading; @@ -160,47 +160,47 @@ class MoonButton extends StatelessWidget { /// * [MoonTextButton], MDS text button. const MoonButton({ super.key, - this.onTap, - this.onLongPress, - this.buttonSize, - this.focusNode, - this.semanticLabel, - this.tooltipMessage = "", - this.width, - this.height, - this.disabledOpacityValue, - this.borderWidth, - this.gap, - this.focusEffectExtent, - this.pulseEffectExtent, - this.scaleEffectScalar, - this.minTouchTargetSize = 40, this.autofocus = false, this.isFocusable = true, - this.isFullWidth = false, this.ensureMinimalTouchTargetSize = false, + this.isFullWidth = false, this.showBorder = false, - this.showTooltip = false, this.showFocusEffect = true, this.showPulseEffect = false, this.showPulseEffectJiggle = true, this.showScaleAnimation = true, + this.showTooltip = false, + this.borderRadius, this.backgroundColor, this.borderColor, - this.textColor, this.focusEffectColor, this.hoverEffectColor, this.pulseEffectColor, + this.textColor, + this.borderWidth, + this.disabledOpacityValue, + this.gap, + this.height, + this.width, + this.minTouchTargetSize = 40, + this.focusEffectExtent, + this.pulseEffectExtent, + this.scaleEffectScalar, this.focusEffectDuration, this.hoverEffectDuration, - this.scaleEffectDuration, this.pulseEffectDuration, + this.scaleEffectDuration, this.focusEffectCurve, this.hoverEffectCurve, - this.scaleEffectCurve, this.pulseEffectCurve, + this.scaleEffectCurve, this.padding, - this.borderRadius, + this.focusNode, + this.buttonSize, + this.semanticLabel, + this.tooltipMessage = "", + this.onTap, + this.onLongPress, this.leading, this.label, this.trailing, @@ -208,87 +208,87 @@ class MoonButton extends StatelessWidget { /// Constructor for creating explicit icon button. factory MoonButton.icon({ - VoidCallback? onTap, - VoidCallback? onLongPress, - MoonButtonSize? buttonSize, - FocusNode? focusNode, - String? semanticLabel, - String tooltipMessage = "", - double? width, - double? height, - double? disabledOpacityValue, - double? borderWidth, - double? gap, - double? focusEffectExtent, - double? pulseEffectExtent, - double? scaleEffectScalar, - double minTouchTargetSize = 40, bool autofocus = false, bool isFocusable = true, bool ensureMinimalTouchTargetSize = false, bool showBorder = false, - bool showTooltip = false, bool showFocusEffect = true, bool showPulseEffect = false, bool showPulseEffectJiggle = true, bool showScaleAnimation = true, + bool showTooltip = false, + BorderRadius? borderRadius, Color? backgroundColor, Color? borderColor, Color? focusEffectColor, Color? hoverEffectColor, Color? pulseEffectColor, + double? borderWidth, + double? disabledOpacityValue, + double? gap, + double? height, + double? width, + double minTouchTargetSize = 40, + double? focusEffectExtent, + double? pulseEffectExtent, + double? scaleEffectScalar, Duration? focusEffectDuration, Duration? hoverEffectDuration, - Duration? scaleEffectDuration, Duration? pulseEffectDuration, + Duration? scaleEffectDuration, Curve? focusEffectCurve, Curve? hoverEffectCurve, - Curve? scaleEffectCurve, Curve? pulseEffectCurve, + Curve? scaleEffectCurve, + FocusNode? focusNode, EdgeInsetsGeometry? padding, - BorderRadius? borderRadius, + MoonButtonSize? buttonSize, + String? semanticLabel, + String tooltipMessage = "", + VoidCallback? onLongPress, + VoidCallback? onTap, Widget? icon, }) { return MoonButton( - onTap: onTap, - onLongPress: onLongPress, - buttonSize: buttonSize, - focusNode: focusNode, - semanticLabel: semanticLabel, - tooltipMessage: tooltipMessage, - width: width, - height: height, - disabledOpacityValue: disabledOpacityValue, - borderWidth: borderWidth, - gap: gap, - focusEffectExtent: focusEffectExtent, - pulseEffectExtent: pulseEffectExtent, - scaleEffectScalar: scaleEffectScalar, - minTouchTargetSize: minTouchTargetSize, autofocus: autofocus, isFocusable: isFocusable, ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, showBorder: showBorder, - showTooltip: showTooltip, showFocusEffect: showFocusEffect, showPulseEffect: showPulseEffect, showPulseEffectJiggle: showPulseEffectJiggle, showScaleAnimation: showScaleAnimation, + showTooltip: showTooltip, + borderRadius: borderRadius, backgroundColor: backgroundColor, borderColor: borderColor, focusEffectColor: focusEffectColor, hoverEffectColor: hoverEffectColor, pulseEffectColor: pulseEffectColor, + borderWidth: borderWidth, + disabledOpacityValue: disabledOpacityValue, + gap: gap, + height: height, + width: width, + minTouchTargetSize: minTouchTargetSize, + focusEffectExtent: focusEffectExtent, + pulseEffectExtent: pulseEffectExtent, + scaleEffectScalar: scaleEffectScalar, focusEffectDuration: focusEffectDuration, hoverEffectDuration: hoverEffectDuration, - scaleEffectDuration: scaleEffectDuration, pulseEffectDuration: pulseEffectDuration, + scaleEffectDuration: scaleEffectDuration, focusEffectCurve: focusEffectCurve, hoverEffectCurve: hoverEffectCurve, - scaleEffectCurve: scaleEffectCurve, pulseEffectCurve: pulseEffectCurve, + scaleEffectCurve: scaleEffectCurve, + focusNode: focusNode, padding: padding, - borderRadius: borderRadius, + buttonSize: buttonSize, + semanticLabel: semanticLabel, + tooltipMessage: tooltipMessage, + onLongPress: onLongPress, + onTap: onTap, leading: icon, ); } @@ -333,6 +333,20 @@ class MoonButton extends StatelessWidget { Widget build(BuildContext context) { final MoonButtonSizeProperties effectiveMoonButtonSize = _getMoonButtonSize(context, buttonSize); + final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonButtonSize.borderRadius; + + final Color effectiveBorderColor = + borderColor ?? context.moonTheme?.buttonTheme.colors.borderColor ?? MoonColors.light.trunks; + + final double effectiveBorderWidth = + borderWidth ?? context.moonBorders?.borderWidth ?? MoonBorders.borders.borderWidth; + + final Color effectiveHoverEffectColor = hoverEffectColor ?? + context.moonEffects?.controlHoverEffect.primaryHoverColor ?? + MoonHoverEffects.lightHoverEffect.primaryHoverColor; + + final Color hoverColor = Color.alphaBlend(effectiveHoverEffectColor, backgroundColor ?? Colors.transparent); + final double effectiveHeight = height ?? effectiveMoonButtonSize.height; final double effectiveGap = gap ?? effectiveMoonButtonSize.gap; @@ -348,58 +362,44 @@ class MoonButton extends StatelessWidget { resolvedDirectionalPadding.bottom, ); - final Color effectiveBorderColor = - borderColor ?? context.moonTheme?.buttonTheme.colors.borderColor ?? MoonColors.light.trunks; - - final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonButtonSize.borderRadius; - - final double effectiveBorderWidth = - borderWidth ?? context.moonBorders?.borderWidth ?? MoonBorders.borders.borderWidth; - - final Color effectiveHoverEffectColor = hoverEffectColor ?? - context.moonEffects?.controlHoverEffect.primaryHoverColor ?? - MoonHoverEffects.lightHoverEffect.primaryHoverColor; - - final Color hoverColor = Color.alphaBlend(effectiveHoverEffectColor, backgroundColor ?? Colors.transparent); + final Duration effectiveHoverEffectDuration = hoverEffectDuration ?? + context.moonEffects?.controlHoverEffect.hoverDuration ?? + MoonHoverEffects.lightHoverEffect.hoverDuration; final Curve effectiveHoverEffectCurve = hoverEffectCurve ?? context.moonEffects?.controlHoverEffect.hoverCurve ?? MoonHoverEffects.lightHoverEffect.hoverCurve; - final Duration effectiveHoverEffectDuration = hoverEffectDuration ?? - context.moonEffects?.controlHoverEffect.hoverDuration ?? - MoonHoverEffects.lightHoverEffect.hoverDuration; - return MoonBaseControl( - onTap: onTap, - onLongPress: onLongPress, - semanticLabel: semanticLabel, - tooltipMessage: tooltipMessage, - semanticTypeIsButton: true, - borderRadius: effectiveBorderRadius, - disabledOpacityValue: disabledOpacityValue, - minTouchTargetSize: minTouchTargetSize, - ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, - focusNode: focusNode, autofocus: autofocus, isFocusable: isFocusable, - backgroundColor: backgroundColor, - showTooltip: showTooltip, + ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, + semanticTypeIsButton: true, showFocusEffect: showFocusEffect, - focusEffectColor: focusEffectColor, - focusEffectExtent: focusEffectExtent, - focusEffectDuration: focusEffectDuration, - focusEffectCurve: focusEffectCurve, - showScaleAnimation: showScaleAnimation, - scaleEffectScalar: scaleEffectScalar, - scaleEffectDuration: scaleEffectDuration, - scaleEffectCurve: scaleEffectCurve, showPulseEffect: showPulseEffect, showPulseEffectJiggle: showPulseEffectJiggle, + showScaleAnimation: showScaleAnimation, + showTooltip: showTooltip, + borderRadius: effectiveBorderRadius, + backgroundColor: backgroundColor, + focusEffectColor: focusEffectColor, pulseEffectColor: pulseEffectColor, + disabledOpacityValue: disabledOpacityValue, + minTouchTargetSize: minTouchTargetSize, + focusEffectExtent: focusEffectExtent, pulseEffectExtent: pulseEffectExtent, + scaleEffectScalar: scaleEffectScalar, + focusEffectDuration: focusEffectDuration, pulseEffectDuration: pulseEffectDuration, + scaleEffectDuration: scaleEffectDuration, + focusEffectCurve: focusEffectCurve, pulseEffectCurve: pulseEffectCurve, + scaleEffectCurve: scaleEffectCurve, + focusNode: focusNode, + semanticLabel: semanticLabel, + tooltipMessage: tooltipMessage, + onTap: onTap, + onLongPress: onLongPress, builder: (context, isEnabled, isHovered, isFocused, isPressed) { final Color effectiveTextColor = _getTextColor(context, isDarkMode: context.isDarkMode, isHovered: isHovered, isFocused: isFocused); diff --git a/lib/src/widgets/buttons/filled_button.dart b/lib/src/widgets/buttons/filled_button.dart index 88eddffc..01848cf6 100644 --- a/lib/src/widgets/buttons/filled_button.dart +++ b/lib/src/widgets/buttons/filled_button.dart @@ -5,53 +5,53 @@ import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/widgets/buttons/button.dart'; class MoonFilledButton extends StatelessWidget { - /// The callback that is called when the button is tapped or pressed. - final VoidCallback? onTap; + /// {@macro flutter.widgets.Focus.autofocus} + final bool autofocus; - /// The callback that is called when the button is long-pressed. - final VoidCallback? onLongPress; + /// Whether this button should be focusable. + final bool isFocusable; - /// The size of the button. - final MoonButtonSize? buttonSize; + /// Whether this button should ensure that it has a minimal touch target size. + final bool ensureMinimalTouchTargetSize; - /// {@macro flutter.widgets.Focus.focusNode}. - final FocusNode? focusNode; + /// Whether this button should be full width. + final bool isFullWidth; - /// The semantic label for the button. - final String? semanticLabel; + /// Whether this button should show a pulse effect. + final bool showPulseEffect; - /// The tooltip message for the button. - final String tooltipMessage; + /// Whether this button should show a tooltip. + final bool showTooltip; - /// The width of the button. - final double? width; + /// The background color of the button. + final Color? backgroundColor; /// The height of the button. final double? height; + /// The width of the button. + final double? width; + /// The minimum size of the touch target. final double minTouchTargetSize; - /// Whether this button should ensure that it has a minimal touch target size. - final bool ensureMinimalTouchTargetSize; - - /// {@macro flutter.widgets.Focus.autofocus} - final bool autofocus; + /// {@macro flutter.widgets.Focus.focusNode}. + final FocusNode? focusNode; - /// Whether this button should be focusable. - final bool isFocusable; + /// The size of the button. + final MoonButtonSize? buttonSize; - /// Whether this button should be full width. - final bool isFullWidth; + /// The semantic label for the button. + final String? semanticLabel; - /// Whether this button should show a tooltip. - final bool showTooltip; + /// The tooltip message for the button. + final String tooltipMessage; - /// Whether this button should show a pulse effect. - final bool showPulseEffect; + /// The callback that is called when the button is tapped or pressed. + final VoidCallback? onTap; - /// The background color of the button. - final Color? backgroundColor; + /// The callback that is called when the button is long-pressed. + final VoidCallback? onLongPress; /// The widget in the leading slot of the button. final Widget? leading; @@ -70,22 +70,22 @@ class MoonFilledButton extends StatelessWidget { /// * [MoonTextButton], MDS text button. const MoonFilledButton({ super.key, - this.onTap, - this.onLongPress, - this.buttonSize, - this.focusNode, - this.semanticLabel, - this.tooltipMessage = "", - this.width, - this.height, - this.minTouchTargetSize = 40, - this.ensureMinimalTouchTargetSize = false, this.autofocus = false, this.isFocusable = true, + this.ensureMinimalTouchTargetSize = false, this.isFullWidth = false, - this.showTooltip = false, this.showPulseEffect = false, + this.showTooltip = false, this.backgroundColor, + this.height, + this.width, + this.minTouchTargetSize = 40, + this.focusNode, + this.buttonSize, + this.semanticLabel, + this.tooltipMessage = "", + this.onTap, + this.onLongPress, this.leading, this.label, this.trailing, @@ -98,22 +98,22 @@ class MoonFilledButton extends StatelessWidget { MoonColors.light.piccolo; return MoonButton( - onTap: onTap, - onLongPress: onLongPress, - buttonSize: buttonSize, - backgroundColor: effectiveBackgroundColor, - focusNode: focusNode, - semanticLabel: semanticLabel, - tooltipMessage: tooltipMessage, - width: width, - height: height, - minTouchTargetSize: minTouchTargetSize, - ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, autofocus: autofocus, isFocusable: isFocusable, + ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, isFullWidth: isFullWidth, - showTooltip: showTooltip, showPulseEffect: showPulseEffect, + showTooltip: showTooltip, + backgroundColor: effectiveBackgroundColor, + height: height, + width: width, + minTouchTargetSize: minTouchTargetSize, + focusNode: focusNode, + buttonSize: buttonSize, + semanticLabel: semanticLabel, + tooltipMessage: tooltipMessage, + onTap: onTap, + onLongPress: onLongPress, label: label, leading: leading, trailing: trailing, diff --git a/lib/src/widgets/buttons/outlined_button.dart b/lib/src/widgets/buttons/outlined_button.dart index adf543aa..d21c6f58 100644 --- a/lib/src/widgets/buttons/outlined_button.dart +++ b/lib/src/widgets/buttons/outlined_button.dart @@ -3,53 +3,53 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/widgets/buttons/button.dart'; class MoonOutlinedButton extends StatelessWidget { - /// The callback that is called when the button is tapped or pressed. - final VoidCallback? onTap; + /// {@macro flutter.widgets.Focus.autofocus} + final bool autofocus; - /// The callback that is called when the button is long-pressed. - final VoidCallback? onLongPress; + /// Whether this button should be focusable. + final bool isFocusable; - /// The size of the button. - final MoonButtonSize? buttonSize; + /// Whether this button should ensure that it has a minimal touch target size. + final bool ensureMinimalTouchTargetSize; - /// {@macro flutter.widgets.Focus.focusNode}. - final FocusNode? focusNode; + /// Whether this button should be full width. + final bool isFullWidth; - /// The semantic label for the button. - final String? semanticLabel; + /// Whether this button should show a pulse effect. + final bool showPulseEffect; - /// The tooltip message for the button. - final String tooltipMessage; + /// Whether the button should show a tooltip. + final bool showTooltip; - /// The width of the button. - final double? width; + /// The border color of the button. + final Color? borderColor; /// The height of the button. final double? height; + /// The width of the button. + final double? width; + /// The minimum size of the touch target. final double minTouchTargetSize; - /// Whether this button should ensure that it has a minimal touch target size. - final bool ensureMinimalTouchTargetSize; - - /// {@macro flutter.widgets.Focus.autofocus} - final bool autofocus; + /// {@macro flutter.widgets.Focus.focusNode}. + final FocusNode? focusNode; - /// Whether this button should be focusable. - final bool isFocusable; + /// The size of the button. + final MoonButtonSize? buttonSize; - /// Whether this button should be full width. - final bool isFullWidth; + /// The semantic label for the button. + final String? semanticLabel; - /// Whether the button should show a tooltip. - final bool showTooltip; + /// The tooltip message for the button. + final String tooltipMessage; - /// Whether this button should show a pulse effect. - final bool showPulseEffect; + /// The callback that is called when the button is tapped or pressed. + final VoidCallback? onTap; - /// The border color of the button. - final Color? borderColor; + /// The callback that is called when the button is long-pressed. + final VoidCallback? onLongPress; /// The widget in the leading slot of the button. final Widget? leading; @@ -68,22 +68,22 @@ class MoonOutlinedButton extends StatelessWidget { /// * [MoonTextButton], MDS text button. const MoonOutlinedButton({ super.key, - this.onTap, - this.onLongPress, - this.buttonSize, - this.focusNode, - this.semanticLabel, - this.tooltipMessage = "", - this.width, - this.height, - this.minTouchTargetSize = 40, - this.ensureMinimalTouchTargetSize = false, this.autofocus = false, this.isFocusable = true, + this.ensureMinimalTouchTargetSize = false, this.isFullWidth = false, - this.showTooltip = false, this.showPulseEffect = false, + this.showTooltip = false, this.borderColor, + this.height, + this.width, + this.minTouchTargetSize = 40, + this.focusNode, + this.buttonSize, + this.semanticLabel, + this.tooltipMessage = "", + this.onTap, + this.onLongPress, this.label, this.leading, this.trailing, @@ -92,23 +92,23 @@ class MoonOutlinedButton extends StatelessWidget { @override Widget build(BuildContext context) { return MoonButton( - onTap: onTap, - onLongPress: onLongPress, - buttonSize: buttonSize, - focusNode: focusNode, - semanticLabel: semanticLabel, - tooltipMessage: tooltipMessage, - width: width, - height: height, - minTouchTargetSize: minTouchTargetSize, - ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, autofocus: autofocus, isFocusable: isFocusable, + ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, isFullWidth: isFullWidth, - showTooltip: showTooltip, showPulseEffect: showPulseEffect, - borderColor: borderColor, + showTooltip: showTooltip, showBorder: true, + borderColor: borderColor, + height: height, + width: width, + minTouchTargetSize: minTouchTargetSize, + focusNode: focusNode, + buttonSize: buttonSize, + semanticLabel: semanticLabel, + tooltipMessage: tooltipMessage, + onTap: onTap, + onLongPress: onLongPress, label: label, leading: leading, trailing: trailing, diff --git a/lib/src/widgets/buttons/text_button.dart b/lib/src/widgets/buttons/text_button.dart index 354f25a1..3d82ae98 100644 --- a/lib/src/widgets/buttons/text_button.dart +++ b/lib/src/widgets/buttons/text_button.dart @@ -6,50 +6,50 @@ import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/widgets/buttons/button.dart'; class MoonTextButton extends StatelessWidget { - /// The callback that is called when the button is tapped or pressed. - final VoidCallback? onTap; - - /// The callback that is called when the button is long-pressed. - final VoidCallback? onLongPress; + /// {@macro flutter.widgets.Focus.autofocus} + final bool autofocus; - /// The size of the button. - final MoonButtonSize? buttonSize; + /// Whether this button should be focusable. + final bool isFocusable; - /// {@macro flutter.widgets.Focus.focusNode}. - final FocusNode? focusNode; + /// Whether this button should ensure that it has a minimal touch target size. + final bool ensureMinimalTouchTargetSize; - /// The semantic label for the button. - final String? semanticLabel; + /// Whether this button should be full width. + final bool isFullWidth; - /// The tooltip message for the button. - final String tooltipMessage; + /// Whether this button should show a pulse effect. + final bool showPulseEffect; - /// The width of the button. - final double? width; + /// Whether this button should show a tooltip. + final bool showTooltip; /// The height of the button. final double? height; + /// The width of the button. + final double? width; + /// The minimum size of the touch target. final double minTouchTargetSize; - /// Whether this button should ensure that it has a minimal touch target size. - final bool ensureMinimalTouchTargetSize; + /// {@macro flutter.widgets.Focus.focusNode}. + final FocusNode? focusNode; - /// {@macro flutter.widgets.Focus.autofocus} - final bool autofocus; + /// The size of the button. + final MoonButtonSize? buttonSize; - /// Whether this button should be focusable. - final bool isFocusable; + /// The semantic label for the button. + final String? semanticLabel; - /// Whether this button should be full width. - final bool isFullWidth; + /// The tooltip message for the button. + final String tooltipMessage; - /// Whether this button should show a tooltip. - final bool showTooltip; + /// The callback that is called when the button is tapped or pressed. + final VoidCallback? onTap; - /// Whether this button should show a pulse effect. - final bool showPulseEffect; + /// The callback that is called when the button is long-pressed. + final VoidCallback? onLongPress; /// The widget in the leading slot of the button. final Widget? leading; @@ -68,21 +68,21 @@ class MoonTextButton extends StatelessWidget { /// * [MoonOutlinedButton], MDS outlined button. const MoonTextButton({ super.key, - this.onTap, - this.onLongPress, - this.buttonSize, - this.focusNode, - this.semanticLabel, - this.tooltipMessage = "", - this.width, - this.height, - this.minTouchTargetSize = 40, - this.ensureMinimalTouchTargetSize = false, this.autofocus = false, this.isFocusable = true, + this.ensureMinimalTouchTargetSize = false, this.isFullWidth = false, - this.showTooltip = false, this.showPulseEffect = false, + this.showTooltip = false, + this.height, + this.width, + this.minTouchTargetSize = 40, + this.focusNode, + this.buttonSize, + this.semanticLabel, + this.tooltipMessage = "", + this.onTap, + this.onLongPress, this.label, this.leading, this.trailing, @@ -91,30 +91,32 @@ class MoonTextButton extends StatelessWidget { @override Widget build(BuildContext context) { final effectiveTextColor = context.moonTheme?.buttonTheme.colors.textVariantTextColor ?? MoonColors.light.trunks; + final effectiveHoverColor = context.moonTheme?.buttonTheme.colors.textVariantHoverColor ?? MoonColors.light.jiren; + final effectiveFocusColor = context.moonTheme?.buttonTheme.colors.textVariantFocusColor.withOpacity(context.isDarkMode ? 0.8 : 0.2) ?? MoonColors.light.piccolo.withOpacity(context.isDarkMode ? 0.8 : 0.2); return MoonButton( - onTap: onTap, - onLongPress: onLongPress, - buttonSize: buttonSize, - focusNode: focusNode, - semanticLabel: semanticLabel, - tooltipMessage: tooltipMessage, - width: width, - height: height, - minTouchTargetSize: minTouchTargetSize, - ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, autofocus: autofocus, isFocusable: isFocusable, + ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, isFullWidth: isFullWidth, - textColor: effectiveTextColor, - showTooltip: showTooltip, showPulseEffect: showPulseEffect, + showTooltip: showTooltip, + textColor: effectiveTextColor, hoverEffectColor: effectiveHoverColor, focusEffectColor: effectiveFocusColor, + height: height, + width: width, + minTouchTargetSize: minTouchTargetSize, + focusNode: focusNode, + buttonSize: buttonSize, + semanticLabel: semanticLabel, + tooltipMessage: tooltipMessage, + onTap: onTap, + onLongPress: onLongPress, label: label, leading: leading, trailing: trailing, diff --git a/lib/src/widgets/checkbox/checkbox.dart b/lib/src/widgets/checkbox/checkbox.dart index 08459b58..401cf32b 100644 --- a/lib/src/widgets/checkbox/checkbox.dart +++ b/lib/src/widgets/checkbox/checkbox.dart @@ -12,14 +12,8 @@ import 'package:moon_design/src/widgets/checkbox/checkbox_painter.dart'; import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; class MoonCheckbox extends StatefulWidget { - /// Whether this checkbox is checked. - /// - /// When [tristate] is true, a value of null corresponds to the mixed state. - /// When [tristate] is false, this value must not be null. - final bool? value; - - /// Callback for when the checkbox value changes. - final ValueChanged? onChanged; + /// {@macro flutter.widgets.Focus.autofocus} + final bool autofocus; /// If true the checkbox's [value] can be true, false, or null. /// @@ -33,10 +27,11 @@ class MoonCheckbox extends StatefulWidget { /// If tristate is false (the default), [value] must not be null. final bool tristate; - /// The size of the checkbox's tap target. + /// Whether this checkbox is checked. /// - /// Defaults to 40. - final double tapAreaSizeValue; + /// When [tristate] is true, a value of null corresponds to the mixed state. + /// When [tristate] is false, this value must not be null. + final bool? value; /// The color to use when this checkbox is checked. final Color? activeColor; @@ -50,58 +45,63 @@ class MoonCheckbox extends StatefulWidget { /// The color to use for the checkbox's background when the checkbox is not checked. final Color? inactiveColor; + /// The size of the checkbox's tap target. + /// + /// Defaults to 40. + final double tapAreaSizeValue; + /// {@macro flutter.widgets.Focus.focusNode}. final FocusNode? focusNode; - /// {@macro flutter.widgets.Focus.autofocus} - final bool autofocus; - /// The semantic label for the checkbox. final String? semanticLabel; + /// Callback for when the checkbox value changes. + final ValueChanged? onChanged; + /// MDS checkbox widget. const MoonCheckbox({ super.key, - required this.value, - required this.onChanged, + this.autofocus = false, this.tristate = false, - this.tapAreaSizeValue = 40, + required this.value, this.activeColor, this.borderColor, this.checkColor, this.inactiveColor, + this.tapAreaSizeValue = 40, this.focusNode, - this.autofocus = false, this.semanticLabel, + required this.onChanged, }); static Widget withLabel( BuildContext context, { Key? key, - required bool? value, - required ValueChanged? onChanged, + bool autofocus = false, bool tristate = false, - double tapAreaSizeValue = 40, + required bool? value, Color? activeColor, Color? borderColor, Color? checkColor, Color? inactiveColor, + double tapAreaSizeValue = 40, FocusNode? focusNode, - bool autofocus = false, required String label, + required ValueChanged? onChanged, }) { + final bool isInteractive = onChanged != null; + final Color effectiveTextColor = context.moonColors?.bulma ?? MoonColors.light.bulma; final TextStyle effectiveTextStyle = context.moonTheme?.typography.body.text14.copyWith(color: effectiveTextColor) ?? TextStyle(fontSize: 14, color: effectiveTextColor); - final Duration effectiveFocusEffectDuration = - context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; - final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; - final bool isInteractive = onChanged != null; + final Duration effectiveFocusEffectDuration = + context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; return GestureDetector( onTap: () => onChanged?.call(!value!), @@ -114,16 +114,16 @@ class MoonCheckbox extends StatefulWidget { children: [ MoonCheckbox( key: key, - value: value, - onChanged: onChanged, + autofocus: autofocus, tristate: tristate, - tapAreaSizeValue: 0, + value: value, activeColor: activeColor, borderColor: borderColor, checkColor: checkColor, inactiveColor: inactiveColor, + tapAreaSizeValue: 0, focusNode: focusNode, - autofocus: autofocus, + onChanged: onChanged, ), const SizedBox(width: 12), RepaintBoundary( @@ -149,6 +149,7 @@ class MoonCheckbox extends StatefulWidget { class _MoonCheckboxState extends State with TickerProviderStateMixin, ToggleableStateMixin { final MoonCheckboxPainter _painter = MoonCheckboxPainter(); + bool? _previousValue; @override @@ -198,6 +199,9 @@ class _MoonCheckboxState extends State with TickerProviderStateMix Widget build(BuildContext context) { const Size size = Size(16, 16); + final BorderRadius effectiveBorderRadius = + context.moonTheme?.checkboxTheme.properties.borderRadius ?? MoonBorders.borders.interactiveXs; + final Color effectiveActiveColor = widget.activeColor ?? context.moonTheme?.checkboxTheme.colors.activeColor ?? MoonColors.light.piccolo; @@ -210,20 +214,17 @@ class _MoonCheckboxState extends State with TickerProviderStateMix final Color effectiveBorderColor = widget.borderColor ?? context.moonTheme?.checkboxTheme.colors.borderColor ?? MoonColors.light.trunks; - final double effectiveFocusEffectExtent = - context.moonEffects?.controlFocusEffect.effectExtent ?? MoonFocusEffects.lightFocusEffect.effectExtent; - final Color effectiveFocusEffectColor = context.moonEffects?.controlFocusEffect.effectColor ?? MoonFocusEffects.lightFocusEffect.effectColor; - final Curve effectiveFocusEffectCurve = - context.moonEffects?.controlFocusEffect.effectCurve ?? MoonFocusEffects.lightFocusEffect.effectCurve; - final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; - final BorderRadius effectiveBorderRadius = - context.moonTheme?.checkboxTheme.properties.borderRadius ?? MoonBorders.borders.interactiveXs; + final Curve effectiveFocusEffectCurve = + context.moonEffects?.controlFocusEffect.effectCurve ?? MoonFocusEffects.lightFocusEffect.effectCurve; + + final double effectiveFocusEffectExtent = + context.moonEffects?.controlFocusEffect.effectExtent ?? MoonFocusEffects.lightFocusEffect.effectExtent; final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; @@ -240,11 +241,11 @@ class _MoonCheckboxState extends State with TickerProviderStateMix minSize: Size(widget.tapAreaSizeValue, widget.tapAreaSizeValue), child: MoonFocusEffect( show: states.contains(MaterialState.focused), - effectExtent: effectiveFocusEffectExtent, childBorderRadius: effectiveBorderRadius, effectColor: effectiveFocusEffectColor, effectCurve: effectiveFocusEffectCurve, effectDuration: effectiveFocusEffectDuration, + effectExtent: effectiveFocusEffectExtent, child: RepaintBoundary( child: AnimatedOpacity( opacity: states.contains(MaterialState.disabled) ? effectiveDisabledOpacityValue : 1, diff --git a/lib/src/widgets/chips/chip.dart b/lib/src/widgets/chips/chip.dart index 94e3283c..0e77d6d5 100644 --- a/lib/src/widgets/chips/chip.dart +++ b/lib/src/widgets/chips/chip.dart @@ -17,84 +17,69 @@ enum MoonChipSize { } class MoonChip extends StatelessWidget { - /// The callback that is called when the chip is tapped or pressed. - final VoidCallback? onTap; - - /// The callback that is called when the chip is long-pressed. - final VoidCallback? onLongPress; - - /// The size of the chip. - final MoonChipSize? chipSize; - - /// {@macro flutter.widgets.Focus.focusNode}. - final FocusNode? focusNode; - - /// The semantic label for the chip. - final String? semanticLabel; - - /// The tooltip message for the chip. - final String tooltipMessage; - - /// The width of the chip. - final double? width; - - /// The height of the chip. - final double? height; - - /// The opacity value of the chip when it is disabled. - final double? disabledOpacityValue; - - /// The border width of the chip. - final double? borderWidth; - - /// The gap between the leading or trailing and the label widgets. - final double? gap; - - /// The extent of the focus effect. - final double? focusEffectExtent; - - /// The minimum size of the touch target. - final double minTouchTargetSize; - /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; - /// Whether the chip is active/selected. - final bool isActive; - /// Whether the chip should be focusable. final bool isFocusable; /// Whether this chip should ensure that it has a minimal touch target size. final bool ensureMinimalTouchTargetSize; + /// Whether the chip is active/selected. + final bool isActive; + /// Whether the chip should show a border. final bool showBorder; - /// Whether the chip should show a tooltip. - final bool showTooltip; - /// Whether the chip should show a focus effect. final bool showFocusEffect; - /// The background color of the chip. - final Color? backgroundColor; + /// Whether the chip should show a tooltip. + final bool showTooltip; + + /// The border radius of the chip. + final BorderRadius? borderRadius; /// The border and text color of the active/selected chip. final Color? activeColor; + /// The background color of the chip. + final Color? backgroundColor; + /// The border color of the chip. final Color? borderColor; - /// The text color of the chip. - final Color? textColor; - /// The color of the focus effect. final Color? focusEffectColor; /// The color of the hover effect. final Color? hoverEffectColor; + /// The text color of the chip. + final Color? textColor; + + /// The border width of the chip. + final double? borderWidth; + + /// The opacity value of the chip when it is disabled. + final double? disabledOpacityValue; + + /// The extent of the focus effect. + final double? focusEffectExtent; + + /// The gap between the leading or trailing and the label widgets. + final double? gap; + + /// The height of the chip. + final double? height; + + /// The width of the chip. + final double? width; + + /// The minimum size of the touch target. + final double minTouchTargetSize; + /// The duration of the focus effect. final Duration? focusEffectDuration; @@ -110,8 +95,23 @@ class MoonChip extends StatelessWidget { /// The padding of the chip. final EdgeInsetsGeometry? padding; - /// The border radius of the chip. - final BorderRadius? borderRadius; + /// {@macro flutter.widgets.Focus.focusNode}. + final FocusNode? focusNode; + + /// The size of the chip. + final MoonChipSize? chipSize; + + /// The semantic label for the chip. + final String? semanticLabel; + + /// The tooltip message for the chip. + final String tooltipMessage; + + /// The callback that is called when the chip is tapped or pressed. + final VoidCallback? onTap; + + /// The callback that is called when the chip is long-pressed. + final VoidCallback? onLongPress; /// The widget in the leading slot of the chip. final Widget? leading; @@ -125,38 +125,38 @@ class MoonChip extends StatelessWidget { /// MDS chip widget const MoonChip({ super.key, - this.onTap, - this.onLongPress, - this.chipSize, - this.focusNode, - this.semanticLabel, - this.tooltipMessage = "", - this.width, - this.height, - this.disabledOpacityValue, - this.borderWidth, - this.gap, - this.focusEffectExtent, - this.minTouchTargetSize = 40, this.autofocus = false, - this.isActive = false, this.isFocusable = true, this.ensureMinimalTouchTargetSize = false, + this.isActive = false, this.showBorder = false, - this.showTooltip = false, this.showFocusEffect = true, - this.backgroundColor, + this.showTooltip = false, + this.borderRadius, this.activeColor, + this.backgroundColor, this.borderColor, - this.textColor, this.focusEffectColor, this.hoverEffectColor, + this.textColor, + this.borderWidth, + this.disabledOpacityValue, + this.focusEffectExtent, + this.gap, + this.height, + this.width, + this.minTouchTargetSize = 40, this.focusEffectDuration, this.hoverEffectDuration, this.focusEffectCurve, this.hoverEffectCurve, this.padding, - this.borderRadius, + this.focusNode, + this.chipSize, + this.semanticLabel, + this.tooltipMessage = "", + this.onTap, + this.onLongPress, this.label, this.leading, this.trailing, @@ -175,10 +175,10 @@ class MoonChip extends StatelessWidget { } Color _getTextColor({ - required Color backgroundColor, + required bool isActive, required Color activeColor, + required Color backgroundColor, required Color? textColor, - required bool isActive, }) { if (isActive) return activeColor; if (textColor != null) return textColor; @@ -196,33 +196,22 @@ class MoonChip extends StatelessWidget { @override Widget build(BuildContext context) { - final Color effectiveActiveColor = - activeColor ?? context.moonTheme?.chipTheme.colors.activeColor ?? MoonColors.light.piccolo; + final MoonChipSizeProperties effectiveMoonChipSize = _getMoonChipSize(context, chipSize); - final Color effectiveBackgroundColor = - backgroundColor ?? context.moonTheme?.chipTheme.colors.backgroundColor ?? MoonColors.light.gohan; + final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonChipSize.borderRadius; - final MoonChipSizeProperties effectiveMoonChipSize = _getMoonChipSize(context, chipSize); + final double effectiveBorderWidth = + borderWidth ?? context.moonBorders?.borderWidth ?? MoonBorders.borders.borderWidth; final double effectiveHeight = height ?? effectiveMoonChipSize.height; final double effectiveGap = gap ?? effectiveMoonChipSize.gap; - final EdgeInsetsGeometry effectivePadding = padding ?? effectiveMoonChipSize.padding; - - final EdgeInsets resolvedDirectionalPadding = effectivePadding.resolve(Directionality.of(context)); - - final EdgeInsetsDirectional correctedPadding = EdgeInsetsDirectional.fromSTEB( - leading == null && label != null ? resolvedDirectionalPadding.left : 0, - resolvedDirectionalPadding.top, - trailing == null && label != null ? resolvedDirectionalPadding.right : 0, - resolvedDirectionalPadding.bottom, - ); - - final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonChipSize.borderRadius; + final Color effectiveActiveColor = + activeColor ?? context.moonTheme?.chipTheme.colors.activeColor ?? MoonColors.light.piccolo; - final double effectiveBorderWidth = - borderWidth ?? context.moonBorders?.borderWidth ?? MoonBorders.borders.borderWidth; + final Color effectiveBackgroundColor = + backgroundColor ?? context.moonTheme?.chipTheme.colors.backgroundColor ?? MoonColors.light.gohan; final Color effectiveHoverEffectColor = hoverEffectColor ?? context.moonEffects?.controlHoverEffect.secondaryHoverColor ?? @@ -236,26 +225,36 @@ class MoonChip extends StatelessWidget { context.moonEffects?.controlHoverEffect.hoverDuration ?? MoonHoverEffects.lightHoverEffect.hoverDuration; + final EdgeInsetsGeometry effectivePadding = padding ?? effectiveMoonChipSize.padding; + + final EdgeInsets resolvedDirectionalPadding = effectivePadding.resolve(Directionality.of(context)); + + final EdgeInsetsDirectional correctedPadding = EdgeInsetsDirectional.fromSTEB( + leading == null && label != null ? resolvedDirectionalPadding.left : 0, + resolvedDirectionalPadding.top, + trailing == null && label != null ? resolvedDirectionalPadding.right : 0, + resolvedDirectionalPadding.bottom, + ); return MoonBaseControl( - onTap: onTap ?? () {}, - onLongPress: onLongPress, - semanticLabel: semanticLabel, - tooltipMessage: tooltipMessage, - borderRadius: effectiveBorderRadius, - disabledOpacityValue: disabledOpacityValue, - minTouchTargetSize: minTouchTargetSize, - ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, - focusNode: focusNode, autofocus: autofocus, isFocusable: isFocusable, - showTooltip: showTooltip, + ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, showFocusEffect: showFocusEffect, + showScaleAnimation: false, + showTooltip: showTooltip, + borderRadius: effectiveBorderRadius, backgroundColor: backgroundColor, focusEffectColor: focusEffectColor, + disabledOpacityValue: disabledOpacityValue, + minTouchTargetSize: minTouchTargetSize, focusEffectExtent: focusEffectExtent, focusEffectDuration: focusEffectDuration, focusEffectCurve: focusEffectCurve, - showScaleAnimation: false, + focusNode: focusNode, + tooltipMessage: tooltipMessage, + semanticLabel: semanticLabel, + onTap: onTap ?? () {}, + onLongPress: onLongPress, builder: (context, isEnabled, isHovered, isFocused, isPressed) { final bool canAnimate = isActive || isHovered || isFocused; diff --git a/lib/src/widgets/chips/text_chip.dart b/lib/src/widgets/chips/text_chip.dart index cccc67d3..70a8193c 100644 --- a/lib/src/widgets/chips/text_chip.dart +++ b/lib/src/widgets/chips/text_chip.dart @@ -5,65 +5,29 @@ import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/widgets/chips/chip.dart'; class MoonTextChip extends StatelessWidget { - /// The callback that is called when the chip is tapped or pressed. - final VoidCallback? onTap; - - /// The callback that is called when the chip is long-pressed. - final VoidCallback? onLongPress; - - /// The size of the chip. - final MoonChipSize? chipSize; - - /// {@macro flutter.widgets.Focus.focusNode}. - final FocusNode? focusNode; - - /// The semantic label for the chip. - final String? semanticLabel; - - /// The tooltip message for the button. - final String tooltipMessage; - - /// The width of the chip. - final double? width; - - /// The height of the chip. - final double? height; - - /// The opacity value of the chip when it is disabled. - final double? disabledOpacityValue; - - /// The border width of the chip. - final double? borderWidth; - - /// The gap between the leading or trailing and the label widgets. - final double? gap; - - /// The extent of the focus effect. - final double? focusEffectExtent; - - /// The minimum size of the touch target. - final double minTouchTargetSize; - /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; - /// Whether the chip is active/selected. - final bool isActive; - /// Whether the chip should be focusable. final bool isFocusable; /// Whether this chip should ensure that it has a minimal touch target size. final bool ensureMinimalTouchTargetSize; + /// Whether the chip is active/selected. + final bool isActive; + /// Whether the chip should show a border. final bool showBorder; + /// Whether the chip should show a focus effect. + final bool showFocusEffect; + /// Whether the chip should show a tooltip. final bool showTooltip; - /// Whether the chip should show a focus effect. - final bool showFocusEffect; + /// The border radius of the chip. + final BorderRadius? borderRadius; /// The border and text color of the active/selected chip. final Color? activeColor; @@ -71,15 +35,36 @@ class MoonTextChip extends StatelessWidget { /// The border color of the chip. final Color? borderColor; - /// The text color of the chip. - final Color? textColor; - /// The color of the focus effect. final Color? focusEffectColor; /// The color of the hover effect. final Color? hoverEffectColor; + /// The text color of the chip. + final Color? textColor; + + /// The border width of the chip. + final double? borderWidth; + + /// The opacity value of the chip when it is disabled. + final double? disabledOpacityValue; + + /// The extent of the focus effect. + final double? focusEffectExtent; + + /// The gap between the leading or trailing and the label widgets. + final double? gap; + + /// The height of the chip. + final double? height; + + /// The width of the chip. + final double? width; + + /// The minimum size of the touch target. + final double minTouchTargetSize; + /// The duration of the focus effect. final Duration? focusEffectDuration; @@ -95,8 +80,23 @@ class MoonTextChip extends StatelessWidget { /// The padding of the chip. final EdgeInsetsGeometry? padding; - /// The border radius of the chip. - final BorderRadius? borderRadius; + /// {@macro flutter.widgets.Focus.focusNode}. + final FocusNode? focusNode; + + /// The size of the chip. + final MoonChipSize? chipSize; + + /// The semantic label for the chip. + final String? semanticLabel; + + /// The tooltip message for the button. + final String tooltipMessage; + + /// The callback that is called when the chip is tapped or pressed. + final VoidCallback? onTap; + + /// The callback that is called when the chip is long-pressed. + final VoidCallback? onLongPress; /// The widget in the leading slot of the chip. final Widget? leading; @@ -110,37 +110,37 @@ class MoonTextChip extends StatelessWidget { /// MDS text chip widget. const MoonTextChip({ super.key, - this.onTap, - this.onLongPress, - this.chipSize, - this.focusNode, - this.semanticLabel, - this.tooltipMessage = "", - this.width, - this.height, - this.disabledOpacityValue, - this.borderWidth, - this.gap, - this.focusEffectExtent, - this.minTouchTargetSize = 40, this.autofocus = false, - this.isActive = false, this.isFocusable = true, this.ensureMinimalTouchTargetSize = false, + this.isActive = false, this.showBorder = false, - this.showTooltip = false, this.showFocusEffect = true, + this.showTooltip = false, + this.borderRadius, this.activeColor, this.borderColor, - this.textColor, this.focusEffectColor, this.hoverEffectColor, + this.textColor, + this.borderWidth, + this.disabledOpacityValue, + this.focusEffectExtent, + this.gap, + this.height, + this.width, + this.minTouchTargetSize = 40, this.focusEffectDuration, this.hoverEffectDuration, this.focusEffectCurve, this.hoverEffectCurve, this.padding, - this.borderRadius, + this.focusNode, + this.chipSize, + this.semanticLabel, + this.tooltipMessage = "", + this.onTap, + this.onLongPress, this.label, this.leading, this.trailing, @@ -152,37 +152,37 @@ class MoonTextChip extends StatelessWidget { return MoonChip( key: key, - onTap: onTap, - onLongPress: onLongPress, - width: width, - height: height, - gap: gap, - padding: padding, - semanticLabel: semanticLabel, - tooltipMessage: tooltipMessage, + autofocus: autofocus, + isFocusable: isFocusable, isActive: isActive, + ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, + showBorder: showBorder, + showFocusEffect: showFocusEffect, + showTooltip: showTooltip, + borderRadius: borderRadius, activeColor: activeColor, backgroundColor: Colors.transparent, borderColor: borderColor, + focusEffectColor: focusEffectColor, + hoverEffectColor: hoverEffectColor, textColor: effectiveTextColor, - chipSize: chipSize, - showBorder: showBorder, - showTooltip: showTooltip, - borderRadius: borderRadius, disabledOpacityValue: disabledOpacityValue, - showFocusEffect: showFocusEffect, - autofocus: autofocus, - focusNode: focusNode, - isFocusable: isFocusable, - focusEffectColor: focusEffectColor, - focusEffectCurve: focusEffectCurve, - focusEffectDuration: focusEffectDuration, focusEffectExtent: focusEffectExtent, - hoverEffectColor: hoverEffectColor, - hoverEffectCurve: hoverEffectCurve, - hoverEffectDuration: hoverEffectDuration, - ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, + gap: gap, + height: height, + width: width, minTouchTargetSize: minTouchTargetSize, + focusEffectDuration: focusEffectDuration, + hoverEffectDuration: hoverEffectDuration, + focusEffectCurve: focusEffectCurve, + hoverEffectCurve: hoverEffectCurve, + padding: padding, + focusNode: focusNode, + chipSize: chipSize, + semanticLabel: semanticLabel, + tooltipMessage: tooltipMessage, + onTap: onTap, + onLongPress: onLongPress, leading: leading, label: label, trailing: trailing, diff --git a/lib/src/widgets/common/base_control.dart b/lib/src/widgets/common/base_control.dart index 73b3309c..d5049067 100644 --- a/lib/src/widgets/common/base_control.dart +++ b/lib/src/widgets/common/base_control.dart @@ -19,15 +19,6 @@ typedef MoonBaseControlBuilder = Widget Function( ); class MoonBaseControl extends StatefulWidget { - /// The callback that is called when the control is tapped or pressed. - final VoidCallback? onTap; - - /// The callback that is called when the control is long-pressed. - final VoidCallback? onLongPress; - - /// {@macro flutter.widgets.Focus.focusNode}. - final FocusNode? focusNode; - /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; @@ -37,8 +28,8 @@ class MoonBaseControl extends StatefulWidget { /// Whether this control should ensure that it has a minimal touch target size. final bool ensureMinimalTouchTargetSize; - /// Whether this control should show a tooltip. - final bool showTooltip; + /// Whether the semantic type of this control is button. + final bool semanticTypeIsButton; /// Whether this control should show a focus effect. final bool showFocusEffect; @@ -52,21 +43,27 @@ class MoonBaseControl extends StatefulWidget { /// Whether this control should show a scale animation. final bool showScaleAnimation; - /// Whether the semantic type of this control is button. - final bool semanticTypeIsButton; + /// Whether this control should show a tooltip. + final bool showTooltip; - /// The semantic label for this control. - final String? semanticLabel; + /// The border radius of the control. + final BorderRadius? borderRadius; - /// The tooltip message for this control. - final String tooltipMessage; + /// The background color of the control. + final Color? backgroundColor; - /// The minimum size of the touch target. - final double minTouchTargetSize; + /// The color of the focus effect. + final Color? focusEffectColor; + + /// The color of the pulse effect. + final Color? pulseEffectColor; /// The opacity of the control when it is disabled. final double? disabledOpacityValue; + /// The minimum size of the touch target. + final double minTouchTargetSize; + /// The extent of the focus effect. final double? focusEffectExtent; @@ -76,24 +73,15 @@ class MoonBaseControl extends StatefulWidget { /// The scalar controlling the scaling of the scale effect. final double? scaleEffectScalar; - /// The background color of the control. - final Color? backgroundColor; - - /// The color of the focus effect. - final Color? focusEffectColor; - - /// The color of the pulse effect. - final Color? pulseEffectColor; - /// The duration of the focus effect. final Duration? focusEffectDuration; - /// The duration of the scale effect. - final Duration? scaleEffectDuration; - /// The duration of the pulse effect. final Duration? pulseEffectDuration; + /// The duration of the scale effect. + final Duration? scaleEffectDuration; + /// The curve of the focus effect. final Curve? focusEffectCurve; @@ -103,49 +91,61 @@ class MoonBaseControl extends StatefulWidget { /// The curve of the scale effect. final Curve? scaleEffectCurve; - /// The border radius of the control. - final BorderRadius? borderRadius; + /// {@macro flutter.widgets.Focus.focusNode}. + final FocusNode? focusNode; + + /// The builder that builds the child of this control. + final MoonBaseControlBuilder builder; /// The mouse cursor of the control. final MouseCursor cursor; - /// The builder that builds the child of this control. - final MoonBaseControlBuilder builder; + /// The semantic label for this control. + final String? semanticLabel; + + /// The tooltip message for this control. + final String tooltipMessage; + + /// The callback that is called when the control is tapped or pressed. + final VoidCallback? onTap; + + /// The callback that is called when the control is long-pressed. + final VoidCallback? onLongPress; /// MDS base control widget. const MoonBaseControl({ super.key, - this.onTap, - this.onLongPress, - this.focusNode, this.autofocus = false, this.isFocusable = true, this.ensureMinimalTouchTargetSize = false, - this.showTooltip = false, + this.semanticTypeIsButton = false, this.showFocusEffect = true, this.showPulseEffect = false, this.showPulseEffectJiggle = true, this.showScaleAnimation = true, - this.semanticTypeIsButton = false, - this.semanticLabel, - this.tooltipMessage = "", - this.minTouchTargetSize = 40.0, + this.showTooltip = false, + this.borderRadius = BorderRadius.zero, + this.backgroundColor, + this.focusEffectColor, + this.pulseEffectColor, this.disabledOpacityValue, + this.minTouchTargetSize = 40.0, this.focusEffectExtent, this.pulseEffectExtent, this.scaleEffectScalar, - this.backgroundColor, - this.focusEffectColor, - this.pulseEffectColor, this.focusEffectDuration, this.pulseEffectDuration, this.scaleEffectDuration, this.focusEffectCurve, this.pulseEffectCurve, this.scaleEffectCurve, - this.borderRadius = BorderRadius.zero, - this.cursor = SystemMouseCursors.click, + this.focusNode, required this.builder, + this.cursor = SystemMouseCursors.click, + this.semanticLabel, + this.tooltipMessage = "", + this.onTap, + this.onLongPress, }); @override @@ -153,15 +153,15 @@ class MoonBaseControl extends StatefulWidget { } class _MoonBaseControlState extends State { + late Map> _actions; + + FocusNode? _focusNode; + bool _isFocused = false; bool _isHovered = false; bool _isPressed = false; bool _isLongPressed = false; - FocusNode? _focusNode; - - late Map> _actions; - bool get _isEnabled => widget.onTap != null || widget.onLongPress != null; bool get _canShowTooltip => widget.showTooltip && _isEnabled && (_isFocused || _isHovered || _isLongPressed); @@ -318,19 +318,19 @@ class _MoonBaseControlState extends State { context.moonEffects?.controlFocusEffect.effectColor ?? MoonFocusEffects.lightFocusEffect.effectColor; + final Color focusColor = _getFocusColor(isDarkMode: context.isDarkMode, focusColor: effectiveFocusEffectColor); + final double effectiveFocusEffectExtent = widget.focusEffectExtent ?? context.moonEffects?.controlFocusEffect.effectExtent ?? MoonFocusEffects.lightFocusEffect.effectExtent; - final Curve effectiveFocusEffectCurve = widget.focusEffectCurve ?? - context.moonEffects?.controlFocusEffect.effectCurve ?? - MoonFocusEffects.lightFocusEffect.effectCurve; - final Duration effectiveFocusEffectDuration = widget.focusEffectDuration ?? context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; - final Color focusColor = _getFocusColor(isDarkMode: context.isDarkMode, focusColor: effectiveFocusEffectColor); + final Curve effectiveFocusEffectCurve = widget.focusEffectCurve ?? + context.moonEffects?.controlFocusEffect.effectCurve ?? + MoonFocusEffects.lightFocusEffect.effectCurve; // Pulse effect props final Color effectivePulseEffectColor = widget.pulseEffectColor ?? diff --git a/lib/src/widgets/common/effects/focus_effect.dart b/lib/src/widgets/common/effects/focus_effect.dart index b688b428..25121cb1 100644 --- a/lib/src/widgets/common/effects/focus_effect.dart +++ b/lib/src/widgets/common/effects/focus_effect.dart @@ -4,21 +4,21 @@ import 'package:moon_design/src/widgets/common/effects/painters/focus_effect_pai class MoonFocusEffect extends StatefulWidget { final bool show; - final double effectExtent; + final BorderRadius? childBorderRadius; final Color effectColor; + final double effectExtent; final Duration effectDuration; final Curve effectCurve; - final BorderRadius? childBorderRadius; final Widget child; const MoonFocusEffect({ super.key, required this.show, - required this.effectExtent, + this.childBorderRadius, required this.effectColor, + required this.effectExtent, required this.effectDuration, required this.effectCurve, - this.childBorderRadius, required this.child, }); diff --git a/lib/src/widgets/common/effects/pulse_effect.dart b/lib/src/widgets/common/effects/pulse_effect.dart index d05f7c32..6d33fc56 100644 --- a/lib/src/widgets/common/effects/pulse_effect.dart +++ b/lib/src/widgets/common/effects/pulse_effect.dart @@ -5,22 +5,22 @@ import 'package:moon_design/src/widgets/common/effects/painters/pulse_effect_pai class MoonPulseEffect extends StatefulWidget { final bool show; final bool showJiggle; - final double effectExtent; + final BorderRadius? childBorderRadius; final Color effectColor; + final double effectExtent; final Duration effectDuration; final Curve effectCurve; - final BorderRadius? childBorderRadius; final Widget child; const MoonPulseEffect({ super.key, required this.show, required this.showJiggle, - required this.effectExtent, + this.childBorderRadius, required this.effectColor, + required this.effectExtent, required this.effectDuration, required this.effectCurve, - this.childBorderRadius, required this.child, }); diff --git a/lib/src/widgets/common/progress_indicators/base_progress.dart b/lib/src/widgets/common/progress_indicators/base_progress.dart index 893c9c9d..2131ac71 100644 --- a/lib/src/widgets/common/progress_indicators/base_progress.dart +++ b/lib/src/widgets/common/progress_indicators/base_progress.dart @@ -7,16 +7,14 @@ import 'package:flutter/material.dart'; /// indicator, see [MoonLinearProgressIndicator]. For a circular progress indicator, /// see [MoonCircularProgressIndicator]. abstract class MoonBaseProgressIndicator extends StatefulWidget { - /// If non-null, the value of this progress indicator. - /// - /// A value of 0.0 means no progress and 1.0 means that progress is complete. - /// The value will be clamped to be in the range 0.0-1.0. - /// - /// If null, this progress indicator is indeterminate, which means the - /// indicator displays a predetermined animation that does not indicate how - /// much actual progress is being made. - final double? value; + /// The progress indicator's color as an animated value. + final Animation? valueColor; + /// The [SemanticsProperties.label] for this progress indicator. + /// + /// This value indicates the purpose of the progress bar, and will be + /// read out by screen readers to indicate the purpose of this progress + /// indicator. /// The progress indicator's background color. /// /// It is up to the subclass to implement this in whatever way makes sense @@ -26,14 +24,16 @@ abstract class MoonBaseProgressIndicator extends StatefulWidget { /// The progress indicator's color. final Color color; - /// The progress indicator's color as an animated value. - final Animation? valueColor; - - /// The [SemanticsProperties.label] for this progress indicator. + /// If non-null, the value of this progress indicator. /// - /// This value indicates the purpose of the progress bar, and will be - /// read out by screen readers to indicate the purpose of this progress - /// indicator. + /// A value of 0.0 means no progress and 1.0 means that progress is complete. + /// The value will be clamped to be in the range 0.0-1.0. + /// + /// If null, this progress indicator is indeterminate, which means the + /// indicator displays a predetermined animation that does not indicate how + /// much actual progress is being made. + final double? value; + final String? semanticsLabel; /// The [SemanticsProperties.value] for this progress indicator. @@ -61,10 +61,10 @@ abstract class MoonBaseProgressIndicator extends StatefulWidget { /// for determinate progress indicators to indicate how much progress has been made. const MoonBaseProgressIndicator({ super.key, - this.value, + this.valueColor, required this.backgroundColor, required this.color, - this.valueColor, + this.value, this.semanticsLabel, this.semanticsValue, }); diff --git a/lib/src/widgets/common/progress_indicators/circular_progress_indicator.dart b/lib/src/widgets/common/progress_indicators/circular_progress_indicator.dart index 2a943e0f..dcbe138e 100644 --- a/lib/src/widgets/common/progress_indicators/circular_progress_indicator.dart +++ b/lib/src/widgets/common/progress_indicators/circular_progress_indicator.dart @@ -17,10 +17,10 @@ class MoonCircularProgressIndicator extends MoonBaseProgressIndicator { required super.backgroundColor, required super.color, super.valueColor, - this.strokeWidth = 4.0, - this.strokeCap = StrokeCap.round, super.semanticsLabel, super.semanticsValue, + this.strokeWidth = 4.0, + this.strokeCap = StrokeCap.round, }); /// Color of the circular track being filled by the circular indicator. @@ -98,8 +98,10 @@ class _MoonCircularProgressIndicatorState extends State 0); /// Color of the track being filled by the linear indicator. @@ -77,8 +77,10 @@ class _MoonLinearProgressIndicatorState extends State? popoverShadows; - /// Popover transition duration (fade in or out animation). final Duration? transitionDuration; /// Popover transition curve (fade in or out animation). final Curve? transitionCurve; + /// Padding around the popover content. + final EdgeInsetsGeometry? contentPadding; + + /// List of popover shadows. + final List? popoverShadows; + + /// Sets the popover position relative to the target. Defaults to [MoonPopoverPosition.vertical] + final MoonPopoverPosition popoverPosition; + /// `RouteObserver` used to listen for route changes that will hide the popover when the widget's route is not active. final RouteObserver>? routeObserver; /// The semantic label for the popover. final String? semanticLabel; - /// The widget that its placed inside the popover and functions as its content. - final Widget content; - /// The [child] widget which the popover will target. final Widget child; + /// The widget that its placed inside the popover and functions as its content. + final Widget content; + /// MDS popover widget. const MoonPopover({ super.key, required this.show, - this.popoverPosition = MoonPopoverPosition.top, - this.minWidth, - this.maxWidth, - this.minHeight, - this.maxHeight, - this.contentPadding, - this.distanceToTarget, this.borderRadius, + this.backgroundColor, + this.borderColor = Colors.transparent, this.borderWidth = 0, + this.distanceToTarget, + this.minHeight, + this.minWidth, + this.maxHeight, + this.maxWidth, this.popoverMargin = 8, - this.borderColor = Colors.transparent, - this.backgroundColor, this.transitionDuration, this.transitionCurve, + this.contentPadding, this.popoverShadows, + this.popoverPosition = MoonPopoverPosition.top, this.routeObserver, this.semanticLabel, - required this.content, required this.child, + required this.content, }); // Causes any current popovers to be removed. Won't remove the supplied popover. @@ -133,10 +133,10 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP AnimationController? _animationController; CurvedAnimation? _curvedAnimation; - bool _routeIsShowing = true; - OverlayEntry? _overlayEntry; + bool _routeIsShowing = true; + bool get shouldShowPopover => widget.show && _routeIsShowing; void _showPopover() { @@ -362,6 +362,9 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP Widget _createOverlayContent() { MoonPopoverPosition popoverPosition = widget.popoverPosition; + final BorderRadius effectiveBorderRadius = + widget.borderRadius ?? context.moonTheme?.popoverTheme.properties.borderRadius ?? BorderRadius.circular(12); + final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.popoverTheme.colors.backgroundColor ?? MoonColors.light.gohan; @@ -373,15 +376,13 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP final EdgeInsetsGeometry effectiveContentPadding = widget.contentPadding ?? context.moonTheme?.popoverTheme.properties.contentPadding ?? const EdgeInsets.all(12); - final BorderRadius effectiveBorderRadius = - widget.borderRadius ?? context.moonTheme?.popoverTheme.properties.borderRadius ?? BorderRadius.circular(12); - final List effectivePopoverShadows = widget.popoverShadows ?? context.moonTheme?.popoverTheme.shadows.popoverShadows ?? MoonShadows.light.sm; - final targetRenderBox = context.findRenderObject()! as RenderBox; final overlayRenderBox = Overlay.of(context).context.findRenderObject()! as RenderBox; + final targetRenderBox = context.findRenderObject()! as RenderBox; + final popoverTargetGlobalCenter = targetRenderBox.localToGlobal(targetRenderBox.size.center(Offset.zero), ancestor: overlayRenderBox); @@ -504,15 +505,15 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP } class _PopoverPositionProperties { - final Offset offset; final Alignment followerAnchor; final Alignment targetAnchor; final double toolTipMaxWidth; + final Offset offset; _PopoverPositionProperties({ - required this.offset, required this.followerAnchor, required this.targetAnchor, required this.toolTipMaxWidth, + required this.offset, }); } diff --git a/lib/src/widgets/progress/circular_progress.dart b/lib/src/widgets/progress/circular_progress.dart index 6c940e4a..f1980335 100644 --- a/lib/src/widgets/progress/circular_progress.dart +++ b/lib/src/widgets/progress/circular_progress.dart @@ -14,11 +14,11 @@ enum MoonCircularProgressSize { } class MoonCircularProgress extends StatelessWidget { - /// Size of the circular progress widget. - final MoonCircularProgressSize? circularProgressSize; + /// Color of the circular progress widget. + final Color? color; - /// Value of the circular progress widget. - final double value; + /// Background color of the circular progress widget. + final Color? backgroundColor; /// Size value of the circular progress widget. final double? sizeValue; @@ -26,29 +26,29 @@ class MoonCircularProgress extends StatelessWidget { /// Stroke width of the circular progress widget. final double? strokeWidth; - /// Color of the circular progress widget. - final Color? color; - - /// Background color of the circular progress widget. - final Color? backgroundColor; + /// Value of the circular progress widget. + final double value; - /// Stroke cap of the circular progress widget. - final StrokeCap? strokeCap; + /// Size of the circular progress widget. + final MoonCircularProgressSize? circularProgressSize; /// The semantic label for the circular progress widget. final String? semanticLabel; + /// Stroke cap of the circular progress widget. + final StrokeCap? strokeCap; + /// MDS circular progress widget. const MoonCircularProgress({ super.key, - this.circularProgressSize, - required this.value, - this.sizeValue, - this.strokeWidth, this.color, this.backgroundColor, - this.strokeCap, + this.sizeValue, + this.strokeWidth, + required this.value, + this.circularProgressSize, this.semanticLabel, + this.strokeCap, }); MoonCircularProgressSizeProperties _getMoonCircularProgressSize( @@ -76,16 +76,19 @@ class MoonCircularProgress extends StatelessWidget { Widget build(BuildContext context) { final Color effectiveColor = color ?? context.moonTheme?.circularProgressTheme.colors.color ?? MoonColors.light.piccolo; + final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.circularProgressTheme.colors.backgroundColor ?? MoonColors.light.trunks; - final StrokeCap effectiveStrokeCap = strokeCap ?? StrokeCap.round; - final MoonCircularProgressSizeProperties effectiveMoonCircularProgressSize = _getMoonCircularProgressSize(context, circularProgressSize); + final double effectiveSize = sizeValue ?? effectiveMoonCircularProgressSize.progressSizeValue; + final double effectiveStrokeWidth = strokeWidth ?? effectiveMoonCircularProgressSize.progressStrokeWidth; + final StrokeCap effectiveStrokeCap = strokeCap ?? StrokeCap.round; + return Semantics( label: semanticLabel, value: "${value * 100}%", @@ -93,10 +96,10 @@ class MoonCircularProgress extends StatelessWidget { height: effectiveSize, width: effectiveSize, child: MoonCircularProgressIndicator( - value: value, - strokeWidth: effectiveStrokeWidth, color: effectiveColor, backgroundColor: effectiveBackgroundColor, + strokeWidth: effectiveStrokeWidth, + value: value, strokeCap: effectiveStrokeCap, ), ), diff --git a/lib/src/widgets/progress/linear_progress.dart b/lib/src/widgets/progress/linear_progress.dart index 76585bba..05d22296 100644 --- a/lib/src/widgets/progress/linear_progress.dart +++ b/lib/src/widgets/progress/linear_progress.dart @@ -14,14 +14,8 @@ enum MoonLinearProgressSize { } class MoonLinearProgress extends StatelessWidget { - /// Size of the linear progress widget. - final MoonLinearProgressSize? linearProgressSize; - - /// Value of the linear progress widget. - final double value; - - /// Height of the linear progress widget. - final double? height; + /// Border radius value of the linear progress widget. + final BorderRadius? borderRadius; /// Color of the linear progress widget. final Color? color; @@ -29,8 +23,14 @@ class MoonLinearProgress extends StatelessWidget { /// Background color of the linear progress widget. final Color? backgroundColor; - /// Border radius value of the linear progress widget. - final BorderRadius? borderRadius; + /// Height of the linear progress widget. + final double? height; + + /// Value of the linear progress widget. + final double value; + + /// Size of the linear progress widget. + final MoonLinearProgressSize? linearProgressSize; /// The semantic label for the linear progress widget. final String? semanticLabel; @@ -38,12 +38,12 @@ class MoonLinearProgress extends StatelessWidget { /// MDS linear progress widget. const MoonLinearProgress({ super.key, - this.linearProgressSize, - required this.value, - this.height, + this.borderRadius, this.color, this.backgroundColor, - this.borderRadius, + this.height, + required this.value, + this.linearProgressSize, this.semanticLabel, }); @@ -70,24 +70,27 @@ class MoonLinearProgress extends StatelessWidget { @override Widget build(BuildContext context) { + final MoonLinearProgressSizeProperties effectiveProgressSize = _getMoonProgressSize(context, linearProgressSize); + + final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveProgressSize.borderRadius; + final Color effectiveColor = color ?? context.moonTheme?.linearProgressTheme.colors.color ?? MoonColors.light.piccolo; + final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.linearProgressTheme.colors.backgroundColor ?? MoonColors.light.trunks; - final MoonLinearProgressSizeProperties effectiveProgressSize = _getMoonProgressSize(context, linearProgressSize); - final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveProgressSize.borderRadius; final double effectiveHeight = height ?? effectiveProgressSize.progressHeight; return Semantics( label: semanticLabel, value: "${value * 100}%", child: MoonLinearProgressIndicator( - value: value, borderRadius: effectiveBorderRadius, - minHeight: effectiveHeight, + value: value, color: effectiveColor, backgroundColor: effectiveBackgroundColor, + minHeight: effectiveHeight, ), ); } diff --git a/lib/src/widgets/radio/radio.dart b/lib/src/widgets/radio/radio.dart index 31e4c06e..b6bc4a54 100644 --- a/lib/src/widgets/radio/radio.dart +++ b/lib/src/widgets/radio/radio.dart @@ -9,30 +9,8 @@ import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; import 'package:moon_design/src/widgets/radio/radio_painter.dart'; class MoonRadio extends StatefulWidget { - /// The value represented by this radio button. - final T value; - - /// The currently selected value for a group of radio buttons. - /// - /// This radio button is considered selected if its [value] matches the - /// [groupValue]. - final T? groupValue; - - /// Called when the user selects this radio button. - /// - /// The radio button passes [value] as a parameter to this callback. The radio - /// button does not actually change state until the parent widget rebuilds the - /// radio button with the new [groupValue]. - /// - /// If null, the radio button will be displayed as disabled. - /// - /// The provided callback will not be invoked if this radio button is already - /// selected. - /// - /// The callback provided to [onChanged] should update the state of the parent - /// [StatefulWidget] using the [State.setState] method, so that the parent - /// gets rebuilt. - final ValueChanged? onChanged; + /// {@macro flutter.widgets.Focus.autofocus} + final bool autofocus; /// Set to true if this radio button is allowed to be returned to an /// indeterminate state by selecting it again when selected. @@ -52,67 +30,89 @@ class MoonRadio extends StatefulWidget { /// Defaults to false. final bool toggleable; - /// The size of the radio's tap target. - /// - /// Defaults to 40. - final double tapAreaSizeValue; - /// The color to use when this radio is checked. final Color? activeColor; /// The color to use for the radio's background when the radio is not checked. final Color? inactiveColor; + /// The size of the radio's tap target. + /// + /// Defaults to 40. + final double tapAreaSizeValue; + /// {@macro flutter.widgets.Focus.focusNode}. final FocusNode? focusNode; - /// {@macro flutter.widgets.Focus.autofocus} - final bool autofocus; - /// The semantic label for the radio. final String? semanticLabel; + /// The value represented by this radio button. + final T value; + + /// The currently selected value for a group of radio buttons. + /// + /// This radio button is considered selected if its [value] matches the + /// [groupValue]. + final T? groupValue; + + /// Called when the user selects this radio button. + /// + /// The radio button passes [value] as a parameter to this callback. The radio + /// button does not actually change state until the parent widget rebuilds the + /// radio button with the new [groupValue]. + /// + /// If null, the radio button will be displayed as disabled. + /// + /// The provided callback will not be invoked if this radio button is already + /// selected. + /// + /// The callback provided to [onChanged] should update the state of the parent + /// [StatefulWidget] using the [State.setState] method, so that the parent + /// gets rebuilt. + final ValueChanged? onChanged; + /// MDS radio widget. const MoonRadio({ super.key, - required this.value, - required this.groupValue, - required this.onChanged, + this.autofocus = false, this.toggleable = false, - this.tapAreaSizeValue = 40, this.activeColor, this.inactiveColor, + this.tapAreaSizeValue = 40, this.focusNode, - this.autofocus = false, this.semanticLabel, + required this.value, + required this.groupValue, + required this.onChanged, }); static Widget withLabel( BuildContext context, { Key? key, - required T value, - required T? groupValue, - required ValueChanged? onChanged, + bool autofocus = false, bool toggleable = false, - double tapAreaSizeValue = 40, Color? activeColor, Color? inactiveColor, + double tapAreaSizeValue = 40, FocusNode? focusNode, - bool autofocus = false, required String label, + required T value, + required T? groupValue, + required ValueChanged? onChanged, }) { + final bool isInteractive = onChanged != null; + final Color effectiveTextColor = context.moonColors?.bulma ?? MoonColors.light.bulma; - final TextStyle effectiveTextStyle = - context.moonTheme?.typography.body.text14.copyWith(color: effectiveTextColor) ?? - TextStyle(fontSize: 14, color: effectiveTextColor); + final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; - final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; - - final bool isInteractive = onChanged != null; + final TextStyle effectiveTextStyle = + context.moonTheme?.typography.body.text14.copyWith(color: effectiveTextColor) ?? + TextStyle(fontSize: 14, color: effectiveTextColor); return GestureDetector( onTap: () => onChanged?.call(value), @@ -203,18 +203,18 @@ class _RadioState extends State> with TickerProviderStateMixin, final Color effectiveInactiveColor = widget.inactiveColor ?? context.moonTheme?.radioTheme.colors.inactiveColor ?? MoonColors.light.trunks; - final double effectiveFocusEffectExtent = - context.moonEffects?.controlFocusEffect.effectExtent ?? MoonFocusEffects.lightFocusEffect.effectExtent; - final Color effectiveFocusEffectColor = context.moonEffects?.controlFocusEffect.effectColor ?? MoonFocusEffects.lightFocusEffect.effectColor; - final Curve effectiveFocusEffectCurve = - context.moonEffects?.controlFocusEffect.effectCurve ?? MoonFocusEffects.lightFocusEffect.effectCurve; + final double effectiveFocusEffectExtent = + context.moonEffects?.controlFocusEffect.effectExtent ?? MoonFocusEffects.lightFocusEffect.effectExtent; final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; + final Curve effectiveFocusEffectCurve = + context.moonEffects?.controlFocusEffect.effectCurve ?? MoonFocusEffects.lightFocusEffect.effectCurve; + final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; final MaterialStateProperty effectiveMouseCursor = diff --git a/lib/src/widgets/switch/switch.dart b/lib/src/widgets/switch/switch.dart index 0ddf16b4..2b5a2510 100644 --- a/lib/src/widgets/switch/switch.dart +++ b/lib/src/widgets/switch/switch.dart @@ -17,29 +17,14 @@ enum MoonSwitchSize { } class MoonSwitch extends StatefulWidget { - /// Determines if the switch is on or off. - final bool value; - - /// Callback when the switch is toggled on or off. - final ValueChanged? onChanged; - - /// The size of the switch. - final MoonSwitchSize? switchSize; - /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; /// Whether the switch has haptic feedback (vibration) when toggled. final bool hasHapticFeedback; - /// The width of the switch. - final double? width; - - /// The height of the switch. - final double? height; - - /// The size of the thumb. - final double? thumbSizeValue; + /// Determines if the switch is on or off. + final bool value; /// The color to use on the switch when the switch is on. final Color? activeTrackColor; @@ -50,8 +35,14 @@ class MoonSwitch extends StatefulWidget { /// The color of the thumb. final Color? thumbColor; - /// The padding of the switch. - final EdgeInsetsGeometry? padding; + /// The height of the switch. + final double? height; + + /// The width of the switch. + final double? width; + + /// The size of the thumb. + final double? thumbSizeValue; /// The duration for the switch animation. final Duration? duration; @@ -59,12 +50,21 @@ class MoonSwitch extends StatefulWidget { /// The curve for the switch animation. final Curve? curve; + /// The padding of the switch. + final EdgeInsetsGeometry? padding; + /// {@macro flutter.widgets.Focus.focusNode}. final FocusNode? focusNode; + /// The size of the switch. + final MoonSwitchSize? switchSize; + /// The semantic label for the switch. final String? semanticLabel; + /// Callback when the switch is toggled on or off. + final ValueChanged? onChanged; + /// The widget to display when the switch is on (left slot). final Widget? activeTrackWidget; @@ -80,22 +80,22 @@ class MoonSwitch extends StatefulWidget { /// MDS switch widget. const MoonSwitch({ super.key, - required this.value, - this.onChanged, - this.switchSize, this.autofocus = false, - this.width, - this.height, - this.thumbSizeValue, this.hasHapticFeedback = true, + required this.value, this.activeTrackColor, this.inactiveTrackColor, this.thumbColor, - this.padding, + this.height, + this.width, + this.thumbSizeValue, this.duration, this.curve, + this.padding, this.focusNode, + this.switchSize, this.semanticLabel, + this.onChanged, this.activeTrackWidget, this.inactiveTrackWidget, this.activeThumbWidget, @@ -107,28 +107,28 @@ class MoonSwitch extends StatefulWidget { } class _MoonSwitchState extends State with SingleTickerProviderStateMixin { - AnimationController? _animationController; - CurvedAnimation? _curvedAnimation; - CurvedAnimation? _curvedAnimationWithOvershoot; - Animation? _thumbFadeAnimation; - Animation? _activeTrackWidgetFadeAnimation; - Animation? _inactiveTrackWidgetFadeAnimation; + late final Map> _actions = { + ActivateIntent: CallbackAction(onInvoke: (_) => _handleTap()) + }; late Animation? _alignmentAnimation; late Animation? _trackDecorationAnimation; - late final Map> _actions = { - ActivateIntent: CallbackAction(onInvoke: (_) => _handleTap()) - }; + AnimationController? _animationController; + Animation? _thumbFadeAnimation; + Animation? _activeTrackWidgetFadeAnimation; + Animation? _inactiveTrackWidgetFadeAnimation; + CurvedAnimation? _curvedAnimation; + CurvedAnimation? _curvedAnimationWithOvershoot; FocusNode? _focusNode; + bool _isFocused = false; + // A non-null boolean value that changes to true at the end of a drag if the // switch must be animated to the _curvedAnimationWithOvershoot indicated by the widget's value. bool _needsPositionAnimation = false; - bool _isFocused = false; - FocusNode get _effectiveFocusNode => widget.focusNode ?? (_focusNode ??= FocusNode()); bool get _isInteractive => widget.onChanged != null; @@ -282,33 +282,33 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM final MoonSwitchSizeProperties effectiveMoonSwitchSize = _getMoonSwitchSize(context, widget.switchSize); - final double effectiveWidth = widget.width ?? effectiveMoonSwitchSize.width; + final Color effectiveActiveTrackColor = + widget.activeTrackColor ?? context.moonTheme?.switchTheme.colors.activeTrackColor ?? MoonColors.light.piccolo; + + final Color effectiveInactiveTrackColor = widget.inactiveTrackColor ?? + context.moonTheme?.switchTheme.colors.inactiveTrackColor ?? + MoonColors.light.beerus; + + final Color effectiveThumbColor = + widget.thumbColor ?? context.moonTheme?.switchTheme.colors.thumbColor ?? MoonColors.light.goten; final double effectiveHeight = widget.height ?? effectiveMoonSwitchSize.height; + final double effectiveWidth = widget.width ?? effectiveMoonSwitchSize.width; + final double effectiveThumbSizeValue = widget.thumbSizeValue ?? effectiveMoonSwitchSize.thumbSizeValue; + final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; + final EdgeInsetsGeometry effectivePadding = widget.padding ?? effectiveMoonSwitchSize.padding; final EdgeInsets resolvedDirectionalPadding = effectivePadding.resolve(Directionality.of(context)); final BorderRadius effectiveBorderRadius = BorderRadius.circular(effectiveThumbSizeValue / 2); - final Color effectiveActiveTrackColor = - widget.activeTrackColor ?? context.moonTheme?.switchTheme.colors.activeTrackColor ?? MoonColors.light.piccolo; - - final Color effectiveInactiveTrackColor = widget.inactiveTrackColor ?? - context.moonTheme?.switchTheme.colors.inactiveTrackColor ?? - MoonColors.light.beerus; - - final Color effectiveThumbColor = - widget.thumbColor ?? context.moonTheme?.switchTheme.colors.thumbColor ?? MoonColors.light.goten; - final List effectiveThumbShadow = context.moonTheme?.switchTheme.shadows.thumbShadows ?? MoonShadows.light.sm; - final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; - final Duration effectiveDuration = widget.duration ?? context.moonTheme?.switchTheme.properties.transitionDuration ?? const Duration(milliseconds: 200); @@ -322,12 +322,12 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM final Color effectiveFocusEffectColor = context.moonEffects?.controlFocusEffect.effectColor ?? MoonFocusEffects.lightFocusEffect.effectColor; - final Curve effectiveFocusEffectCurve = - context.moonEffects?.controlFocusEffect.effectCurve ?? MoonFocusEffects.lightFocusEffect.effectCurve; - final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; + final Curve effectiveFocusEffectCurve = + context.moonEffects?.controlFocusEffect.effectCurve ?? MoonFocusEffects.lightFocusEffect.effectCurve; + _animationController ??= AnimationController( vsync: this, value: widget.value ? 1.0 : 0.0, @@ -386,7 +386,9 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM ); final Color iconColor = _getTextOrIconColor(backgroundColor: effectiveThumbColor); + final Color activeTextColor = _getTextOrIconColor(backgroundColor: effectiveActiveTrackColor); + final Color inactiveTextColor = _getTextOrIconColor(backgroundColor: effectiveInactiveTrackColor); return Semantics( @@ -474,11 +476,11 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM duration: effectiveDuration, child: MoonFocusEffect( show: _isFocused, - effectExtent: effectiveFocusEffectExtent, effectColor: effectiveFocusEffectColor, - effectCurve: effectiveFocusEffectCurve, - effectDuration: effectiveFocusEffectDuration, childBorderRadius: effectiveBorderRadius, + effectExtent: effectiveFocusEffectExtent, + effectDuration: effectiveFocusEffectDuration, + effectCurve: effectiveFocusEffectCurve, child: Container( width: effectiveThumbSizeValue, height: effectiveThumbSizeValue, diff --git a/lib/src/widgets/tag/tag.dart b/lib/src/widgets/tag/tag.dart index f510c1da..4f0eb75a 100644 --- a/lib/src/widgets/tag/tag.dart +++ b/lib/src/widgets/tag/tag.dart @@ -12,41 +12,41 @@ enum MoonTagSize { } class MoonTag extends StatelessWidget { - /// The callback that is called when the tag is tapped or pressed. - final VoidCallback? onTap; - - /// The callback that is called when the tag is long-pressed. - final VoidCallback? onLongPress; + /// Whether the tag should use upper case text style. + final bool isUpperCase; - /// The size of the tag. - final MoonTagSize? tagSize; + /// The border radius of the tag. + final BorderRadius? borderRadius; - /// The semantic label for the tag. - final String? semanticLabel; + /// The background color of the tag. + final Color? backgroundColor; - /// The width of the tag. - final double? width; + /// The text color of the tag. + final Color? textColor; /// The height of the tag. final double? height; + /// The width of the tag. + final double? width; + /// The gap between the leading or trailing and the label widgets. final double? gap; - /// The background color of the tag. - final Color? backgroundColor; - - /// The text color of the tag. - final Color? textColor; - /// The padding of the tag. final EdgeInsetsGeometry? padding; - /// The border radius of the tag. - final BorderRadius? borderRadius; + /// The size of the tag. + final MoonTagSize? tagSize; - /// Whether the tag should use upper case text style. - final bool isUpperCase; + /// The semantic label for the tag. + final String? semanticLabel; + + /// The callback that is called when the tag is tapped or pressed. + final VoidCallback? onTap; + + /// The callback that is called when the tag is long-pressed. + final VoidCallback? onLongPress; /// The widget in the leading slot of the tag. final Widget? leading; @@ -60,18 +60,18 @@ class MoonTag extends StatelessWidget { /// MDS tag widget. const MoonTag({ super.key, - this.onTap, - this.onLongPress, - this.tagSize, - this.semanticLabel, - this.width, - this.height, - this.gap, + this.isUpperCase = true, + this.borderRadius, this.backgroundColor, this.textColor, + this.height, + this.width, + this.gap, this.padding, - this.borderRadius, - this.isUpperCase = true, + this.tagSize, + this.semanticLabel, + this.onTap, + this.onLongPress, this.leading, this.label, this.trailing, @@ -103,20 +103,20 @@ class MoonTag extends StatelessWidget { @override Widget build(BuildContext context) { + final MoonTagSizeProperties effectiveMoonTagSize = _getMoonTagSize(context, tagSize); + + final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonTagSize.borderRadius; + final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.tagTheme.colors.backgroundColor ?? MoonColors.light.gohan; final Color effectiveTextColor = textColor ?? _getTextColor(context, isDarkMode: context.isDarkMode, effectiveBackgroundColor: effectiveBackgroundColor); - final MoonTagSizeProperties effectiveMoonTagSize = _getMoonTagSize(context, tagSize); - final double effectiveHeight = height ?? effectiveMoonTagSize.height; final double effectiveGap = gap ?? effectiveMoonTagSize.gap; - final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonTagSize.borderRadius; - final EdgeInsetsGeometry effectivePadding = padding ?? effectiveMoonTagSize.padding; final EdgeInsets resolvedDirectionalPadding = effectivePadding.resolve(Directionality.of(context)); diff --git a/lib/src/widgets/textarea/textarea.dart b/lib/src/widgets/textarea/textarea.dart index b02e7b75..d51ecc0b 100644 --- a/lib/src/widgets/textarea/textarea.dart +++ b/lib/src/widgets/textarea/textarea.dart @@ -10,14 +10,50 @@ import 'package:moon_design/src/widgets/common/animated_icon_theme.dart'; typedef MoonTextAreaErrorBuilder = Widget Function(BuildContext context, String? errorText); class MoonTextArea extends StatefulWidget { - /// Controls the text being edited. - final TextEditingController? controller; + /// Used to set the auto validation mode. + final AutovalidateMode autovalidateMode; - /// {@macro flutter.widgets.editableText.scrollController} - final ScrollController? scrollController; + /// {@macro flutter.widgets.editableText.autocorrect} + final bool autocorrect; - /// {@macro flutter.widgets.editableText.scrollPhysics} - final ScrollPhysics? scrollPhysics; + /// {@macro flutter.widgets.editableText.autofocus} + final bool autofocus; + + /// If false the widget is "disabled": it ignores taps and has a reduced opacity. + final bool enabled; + + /// {@macro flutter.services.TextInputConfiguration.enableIMEPersonalizedLearning} + final bool enableIMEPersonalizedLearning; + + /// {@macro flutter.widgets.editableText.enableInteractiveSelection} + final bool? enableInteractiveSelection; + + /// {@macro flutter.services.TextInputConfiguration.enableSuggestions} + final bool enableSuggestions; + + /// {@macro flutter.widgets.editableText.scribbleEnabled} + final bool scribbleEnabled; + + /// {@macro flutter.widgets.editableText.readOnly} + final bool readOnly; + + /// {@macro flutter.widgets.editableText.showCursor} + final bool? showCursor; + + /// The border radius of the text area. + final BorderRadius? borderRadius; + + /// The appearance of the keyboard. + /// + /// This setting is only honored on iOS devices. + /// + /// If unset, defaults to [ThemeData.brightness]. + final Brightness? keyboardAppearance; + + /// {@macro flutter.material.Material.clipBehavior} + /// + /// Defaults to [Clip.hardEdge]. + final Clip? clipBehavior; /// The background color of the text area. final Color? backgroundColor; @@ -37,58 +73,58 @@ class MoonTextArea extends StatefulWidget { /// The text color of the hint in text area. final Color? hintTextColor; - /// The type of action button to use for the keyboard. - /// - /// Defaults to [TextInputAction.newline] if [keyboardType] is - /// [TextInputType.multiline] and [TextInputAction.done] otherwise. - final TextInputAction? textInputAction; - - /// {@macro flutter.widgets.editableText.textCapitalization} - final TextCapitalization textCapitalization; + /// The height of the text area (this does not include the space taken by [MoonTextArea.errorBuilder]). + final double? height; - /// {@macro flutter.widgets.editableText.textAlign} - final TextAlign textAlign; + /// The transition duration for disable animation. + final Duration? transitionDuration; - /// {@macro flutter.widgets.editableText.textDirection} - final TextDirection? textDirection; + /// The transition curve for disable animation. + final Curve? transitionCurve; - /// The style to use for the text being edited. - /// - /// This text style is also used as the base style for the [decoration]. - final TextStyle? textStyle; + /// {@macro flutter.widgets.editableText.scrollPadding} + final EdgeInsets scrollPadding; - /// The style to use for the error state text. - final TextStyle? errorTextStyle; + /// The padding around the text content. + final EdgeInsetsGeometry? textPadding; - /// {@macro flutter.widgets.editableText.strutStyle} - final StrutStyle? strutStyle; + /// {@macro flutter.widgets.Focus.focusNode}. + final FocusNode? focusNode; - /// {@macro flutter.widgets.editableText.autocorrect} - final bool autocorrect; + /// Validator for the text area widget. + final FormFieldValidator? validator; - /// If false the widget is "disabled": it ignores taps and it has a reduced opacity. - final bool enabled; + /// The maximum number of characters (Unicode grapheme clusters) to allow in the text area. + /// + /// {@macro flutter.services.lengthLimitingTextInputFormatter.maxLength} + final int? maxLength; - /// {@macro flutter.services.TextInputConfiguration.enableIMEPersonalizedLearning} - final bool enableIMEPersonalizedLearning; + /// {@macro flutter.widgets.editableText.minLines} + /// * [expands], which determines whether the field should fill the height of its parent. + final int? minLines; - /// {@macro flutter.widgets.editableText.enableInteractiveSelection} - final bool? enableInteractiveSelection; + /// {@macro flutter.widgets.editableText.autofillHints} + /// {@macro flutter.services.AutofillConfiguration.autofillHints} + final Iterable? autofillHints; - /// {@macro flutter.services.TextInputConfiguration.enableSuggestions} - final bool enableSuggestions; + /// {@macro flutter.widgets.editableText.inputFormatters} + final List? inputFormatters; - /// {@macro flutter.widgets.editableText.readOnly} - final bool readOnly; + /// Determines how the [maxLength] limit should be enforced. + /// + /// {@macro flutter.services.textFormatter.effectiveMaxLengthEnforcement} + /// + /// {@macro flutter.services.textFormatter.maxLengthEnforcement} + final MaxLengthEnforcement? maxLengthEnforcement; - /// {@macro flutter.widgets.editableText.scribbleEnabled} - final bool scribbleEnabled; + /// Builder for the error widget. + final MoonTextAreaErrorBuilder? errorBuilder; - /// {@macro flutter.widgets.editableText.showCursor} - final bool? showCursor; + /// {@macro flutter.widgets.editableText.scrollController} + final ScrollController? scrollController; - /// The height of the text area (this does not include the space taken by [MoonTextArea.errorBuilder]). - final double? height; + /// {@macro flutter.widgets.editableText.scrollPhysics} + final ScrollPhysics? scrollPhysics; /// The text for the hint. final String? hintText; @@ -106,67 +142,43 @@ class MoonTextArea extends StatefulWidget { /// {@endtemplate} final String? restorationId; - /// The border radius of the text area. - final BorderRadius? borderRadius; - - /// {@macro flutter.material.Material.clipBehavior} - /// - /// Defaults to [Clip.hardEdge]. - final Clip? clipBehavior; - - /// The padding around the text content. - final EdgeInsetsGeometry? textPadding; - - /// {@macro flutter.widgets.editableText.minLines} - /// * [expands], which determines whether the field should fill the height of its parent. - final int? minLines; + /// The semantic label for the widget. + final String? semanticLabel; - /// The maximum number of characters (Unicode grapheme clusters) to allow in the text area. - /// - /// {@macro flutter.services.lengthLimitingTextInputFormatter.maxLength} - final int? maxLength; + /// {@macro flutter.widgets.editableText.strutStyle} + final StrutStyle? strutStyle; - /// Determines how the [maxLength] limit should be enforced. - /// - /// {@macro flutter.services.textFormatter.effectiveMaxLengthEnforcement} - /// - /// {@macro flutter.services.textFormatter.maxLengthEnforcement} - final MaxLengthEnforcement? maxLengthEnforcement; + /// {@macro flutter.widgets.editableText.textAlign} + final TextAlign textAlign; - /// {@macro flutter.widgets.editableText.inputFormatters} - final List? inputFormatters; + /// {@macro flutter.widgets.editableText.textDirection} + final TextDirection? textDirection; - /// {@macro flutter.widgets.editableText.autofillHints} - /// {@macro flutter.services.AutofillConfiguration.autofillHints} - final Iterable? autofillHints; + /// {@macro flutter.widgets.editableText.textCapitalization} + final TextCapitalization textCapitalization; - /// Used to set the auto validation mode. - final AutovalidateMode autovalidateMode; + /// Controls the text being edited. + final TextEditingController? controller; - /// The appearance of the keyboard. - /// - /// This setting is only honored on iOS devices. + /// The type of action button to use for the keyboard. /// - /// If unset, defaults to [ThemeData.brightness]. - final Brightness? keyboardAppearance; - - /// {@macro flutter.widgets.editableText.scrollPadding} - final EdgeInsets scrollPadding; - - /// The transition duration for disable animation. - final Duration? transitionDuration; + /// Defaults to [TextInputAction.newline] if [keyboardType] is + /// [TextInputType.multiline] and [TextInputAction.done] otherwise. + final TextInputAction? textInputAction; - /// The transition curve for disable animation. - final Curve? transitionCurve; + /// The style to use for the text being edited. + /// + /// This text style is also used as the base style for the [decoration]. + final TextStyle? textStyle; - /// {@macro flutter.widgets.editableText.autofocus} - final bool autofocus; + /// The style to use for the error state text. + final TextStyle? errorTextStyle; - /// {@macro flutter.widgets.Focus.focusNode}. - final FocusNode? focusNode; + /// A callback that is called when the user taps the text area widget. + final GestureTapCallback? onTap; - /// The semantic label for the widget. - final String? semanticLabel; + /// A callback that is called when the user taps outside the text area widget. + final TapRegionCallback? onTapOutside; /// {@macro flutter.widgets.editableText.onChanged} /// @@ -191,72 +203,60 @@ class MoonTextArea extends StatefulWidget { /// focusable item when the user is done editing. final ValueChanged? onSubmitted; - /// A callback that is called when the user taps the text area widget. - final GestureTapCallback? onTap; - - /// A callback that is called when the user taps outside the text area widget. - final TapRegionCallback? onTapOutside; - - /// Validator for the text area widget. - final FormFieldValidator? validator; - - /// Builder for the error widget. - final MoonTextAreaErrorBuilder? errorBuilder; - const MoonTextArea({ super.key, - this.controller, - this.scrollController, - this.scrollPhysics, - this.backgroundColor, - this.activeBorderColor, - this.inactiveBorderColor, - this.errorBorderColor, - this.textColor, - this.hintTextColor, - this.textInputAction, - this.textCapitalization = TextCapitalization.none, - this.textAlign = TextAlign.start, - this.textDirection, - this.textStyle, - this.errorTextStyle, - this.strutStyle, + this.autovalidateMode = AutovalidateMode.disabled, this.autocorrect = true, + this.autofocus = false, this.enabled = true, this.enableIMEPersonalizedLearning = true, this.enableInteractiveSelection, this.enableSuggestions = true, - this.readOnly = false, this.scribbleEnabled = true, + this.readOnly = false, this.showCursor, - this.height, - this.hintText, - this.initialValue, - this.restorationId, this.borderRadius, - this.clipBehavior, - this.textPadding, - this.minLines, - this.maxLength, - this.maxLengthEnforcement, - this.inputFormatters, - this.autofillHints, - this.autovalidateMode = AutovalidateMode.disabled, this.keyboardAppearance, - this.scrollPadding = const EdgeInsets.all(20.0), + this.clipBehavior, + this.backgroundColor, + this.activeBorderColor, + this.inactiveBorderColor, + this.errorBorderColor, + this.textColor, + this.hintTextColor, + this.height, this.transitionDuration, this.transitionCurve, - this.autofocus = false, + this.scrollPadding = const EdgeInsets.all(24.0), + this.textPadding, this.focusNode, + this.validator, + this.maxLength, + this.minLines, + this.autofillHints, + this.inputFormatters, + this.maxLengthEnforcement, + this.errorBuilder, + this.scrollController, + this.scrollPhysics, + this.hintText, + this.initialValue, + this.restorationId, this.semanticLabel, + this.strutStyle, + this.textAlign = TextAlign.start, + this.textDirection, + this.textCapitalization = TextCapitalization.none, + this.controller, + this.textInputAction, + this.textStyle, + this.errorTextStyle, + this.onTap, + this.onTapOutside, this.onChanged, this.onEditingComplete, this.onSaved, this.onSubmitted, - this.onTap, - this.onTapOutside, - this.validator, - this.errorBuilder, }); @override @@ -284,6 +284,9 @@ class _MoonTextAreaState extends State { @override Widget build(BuildContext context) { + final BorderRadius effectiveBorderRadius = + widget.borderRadius ?? context.moonTheme?.textAreaTheme.properties.borderRadius ?? BorderRadius.circular(8); + final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.textAreaTheme.colors.backgroundColor ?? MoonColors.light.gohan; @@ -305,14 +308,8 @@ class _MoonTextAreaState extends State { final Color effectiveHintTextColor = widget.hintTextColor ?? context.moonTheme?.textAreaTheme.colors.hintTextColor ?? MoonColors.light.trunks; - final BorderRadius effectiveBorderRadius = - widget.borderRadius ?? context.moonTheme?.textAreaTheme.properties.borderRadius ?? BorderRadius.circular(8); - final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; - final EdgeInsetsGeometry effectiveTextPadding = - widget.textPadding ?? context.moonTheme?.textAreaTheme.properties.textPadding ?? const EdgeInsets.all(16); - final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.textAreaTheme.properties.transitionDuration ?? const Duration(milliseconds: 200); @@ -320,6 +317,9 @@ class _MoonTextAreaState extends State { final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.textAreaTheme.properties.transitionCurve ?? Curves.easeInOutCubic; + final EdgeInsetsGeometry effectiveTextPadding = + widget.textPadding ?? context.moonTheme?.textAreaTheme.properties.textPadding ?? const EdgeInsets.all(16); + final TextStyle effectiveTextStyle = widget.textStyle ?? context.moonTheme?.textAreaTheme.properties.textStyle ?? const TextStyle(fontSize: 16); diff --git a/lib/src/widgets/toast/toast.dart b/lib/src/widgets/toast/toast.dart index 9605b2bc..788af62a 100644 --- a/lib/src/widgets/toast/toast.dart +++ b/lib/src/widgets/toast/toast.dart @@ -41,21 +41,26 @@ class MoonToast { /// Shows a toast. void show( BuildContext context, { - /// The position of the toast. - MoonToastPosition position = MoonToastPosition.bottom, + /// Whether the toast is persistent (attaches to root navigator). + bool isPersistent = true, - /// The variant of the toast. Inverted variant flips the color scheme from theming, eg instead of light colors, - /// uses dark colors. - MoonToastVariant variant = MoonToastVariant.original, + /// The border radius of the toast. + BorderRadius? borderRadius, /// The background color of the toast. Color? backgroundColor, - /// The border radius of the toast. - BorderRadius? borderRadius, + /// The horizontal space between toast children. + double? gap, - /// Whether the toast is persistent (attaches to root navigator). - bool isPersistent = true, + /// Toast display duration. + Duration? displayDuration, + + /// Toast transition duration (show animation). + Duration? transitionDuration, + + /// Toast transition curve (show animation). + Curve? transitionCurve, /// The margin around toast. EdgeInsetsGeometry? margin, @@ -63,20 +68,15 @@ class MoonToast { ///The padding around toast children. EdgeInsetsGeometry? padding, - /// The horizontal space between toast children. - double? gap, - /// Toast shadows. List? toastShadows, - /// Toast display duration. - Duration? displayDuration, - - /// Toast transition duration (show animation). - Duration? transitionDuration, + /// The position of the toast. + MoonToastPosition position = MoonToastPosition.bottom, - /// Toast transition curve (show animation). - Curve? transitionCurve, + /// The variant of the toast. Inverted variant flips the color scheme from theming, eg instead of light colors, + /// uses dark colors. + MoonToastVariant variant = MoonToastVariant.original, /// The semantic label for the toast. String? semanticLabel, @@ -100,6 +100,9 @@ class MoonToast { } } + final BorderRadius effectiveBorderRadius = + borderRadius ?? context.moonTheme?.toastTheme.properties.borderRadius ?? MoonBorders.borders.surfaceSm; + final Color effectiveBackgroundColor = backgroundColor ?? (variant == MoonToastVariant.original ? (context.moonTheme?.toastTheme.colors.lightVariantBackgroundColor ?? MoonColors.light.gohan) @@ -107,17 +110,8 @@ class MoonToast { final Color effectiveElementColor = getElementColor(effectiveBackgroundColor: effectiveBackgroundColor); - final BorderRadius effectiveBorderRadius = - borderRadius ?? context.moonTheme?.toastTheme.properties.borderRadius ?? MoonBorders.borders.surfaceSm; - - final EdgeInsetsGeometry effectiveContentPadding = - padding ?? context.moonTheme?.toastTheme.properties.contentPadding ?? EdgeInsets.all(MoonSizes.sizes.x2s); - final double effectiveGap = gap ?? context.moonTheme?.toastTheme.properties.gap ?? MoonSizes.sizes.x2s; - final List effectiveToastShadows = - toastShadows ?? context.moonTheme?.toastTheme.shadows.toastShadows ?? MoonShadows.light.lg; - final Duration effectiveDisplayDuration = displayDuration ?? context.moonTheme?.toastTheme.properties.displayDuration ?? const Duration(milliseconds: 5000); @@ -129,6 +123,12 @@ class MoonToast { final Curve effectiveTransitionCurve = transitionCurve ?? context.moonTheme?.toastTheme.properties.transitionCurve ?? Curves.easeInOutCubic; + final EdgeInsetsGeometry effectiveContentPadding = + padding ?? context.moonTheme?.toastTheme.properties.contentPadding ?? EdgeInsets.all(MoonSizes.sizes.x2s); + + final List effectiveToastShadows = + toastShadows ?? context.moonTheme?.toastTheme.shadows.toastShadows ?? MoonShadows.light.lg; + final CapturedThemes themes = InheritedTheme.capture( from: context, to: Navigator.of(context, rootNavigator: isPersistent).context, diff --git a/lib/src/widgets/tooltip/tooltip.dart b/lib/src/widgets/tooltip/tooltip.dart index 3def9000..3cc24e69 100644 --- a/lib/src/widgets/tooltip/tooltip.dart +++ b/lib/src/widgets/tooltip/tooltip.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; +import 'package:moon_design/src/theme/borders.dart'; import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/shadows.dart'; import 'package:moon_design/src/theme/theme.dart'; @@ -24,12 +24,6 @@ class MoonTooltip extends StatefulWidget { // This is required so only one tooltip is shown at a time. static final List<_MoonTooltipState> _openedTooltips = []; - /// Sets a handler for listening to a `tap` event on the tooltip. - final VoidCallback? onTap; - - /// Controls the tooltip visibility. - final bool show; - /// Whether the tooltip has an arrow (tail). final bool hasArrow; @@ -37,23 +31,17 @@ class MoonTooltip extends StatefulWidget { /// rely on the [show] property and [onTap] handler. Defaults to [true]. final bool hideOnTap; - /// Sets the tooltip position relative to the target. Defaults to [MoonTooltipPosition.vertical] - final MoonTooltipPosition tooltipPosition; - - /// Optional size constraint. If a constraint is not set the size will adjust to the content. - final double? minWidth; - - /// Optional size constraint. If a constraint is not set the size will adjust to the content. - final double? minHeight; + /// Controls the tooltip visibility. + final bool show; - /// Optional size constraint. If a constraint is not set the size will adjust to the content. - final double? maxWidth; + /// The border radius of the tooltip. + final BorderRadius? borderRadius; - /// Optional size constraint. If a constraint is not set the size will adjust to the content. - final double? maxHeight; + /// The color of the tooltip background. + final Color? backgroundColor; - /// Padding around the tooltip content. - final EdgeInsetsGeometry? contentPadding; + /// The color of the tooltip border. Is shown when [borderWidth] is larger than 0. + final Color borderColor; /// The width of the tooltip arrow (tail) at its base. final double? arrowBaseWidth; @@ -70,20 +58,20 @@ class MoonTooltip extends StatefulWidget { /// The width of the tooltip border. final double borderWidth; - /// The border radius of the tooltip. - final BorderRadius? borderRadius; + /// Optional size constraint. If a constraint is not set the size will adjust to the content. + final double? minHeight; - /// The margin around tooltip. Used to prevent the tooltip from touching the edges of the viewport. - final double tooltipMargin; + /// Optional size constraint. If a constraint is not set the size will adjust to the content. + final double? minWidth; - /// The color of the tooltip border. Is shown when [borderWidth] is larger than 0. - final Color borderColor; + /// Optional size constraint. If a constraint is not set the size will adjust to the content. + final double? maxHeight; - /// The color of the tooltip background. - final Color? backgroundColor; + /// Optional size constraint. If a constraint is not set the size will adjust to the content. + final double? maxWidth; - /// List of tooltip shadows. - final List? tooltipShadows; + /// The margin around tooltip. Used to prevent the tooltip from touching the edges of the viewport. + final double tooltipMargin; /// Tooltip transition duration (fade in or out animation). final Duration? transitionDuration; @@ -91,47 +79,59 @@ class MoonTooltip extends StatefulWidget { /// Tooltip transition curve (fade in or out animation). final Curve? transitionCurve; + /// Padding around the tooltip content. + final EdgeInsetsGeometry? contentPadding; + + /// List of tooltip shadows. + final List? tooltipShadows; + + /// Sets the tooltip position relative to the target. Defaults to [MoonTooltipPosition.vertical] + final MoonTooltipPosition tooltipPosition; + /// `RouteObserver` used to listen for route changes that will hide the tooltip when the widget's route is not active. final RouteObserver>? routeObserver; /// The semantic label for the tooltip. final String? semanticLabel; - /// The widget that its placed inside the tooltip and functions as its content. - final Widget content; + /// Sets a handler for listening to a `tap` event on the tooltip. + final VoidCallback? onTap; /// The [child] widget which the tooltip will target. final Widget child; + /// The widget that its placed inside the tooltip and functions as its content. + final Widget content; + /// MDS tooltip widget. const MoonTooltip({ super.key, - this.onTap, - required this.show, this.hasArrow = true, this.hideOnTap = true, - this.tooltipPosition = MoonTooltipPosition.top, - this.minWidth, - this.maxWidth, - this.minHeight, - this.maxHeight, - this.contentPadding, + required this.show, + this.borderRadius, + this.backgroundColor, + this.borderColor = Colors.transparent, this.arrowBaseWidth, this.arrowLength, this.arrowOffsetValue = 0, this.arrowTipDistance, - this.borderRadius, this.borderWidth = 0, + this.minHeight, + this.minWidth, + this.maxHeight, + this.maxWidth, this.tooltipMargin = 8, - this.borderColor = Colors.transparent, - this.backgroundColor, this.transitionDuration, this.transitionCurve, + this.contentPadding, this.tooltipShadows, + this.tooltipPosition = MoonTooltipPosition.top, this.routeObserver, this.semanticLabel, - required this.content, + this.onTap, required this.child, + required this.content, }); // Causes any current tooltips to be removed. Won't remove the supplied tooltip. @@ -159,10 +159,10 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker AnimationController? _animationController; CurvedAnimation? _curvedAnimation; - bool _routeIsShowing = true; - OverlayEntry? _overlayEntry; + bool _routeIsShowing = true; + bool get shouldShowTooltip => widget.show && _routeIsShowing; void _showTooltip() { @@ -393,6 +393,10 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker Widget _createOverlayContent() { MoonTooltipPosition tooltipPosition = widget.tooltipPosition; + final BorderRadius effectiveBorderRadius = widget.borderRadius ?? + context.moonTheme?.tooltipTheme.properties.borderRadius ?? + MoonBorders.borders.interactiveXs; + final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.tooltipTheme.colors.backgroundColor ?? MoonColors.light.gohan; @@ -410,19 +414,16 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker final EdgeInsetsGeometry effectiveContentPadding = widget.contentPadding ?? context.moonTheme?.tooltipTheme.properties.contentPadding ?? const EdgeInsets.all(12); - final BorderRadius effectiveBorderRadius = widget.borderRadius ?? - context.moonTheme?.tooltipTheme.properties.borderRadius ?? - MoonBorders.borders.interactiveXs; + final List effectiveTooltipShadows = + widget.tooltipShadows ?? context.moonTheme?.tooltipTheme.shadows.tooltipShadows ?? MoonShadows.light.sm; final TextStyle effectiveTextStyle = context.moonTheme?.tooltipTheme.properties.textStyle.copyWith(color: effectiveTextColor) ?? MoonTextStyles.body.text12.copyWith(color: effectiveTextColor); - final List effectiveTooltipShadows = - widget.tooltipShadows ?? context.moonTheme?.tooltipTheme.shadows.tooltipShadows ?? MoonShadows.light.sm; + final overlayRenderBox = Overlay.of(context).context.findRenderObject()! as RenderBox; final targetRenderBox = context.findRenderObject()! as RenderBox; - final overlayRenderBox = Overlay.of(context).context.findRenderObject()! as RenderBox; final tooltipTargetGlobalCenter = targetRenderBox.localToGlobal(targetRenderBox.size.center(Offset.zero), ancestor: overlayRenderBox); diff --git a/lib/src/widgets/tooltip/tooltip_shape.dart b/lib/src/widgets/tooltip/tooltip_shape.dart index 1219a736..4247f841 100644 --- a/lib/src/widgets/tooltip/tooltip_shape.dart +++ b/lib/src/widgets/tooltip/tooltip_shape.dart @@ -6,26 +6,26 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/widgets/tooltip/tooltip.dart'; class TooltipShape extends ShapeBorder { - final MoonTooltipPosition tooltipPosition; + final BorderRadius borderRadius; + final Color borderColor; + final double borderWidth; final double arrowOffset; final double arrowBaseWidth; final double arrowLength; final double arrowTipDistance; - final BorderRadius borderRadius; - final double borderWidth; final double childWidth; - final Color borderColor; + final MoonTooltipPosition tooltipPosition; const TooltipShape({ - required this.tooltipPosition, + required this.borderRadius, + required this.borderColor, + required this.borderWidth, this.arrowOffset = 0, required this.arrowBaseWidth, required this.arrowLength, required this.arrowTipDistance, - required this.borderRadius, - required this.borderWidth, required this.childWidth, - required this.borderColor, + required this.tooltipPosition, }); @override