Skip to content

Commit

Permalink
fix: [MDS-539] Fix theme switching issues (#190)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GittHub-d
GittHub-d authored Jun 7, 2023
1 parent 2f6c8c6 commit 7a0d179
Show file tree
Hide file tree
Showing 10 changed files with 101 additions and 116 deletions.
5 changes: 1 addition & 4 deletions example/lib/src/storybook/stories/authcode.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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(),
Expand All @@ -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(),
Expand All @@ -213,7 +211,6 @@ class AuthCodeStory extends Story {
gap: gapKnob?.toDouble(),
authFieldShape: shapeKnob,
obscureText: obscuringKnob,
obscuringCharacter: '﹡',
peekWhenObscuring: peekWhenObscuringKnob,
onCompleted: (pin) {
if (pin != '9921') {
Expand Down
10 changes: 0 additions & 10 deletions lib/src/theme/authcode/authcode_colors.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ class MoonAuthCodeColors extends ThemeExtension<MoonAuthCodeColors> with Diagnos
selectedFillColor: MoonColors.light.gohan,
activeFillColor: MoonColors.light.gohan,
inactiveFillColor: MoonColors.light.gohan,
disabledColor: MoonColors.light.beerus,
textColor: MoonTypography.light.colors.bodyPrimary,
);

Expand All @@ -27,7 +26,6 @@ class MoonAuthCodeColors extends ThemeExtension<MoonAuthCodeColors> with Diagnos
selectedFillColor: MoonColors.dark.gohan,
activeFillColor: MoonColors.dark.gohan,
inactiveFillColor: MoonColors.dark.gohan,
disabledColor: MoonColors.dark.beerus,
textColor: MoonTypography.dark.colors.bodyPrimary,
);

Expand All @@ -52,9 +50,6 @@ class MoonAuthCodeColors extends ThemeExtension<MoonAuthCodeColors> 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;

Expand All @@ -66,7 +61,6 @@ class MoonAuthCodeColors extends ThemeExtension<MoonAuthCodeColors> with Diagnos
required this.selectedFillColor,
required this.activeFillColor,
required this.inactiveFillColor,
required this.disabledColor,
required this.textColor,
});

Expand All @@ -79,7 +73,6 @@ class MoonAuthCodeColors extends ThemeExtension<MoonAuthCodeColors> with Diagnos
Color? selectedFillColor,
Color? activeFillColor,
Color? inactiveFillColor,
Color? disabledColor,
Color? textColor,
}) {
return MoonAuthCodeColors(
Expand All @@ -90,7 +83,6 @@ class MoonAuthCodeColors extends ThemeExtension<MoonAuthCodeColors> with Diagnos
selectedFillColor: selectedFillColor ?? this.selectedFillColor,
activeFillColor: activeFillColor ?? this.activeFillColor,
inactiveFillColor: inactiveFillColor ?? this.inactiveFillColor,
disabledColor: disabledColor ?? this.disabledColor,
textColor: textColor ?? this.textColor,
);
}
Expand All @@ -107,7 +99,6 @@ class MoonAuthCodeColors extends ThemeExtension<MoonAuthCodeColors> 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)!,
);
}
Expand All @@ -124,7 +115,6 @@ class MoonAuthCodeColors extends ThemeExtension<MoonAuthCodeColors> with Diagnos
..add(ColorProperty("selectedFillColor", selectedFillColor))
..add(ColorProperty("activeFillColor", activeFillColor))
..add(ColorProperty("inactiveFillColor", inactiveFillColor))
..add(ColorProperty("disabledColor", disabledColor))
..add(ColorProperty("textColor", textColor));
}
}
18 changes: 9 additions & 9 deletions lib/src/widgets/alert/alert.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -260,18 +259,18 @@ class _MoonAlertState extends State<MoonAlert> with SingleTickerProviderStateMix
borderRadius: effectiveBorderRadius.squircleBorderRadius(context),
),
),
child: AnimatedDefaultTextStyle(
duration: effectiveTransitionDuration,
child: DefaultTextStyle(
style: TextStyle(color: effectiveTextColor),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
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,
Expand All @@ -284,9 +283,10 @@ class _MoonAlertState extends State<MoonAlert> 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,
Expand Down
96 changes: 41 additions & 55 deletions lib/src/widgets/authcode/authcode.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }

Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -274,7 +271,6 @@ class _MoonAuthCodeState extends State<MoonAuthCode> with TickerProviderStateMix
late Color _effectiveSelectedFillColor;
late Color _effectiveActiveFillColor;
late Color _effectiveInactiveFillColor;
late Color _effectiveDisabledColor;
late Color _effectiveTextColor;
late Color _effectiveCursorColor;
late double _effectiveBorderWidth;
Expand Down Expand Up @@ -349,7 +345,7 @@ class _MoonAuthCodeState extends State<MoonAuthCode> 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();
}
Expand Down Expand Up @@ -424,8 +420,6 @@ class _MoonAuthCodeState extends State<MoonAuthCode> 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;
Expand All @@ -437,8 +431,6 @@ class _MoonAuthCodeState extends State<MoonAuthCode> 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;
Expand Down Expand Up @@ -702,9 +694,6 @@ class _MoonAuthCodeState extends State<MoonAuthCode> 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;
Expand Down Expand Up @@ -741,7 +730,8 @@ class _MoonAuthCodeState extends State<MoonAuthCode> 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 ??
Expand All @@ -768,50 +758,46 @@ class _MoonAuthCodeState extends State<MoonAuthCode> 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: <Widget>[
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: <Widget>[
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()),
),
),
)
],
],
),
),
);
}
Expand Down
14 changes: 10 additions & 4 deletions lib/src/widgets/segmented_control/segmented_control.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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)));

Expand Down
Loading

0 comments on commit 7a0d179

Please sign in to comment.