Skip to content

Commit

Permalink
fix: [MDS-675] Add missing container border and helper animations for…
Browse files Browse the repository at this point in the history 
… InputGroup (#252)
  • Loading branch information
@Kypsis
Kypsis committed Sep 12, 2023
1 parent 8db05fc commit e254b16
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 37 deletions.
14 changes: 10 additions & 4 deletions lib/src/widgets/common/border_container.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,24 @@ import 'package:moon_design/moon_design.dart';

/// Used to animate the border of a container. Mainly used in [MoonTextInput] and [MoonTextInputGroup]
class BorderContainer extends StatefulWidget {
final Color backgroundColor;
final Clip clipBehavior;
final Color? backgroundColor;
final Decoration? decoration;
final double? height;

final double? width;
final ShapeBorder border;
final Duration duration;
final Curve curve;
final Widget child;

/// Utility widget used to animate the border of a container.
const BorderContainer({
required this.backgroundColor,
super.key,
this.clipBehavior = Clip.none,
this.backgroundColor,
this.decoration,
required this.height,
this.height,
this.width,
required this.border,
required this.duration,
required this.curve,
Expand Down Expand Up @@ -79,6 +83,8 @@ class _BorderContainerState extends State<BorderContainer> with TickerProviderSt
builder: (context, child) {
return Container(
height: widget.height,
width: widget.width,
clipBehavior: widget.clipBehavior,
decoration: widget.decoration ??
ShapeDecorationWithPremultipliedAlpha(
color: widget.backgroundColor,
Expand Down
55 changes: 48 additions & 7 deletions lib/src/widgets/common/error_message_widgets.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,23 +27,64 @@ class MoonErrorMessages extends StatelessWidget {
}
}

class MoonErrorMessage extends StatelessWidget {
class MoonErrorMessage extends StatefulWidget {
final String errorText;
final Duration duration;
final Curve curve;

/// Default error message widget used in [MoonTextInput] and [MoonTextArea].
const MoonErrorMessage({
super.key,
required this.errorText,
this.duration = const Duration(milliseconds: 167),
this.curve = Curves.fastOutSlowIn,
});

@override
State<MoonErrorMessage> createState() => _MoonErrorMessageState();
}

class _MoonErrorMessageState extends State<MoonErrorMessage> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _opacityAnimation;

@override
void initState() {
super.initState();

_controller = AnimationController(
duration: widget.duration,
vsync: this,
);
_opacityAnimation = CurvedAnimation(
parent: _controller,
curve: widget.curve,
reverseCurve: widget.curve.flipped,
);

_controller
..value = 0.0
..forward();
}

@override
void dispose() {
_controller.dispose();

super.dispose();
}

@override
Widget build(BuildContext context) {
return Row(
children: [
MoonIcon(MoonIcons.info_16, size: context.moonSizes?.x2s ?? 16),
SizedBox(width: context.moonSizes?.x5s ?? 4),
Text(errorText),
],
return FadeTransition(
opacity: _opacityAnimation,
child: Row(
children: [
MoonIcon(MoonIcons.info_16, size: context.moonSizes?.x2s ?? 16),
SizedBox(width: context.moonSizes?.x5s ?? 4),
Text(widget.errorText),
],
),
);
}
}
61 changes: 35 additions & 26 deletions lib/src/widgets/text_input_group/text_input_group.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import 'package:flutter/material.dart';
import 'package:moon_design/src/theme/theme.dart';
import 'package:moon_design/src/theme/tokens/colors.dart';
import 'package:moon_design/src/theme/tokens/sizes.dart';
import 'package:moon_design/src/theme/tokens/transitions.dart';
import 'package:moon_design/src/theme/tokens/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/base_control.dart';
import 'package:moon_design/src/widgets/common/border_container.dart';
import 'package:moon_design/src/widgets/common/error_message_widgets.dart';
import 'package:moon_design/src/widgets/text_input/form_text_input.dart';

Expand Down Expand Up @@ -185,14 +186,13 @@ class _MoonTextInputGroupState extends State<MoonTextInputGroup> {
context.moonTheme?.textInputGroupTheme.properties.helperTextStyle ??
MoonTypography.typography.body.text12;

// TODO: Implement animations
/* final Duration effectiveTransitionDuration = widget.transitionDuration ??
final Duration effectiveTransitionDuration = widget.transitionDuration ??
context.moonTheme?.textInputGroupTheme.properties.transitionDuration ??
MoonTransitions.transitions.defaultTransitionDuration;

final Curve effectiveTransitionCurve = widget.transitionCurve ??
context.moonTheme?.textInputGroupTheme.properties.transitionCurve ??
MoonTransitions.transitions.defaultTransitionCurve; */
MoonTransitions.transitions.defaultTransitionCurve;

final List<String> effectiveErrorMessages = _validatorErrors.nonNulls.toList().isNotEmpty
? _validatorErrors.nonNulls.toList()
Expand Down Expand Up @@ -311,14 +311,23 @@ class _MoonTextInputGroupState extends State<MoonTextInputGroup> {

return index.isEven
? child
: Container(
// Animated divider
: BorderContainer(
height: widget.orientation == MoonTextInputGroupOrientation.horizontal ? double.infinity : 1,
width: widget.orientation == MoonTextInputGroupOrientation.vertical ? double.infinity : 1,
color: (!_groupHasValidationError && _groupHasAllErrorTexts) || _groupHasAllValidationErrors
? effectiveErrorColor
: shouldHideDivider || (_groupHasError || _groupHasValidationError)
? Colors.transparent
: effectiveBorderColor,
duration: effectiveTransitionDuration,
curve: effectiveTransitionCurve,
border: MoonSquircleBorder(
borderRadius: effectiveBorderRadius.squircleBorderRadius(context),
side: BorderSide(
color: (!_groupHasValidationError && _groupHasAllErrorTexts) || _groupHasAllValidationErrors
? effectiveErrorColor
: shouldHideDivider || (_groupHasError || _groupHasValidationError)
? Colors.transparent
: effectiveBorderColor,
),
),
child: const SizedBox.shrink(),
);
},
growable: false,
Expand All @@ -334,22 +343,22 @@ class _MoonTextInputGroupState extends State<MoonTextInputGroup> {
showFocusEffect: false,
onTap: widget.enabled ? () {} : null,
builder: (BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed) {
return Container(
return BorderContainer(
clipBehavior: widget.clipBehavior ?? Clip.none,
decoration: widget.decoration ??
ShapeDecorationWithPremultipliedAlpha(
color: effectiveBackgroundColor,
shape: MoonSquircleBorder(
borderRadius: effectiveBorderRadius.squircleBorderRadius(context),
side: BorderSide(
color: (!_groupHasValidationError && _groupHasAllErrorTexts) || _groupHasAllValidationErrors
? effectiveErrorColor
: effectiveBorderColor,
),
),
),
backgroundColor: effectiveBackgroundColor,
decoration: widget.decoration,
duration: effectiveTransitionDuration,
curve: effectiveTransitionCurve,
border: MoonSquircleBorder(
borderRadius: effectiveBorderRadius.squircleBorderRadius(context),
side: BorderSide(
color: (!_groupHasValidationError && _groupHasAllErrorTexts) || _groupHasAllValidationErrors
? effectiveErrorColor
: effectiveBorderColor,
),
),
child: RepaintBoundary(
child: _GroupOrientation(
child: _InputGroupOrientation(
orientation: widget.orientation,
children: childrenWithDivider(shouldHideDivider: isHovered || isFocused),
),
Expand Down Expand Up @@ -382,11 +391,11 @@ class _MoonTextInputGroupState extends State<MoonTextInputGroup> {
}
}

class _GroupOrientation extends StatelessWidget {
class _InputGroupOrientation extends StatelessWidget {
final MoonTextInputGroupOrientation orientation;
final List<Widget> children;

const _GroupOrientation({
const _InputGroupOrientation({
required this.orientation,
required this.children,
});
Expand Down

0 comments on commit e254b16

Please sign in to comment.