diff --git a/example/lib/src/storybook/stories/authcode.dart b/example/lib/src/storybook/stories/authcode.dart index c156a7db..79910e4c 100644 --- a/example/lib/src/storybook/stories/authcode.dart +++ b/example/lib/src/storybook/stories/authcode.dart @@ -149,6 +149,7 @@ class AuthCodeStory extends Story { const TextDivider(text: "Disabled MoonAuthCode"), const SizedBox(height: 32), MoonAuthCode( + enabled: enableKnob, enableInputFill: true, authInputFieldCount: 4, mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center, @@ -160,11 +161,9 @@ class AuthCodeStory extends Story { selectedBorderColor: selectedBorderColor, activeBorderColor: activeBorderColor, inactiveBorderColor: inactiveBorderColor, - enabled: enableKnob, gap: gapKnob?.toDouble(), authFieldShape: shapeKnob, obscureText: obscuringKnob, - obscuringCharacter: '﹡', peekWhenObscuring: peekWhenObscuringKnob, validator: (String? value) => null, errorBuilder: (BuildContext context, String? errorText) => const SizedBox(), @@ -187,7 +186,6 @@ class AuthCodeStory extends Story { gap: gapKnob?.toDouble(), authFieldShape: shapeKnob, obscureText: obscuringKnob, - obscuringCharacter: '﹡', peekWhenObscuring: peekWhenObscuringKnob, validator: (String? value) => null, errorBuilder: (BuildContext context, String? errorText) => const SizedBox(), @@ -213,7 +211,6 @@ class AuthCodeStory extends Story { gap: gapKnob?.toDouble(), authFieldShape: shapeKnob, obscureText: obscuringKnob, - obscuringCharacter: '﹡', peekWhenObscuring: peekWhenObscuringKnob, onCompleted: (pin) { if (pin != '9921') { diff --git a/lib/src/theme/authcode/authcode_colors.dart b/lib/src/theme/authcode/authcode_colors.dart index 32e22461..afb12d66 100644 --- a/lib/src/theme/authcode/authcode_colors.dart +++ b/lib/src/theme/authcode/authcode_colors.dart @@ -15,7 +15,6 @@ class MoonAuthCodeColors extends ThemeExtension with Diagnos selectedFillColor: MoonColors.light.gohan, activeFillColor: MoonColors.light.gohan, inactiveFillColor: MoonColors.light.gohan, - disabledColor: MoonColors.light.beerus, textColor: MoonTypography.light.colors.bodyPrimary, ); @@ -27,7 +26,6 @@ class MoonAuthCodeColors extends ThemeExtension with Diagnos selectedFillColor: MoonColors.dark.gohan, activeFillColor: MoonColors.dark.gohan, inactiveFillColor: MoonColors.dark.gohan, - disabledColor: MoonColors.dark.beerus, textColor: MoonTypography.dark.colors.bodyPrimary, ); @@ -52,9 +50,6 @@ class MoonAuthCodeColors extends ThemeExtension with Diagnos /// Fill color of the inactive auth input field which has no input. final Color inactiveFillColor; - /// Color of the auth input field when MoonAuthCode is disabled. - final Color disabledColor; - /// AuthCode text color. final Color textColor; @@ -66,7 +61,6 @@ class MoonAuthCodeColors extends ThemeExtension with Diagnos required this.selectedFillColor, required this.activeFillColor, required this.inactiveFillColor, - required this.disabledColor, required this.textColor, }); @@ -79,7 +73,6 @@ class MoonAuthCodeColors extends ThemeExtension with Diagnos Color? selectedFillColor, Color? activeFillColor, Color? inactiveFillColor, - Color? disabledColor, Color? textColor, }) { return MoonAuthCodeColors( @@ -90,7 +83,6 @@ class MoonAuthCodeColors extends ThemeExtension with Diagnos selectedFillColor: selectedFillColor ?? this.selectedFillColor, activeFillColor: activeFillColor ?? this.activeFillColor, inactiveFillColor: inactiveFillColor ?? this.inactiveFillColor, - disabledColor: disabledColor ?? this.disabledColor, textColor: textColor ?? this.textColor, ); } @@ -107,7 +99,6 @@ class MoonAuthCodeColors extends ThemeExtension with Diagnos selectedFillColor: colorPremulLerp(selectedFillColor, other.selectedFillColor, t)!, activeFillColor: colorPremulLerp(activeFillColor, other.activeFillColor, t)!, inactiveFillColor: colorPremulLerp(inactiveFillColor, other.inactiveFillColor, t)!, - disabledColor: colorPremulLerp(disabledColor, other.disabledColor, t)!, textColor: colorPremulLerp(textColor, other.textColor, t)!, ); } @@ -124,7 +115,6 @@ class MoonAuthCodeColors extends ThemeExtension with Diagnos ..add(ColorProperty("selectedFillColor", selectedFillColor)) ..add(ColorProperty("activeFillColor", activeFillColor)) ..add(ColorProperty("inactiveFillColor", inactiveFillColor)) - ..add(ColorProperty("disabledColor", disabledColor)) ..add(ColorProperty("textColor", textColor)); } } diff --git a/lib/src/widgets/alert/alert.dart b/lib/src/widgets/alert/alert.dart index b5ace162..cb28c85f 100644 --- a/lib/src/widgets/alert/alert.dart +++ b/lib/src/widgets/alert/alert.dart @@ -9,7 +9,6 @@ import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; -import 'package:moon_design/src/widgets/common/animated_icon_theme.dart'; class MoonAlert extends StatefulWidget { /// Controls whether the alert is shown. @@ -260,8 +259,7 @@ class _MoonAlertState extends State with SingleTickerProviderStateMix borderRadius: effectiveBorderRadius.squircleBorderRadius(context), ), ), - child: AnimatedDefaultTextStyle( - duration: effectiveTransitionDuration, + child: DefaultTextStyle( style: TextStyle(color: effectiveTextColor), child: Column( mainAxisAlignment: MainAxisAlignment.center, @@ -269,9 +267,10 @@ class _MoonAlertState extends State with SingleTickerProviderStateMix Row( children: [ if (widget.leading != null) - AnimatedIconTheme( - duration: effectiveTransitionDuration, - color: effectiveLeadingColor, + IconTheme( + data: IconThemeData( + color: effectiveLeadingColor, + ), child: Padding( padding: EdgeInsetsDirectional.only(end: effectiveHorizontalGap), child: widget.leading, @@ -284,9 +283,10 @@ class _MoonAlertState extends State with SingleTickerProviderStateMix ), ), if (widget.trailing != null) - AnimatedIconTheme( - duration: effectiveTransitionDuration, - color: effectiveTrailingColor, + IconTheme( + data: IconThemeData( + color: effectiveTrailingColor, + ), child: Padding( padding: EdgeInsetsDirectional.only(start: effectiveHorizontalGap), child: widget.trailing, diff --git a/lib/src/widgets/authcode/authcode.dart b/lib/src/widgets/authcode/authcode.dart index e65f95d0..a8470125 100644 --- a/lib/src/widgets/authcode/authcode.dart +++ b/lib/src/widgets/authcode/authcode.dart @@ -14,7 +14,6 @@ import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; -import 'package:moon_design/src/widgets/common/animated_icon_theme.dart'; enum AuthFieldShape { box, underline, circle } @@ -86,17 +85,15 @@ class MoonAuthCode extends StatefulWidget { /// [enableInputFill] has to be set true. final Color? inactiveFillColor; - /// Color of the disabled AuthCode. - /// - /// [enabled] has to be set to false. - final Color? disabledColor; - /// AuthCode text color final Color? textColor; /// Border width for the auth input field. final double? borderWidth; + /// The opacity value of the AuthCode when disabled. + final double? disabledOpacityValue; + /// Horizontal space between input fields. final double? gap; @@ -150,7 +147,7 @@ class MoonAuthCode extends StatefulWidget { /// Character used for obscuring text if [obscureText] is true. /// - /// Default is ● - 'Black Circle' (U+25CF). + /// Defaults to the character U+2022 BULLET (•). final String obscuringCharacter; /// Semantic label for MoonAuthCode. @@ -220,11 +217,11 @@ class MoonAuthCode extends StatefulWidget { this.selectedFillColor, this.activeFillColor, this.inactiveFillColor, - this.disabledColor, this.textColor, this.height, this.width, this.borderWidth, + this.disabledOpacityValue, this.gap, this.errorAnimationCurve, this.animationCurve, @@ -240,7 +237,7 @@ class MoonAuthCode extends StatefulWidget { this.mainAxisAlignment = MainAxisAlignment.center, required this.errorBuilder, this.hintCharacter, - this.obscuringCharacter = '●', + this.obscuringCharacter = '•', this.semanticLabel, this.errorStreamController, this.textController, @@ -274,7 +271,6 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix late Color _effectiveSelectedFillColor; late Color _effectiveActiveFillColor; late Color _effectiveInactiveFillColor; - late Color _effectiveDisabledColor; late Color _effectiveTextColor; late Color _effectiveCursorColor; late double _effectiveBorderWidth; @@ -349,7 +345,7 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix if (currentText.length > widget.authInputFieldCount) { currentText = currentText.substring(0, widget.authInputFieldCount); } - Future.delayed(const Duration(milliseconds: 200), () => widget.onCompleted!(currentText)); + Future.delayed(const Duration(milliseconds: 100), () => widget.onCompleted!(currentText)); } if (widget.autoDismissKeyboard) _focusNode.unfocus(); } @@ -424,8 +420,6 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix } Color _getBorderColorFromIndex(int index) { - if (!widget.enabled) return _effectiveDisabledColor; - if (((_selectedIndex == index) || (_selectedIndex == index + 1 && index + 1 == widget.authInputFieldCount)) && _focusNode.hasFocus) { return _isInErrorMode ? _effectiveErrorBorderColor : _effectiveSelectedBorderColor; @@ -437,8 +431,6 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix } Color _getFillColorFromIndex(int index) { - if (!widget.enabled) return _effectiveDisabledColor; - if (((_selectedIndex == index) || (_selectedIndex == index + 1 && index + 1 == widget.authInputFieldCount)) && _focusNode.hasFocus) { return _effectiveSelectedFillColor; @@ -702,9 +694,6 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix context.moonTheme?.authCodeTheme.colors.inactiveBorderColor ?? MoonColors.light.beerus; - _effectiveDisabledColor = - widget.disabledColor ?? context.moonTheme?.authCodeTheme.colors.disabledColor ?? MoonColors.light.goku; - _effectiveErrorBorderColor = widget.errorBorderColor ?? context.moonTheme?.authCodeTheme.colors.errorBorderColor ?? MoonColors.light.chiChi100; @@ -741,7 +730,8 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix context.moonTheme?.authCodeTheme.properties.peekDuration ?? const Duration(milliseconds: 200); - final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; + final double effectiveDisabledOpacityValue = + widget.disabledOpacityValue ?? context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; final Duration effectiveErrorAnimationDuration = widget.errorAnimationDuration ?? context.moonTheme?.authCodeTheme.properties.errorAnimationDuration ?? @@ -768,50 +758,46 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix return Semantics( label: widget.semanticLabel, - child: Column( - children: [ - RepaintBoundary( - child: AnimatedOpacity( - duration: _animationDuration!, - curve: _animationCurve!, - opacity: widget.enabled ? 1 : effectiveDisabledOpacityValue, - child: SlideTransition( - position: _errorOffsetAnimation!, - child: Stack( - children: [ - AbsorbPointer( - child: AutofillGroup(child: _getTextFormField()), - ), - Positioned( - top: 0, - left: 0, - right: 0, - child: GestureDetector( - onTap: () => _onFocus(), - child: Row( - mainAxisAlignment: widget.mainAxisAlignment, - children: _generateAuthInputFields(), - ), + child: AnimatedOpacity( + duration: _animationDuration!, + curve: _animationCurve!, + opacity: widget.enabled ? 1 : effectiveDisabledOpacityValue, + child: Column( + children: [ + SlideTransition( + position: _errorOffsetAnimation!, + child: Stack( + children: [ + AbsorbPointer( + child: AutofillGroup(child: _getTextFormField()), + ), + Positioned( + top: 0, + left: 0, + right: 0, + child: GestureDetector( + onTap: () => _onFocus(), + child: Row( + mainAxisAlignment: widget.mainAxisAlignment, + children: _generateAuthInputFields(), ), ), - ], - ), + ), + ], ), ), - ), - if (_isInErrorMode) - RepaintBoundary( - child: AnimatedDefaultTextStyle( + if (_isInErrorMode) + DefaultTextStyle( style: _resolvedErrorTextStyle, - duration: _animationDuration!, - child: AnimatedIconTheme( - duration: _animationDuration!, - curve: _animationCurve!, + child: IconTheme( + data: IconThemeData( + color: _resolvedErrorTextStyle.color, + ), child: widget.errorBuilder(context, _validateInput()), ), ), - ) - ], + ], + ), ), ); } diff --git a/lib/src/widgets/segmented_control/segmented_control.dart b/lib/src/widgets/segmented_control/segmented_control.dart index 76875664..c51a97a8 100644 --- a/lib/src/widgets/segmented_control/segmented_control.dart +++ b/lib/src/widgets/segmented_control/segmented_control.dart @@ -289,6 +289,15 @@ class _SegmentBuilderState extends State<_SegmentBuilder> with SingleTickerProvi } } + @override + void initState() { + super.initState(); + + _animationController = AnimationController(duration: widget.transitionDuration, vsync: this); + + if (widget.isSelected) _animationController?.value = 1; + } + @override void dispose() { _animationController!.dispose(); @@ -335,10 +344,7 @@ class _SegmentBuilderState extends State<_SegmentBuilder> with SingleTickerProvi ) : resolvedDirectionalPadding; - _animationController ??= AnimationController(duration: widget.transitionDuration, vsync: this); - - _segmentColor ??= - _animationController!.drive(_segmentColorTween.chain(CurveTween(curve: widget.transitionCurve))); + _segmentColor ??= _animationController!.drive(_segmentColorTween.chain(CurveTween(curve: widget.transitionCurve))); _textColor ??= _animationController!.drive(_textColorTween.chain(CurveTween(curve: widget.transitionCurve))); diff --git a/lib/src/widgets/switch/switch.dart b/lib/src/widgets/switch/switch.dart index 9267826d..7d924487 100644 --- a/lib/src/widgets/switch/switch.dart +++ b/lib/src/widgets/switch/switch.dart @@ -12,7 +12,6 @@ import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/utils/squircle/squircle_border_radius.dart'; -import 'package:moon_design/src/widgets/common/animated_icon_theme.dart'; import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; enum MoonSwitchSize { @@ -439,9 +438,8 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM children: [ IconTheme( data: IconThemeData(color: activeTextColor), - child: AnimatedDefaultTextStyle( + child: DefaultTextStyle( style: TextStyle(color: activeTextColor), - duration: effectiveDuration, child: Expanded( child: FadeTransition( opacity: _activeTrackWidgetFadeAnimation!, @@ -453,9 +451,8 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM SizedBox(width: resolvedDirectionalPadding.left), IconTheme( data: IconThemeData(color: inactiveTextColor), - child: AnimatedDefaultTextStyle( + child: DefaultTextStyle( style: TextStyle(color: inactiveTextColor), - duration: effectiveDuration, child: Expanded( child: FadeTransition( opacity: _inactiveTrackWidgetFadeAnimation!, @@ -468,13 +465,13 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM ), Align( alignment: _alignmentAnimation!.value, - child: AnimatedIconTheme( - color: thumbIconColor, - duration: effectiveDuration, - size: effectiveThumbSizeValue, - child: AnimatedDefaultTextStyle( + child: IconTheme( + data: IconThemeData( + color: thumbIconColor, + size: effectiveThumbSizeValue, + ), + child: DefaultTextStyle( style: TextStyle(color: inactiveTextColor), - duration: effectiveDuration, child: MoonFocusEffect( show: _isFocused, effectColor: effectiveFocusEffectColor, diff --git a/lib/src/widgets/tab_bar/tab_bar.dart b/lib/src/widgets/tab_bar/tab_bar.dart index 0295d565..1bdd9369 100644 --- a/lib/src/widgets/tab_bar/tab_bar.dart +++ b/lib/src/widgets/tab_bar/tab_bar.dart @@ -324,6 +324,15 @@ class _IndicatorTabBuilderState extends State<_IndicatorTabBuilder> with SingleT } } + @override + void initState() { + super.initState(); + + _animationController = AnimationController(duration: widget.transitionDuration, vsync: this); + + if (widget.isSelected) _animationController?.value = 1; + } + @override void dispose() { _animationController!.dispose(); @@ -367,8 +376,6 @@ class _IndicatorTabBuilderState extends State<_IndicatorTabBuilder> with SingleT ) : resolvedDirectionalPadding; - _animationController ??= AnimationController(duration: widget.transitionDuration, vsync: this); - _indicatorColor ??= _animationController!.drive(_indicatorColorTween.chain(CurveTween(curve: widget.transitionCurve))); @@ -513,6 +520,15 @@ class _PillTabBuilderState extends State<_PillTabBuilder> with SingleTickerProvi } } + @override + void initState() { + super.initState(); + + _animationController = AnimationController(duration: widget.transitionDuration, vsync: this); + + if (widget.isSelected) _animationController?.value = 1; + } + @override void dispose() { _animationController!.dispose(); @@ -557,8 +573,6 @@ class _PillTabBuilderState extends State<_PillTabBuilder> with SingleTickerProvi ) : resolvedDirectionalPadding; - _animationController ??= AnimationController(duration: widget.transitionDuration, vsync: this); - _tabColor ??= _animationController!.drive(_tabColorTween.chain(CurveTween(curve: widget.transitionCurve))); _textColor ??= _animationController!.drive(_textColorTween.chain(CurveTween(curve: widget.transitionCurve))); diff --git a/lib/src/widgets/text_input/input_decorator.dart b/lib/src/widgets/text_input/input_decorator.dart index fdd6145a..f7527255 100644 --- a/lib/src/widgets/text_input/input_decorator.dart +++ b/lib/src/widgets/text_input/input_decorator.dart @@ -2166,9 +2166,7 @@ class _InputDecoratorState extends State with TickerProviderStat duration: _kTransitionDuration, curve: _kTransitionCurve, opacity: _shouldShowLabel ? 1.0 : 0.0, - child: AnimatedDefaultTextStyle( - duration: _kTransitionDuration, - curve: _kTransitionCurve, + child: DefaultTextStyle( style: widget._labelShouldWithdraw ? _getFloatingLabelStyle(themeData, defaults) : labelStyle, child: decoration.label ?? Text( diff --git a/lib/src/widgets/text_input/text_input.dart b/lib/src/widgets/text_input/text_input.dart index 15ecccbd..4b45829d 100644 --- a/lib/src/widgets/text_input/text_input.dart +++ b/lib/src/widgets/text_input/text_input.dart @@ -19,7 +19,6 @@ import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; -import 'package:moon_design/src/widgets/common/animated_icon_theme.dart'; import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; import 'package:moon_design/src/widgets/text_input/input_decorator.dart'; @@ -1446,8 +1445,7 @@ class _MoonTextInputState extends State effectExtent: effectiveFocusEffectExtent, effectDuration: effectiveTransitionDuration, effectCurve: effectiveTransitionCurve, - child: AnimatedContainer( - duration: effectiveTransitionDuration, + child: Container( height: widget.keyboardType == TextInputType.multiline && widget.height == null ? null : effectiveHeight, decoration: widget.decoration ?? ShapeDecorationWithPremultipliedAlpha( @@ -1459,18 +1457,18 @@ class _MoonTextInputState extends State ), if (widget.helper != null || (widget.errorText != null && widget.errorBuilder != null)) RepaintBoundary( - child: AnimatedIconTheme( - color: widget.errorText != null && widget.errorBuilder != null - ? effectiveErrorBorderColor - : effectiveHintTextColor, - duration: effectiveTransitionDuration, - child: AnimatedDefaultTextStyle( + child: IconTheme( + data: IconThemeData( + color: widget.errorText != null && widget.errorBuilder != null + ? effectiveErrorBorderColor + : effectiveHintTextColor, + ), + child: DefaultTextStyle( style: effectiveHelperTextStyle.copyWith( color: widget.errorText != null && widget.errorBuilder != null ? effectiveErrorBorderColor : effectiveHintTextColor, ), - duration: effectiveTransitionDuration, child: Padding( padding: effectiveHelperPadding, child: widget.errorText != null && widget.errorBuilder != null diff --git a/lib/src/widgets/toast/toast.dart b/lib/src/widgets/toast/toast.dart index c9300cd3..719c4cb6 100644 --- a/lib/src/widgets/toast/toast.dart +++ b/lib/src/widgets/toast/toast.dart @@ -11,7 +11,6 @@ import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; -import 'package:moon_design/src/widgets/common/animated_icon_theme.dart'; enum MoonToastPosition { top, @@ -162,11 +161,11 @@ class MoonToast { child: themes.wrap( Semantics( label: semanticLabel, - child: AnimatedIconTheme( - duration: effectiveTransitionDuration, - color: effectiveElementColor, - child: AnimatedDefaultTextStyle( - duration: effectiveTransitionDuration, + child: IconTheme( + data: IconThemeData( + color: effectiveElementColor, + ), + child: DefaultTextStyle( style: DefaultTextStyle.of(context).style.copyWith(color: effectiveElementColor), child: Container( margin: margin ?? resolvedContentPadding,