Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Create AnimatedIconTheme #41

Merged
merged 1 commit into from
Feb 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions lib/moon_design.dart
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export 'package:moon_design/src/theme/sizes.dart';
export 'package:moon_design/src/theme/theme.dart';
export 'package:moon_design/src/theme/typography/text_styles.dart';
export 'package:moon_design/src/theme/typography/typography.dart';
export 'package:moon_design/src/utils/animated_icon_theme.dart';
export 'package:moon_design/src/utils/extensions.dart';
export 'package:moon_design/src/utils/measure_size.dart';
export 'package:moon_design/src/utils/moon_icon.dart';
Expand Down
91 changes: 91 additions & 0 deletions lib/src/utils/animated_icon_theme.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class AnimatedIconTheme extends StatefulWidget {
final Color color;
final double? size;
final Curve curve;
final Duration duration;
final Widget child;

const AnimatedIconTheme({
super.key,
required this.color,
this.size,
required this.curve,
required this.duration,
required this.child,
});

@override
State<AnimatedIconTheme> createState() => _AnimatedIconThemeState();
}

class _AnimatedIconThemeState extends State<AnimatedIconTheme> with SingleTickerProviderStateMixin {
Color _initialColor = Colors.transparent;
Color _targetColor = Colors.transparent;

AnimationController get controller => _controller;
late final AnimationController _controller = AnimationController(
duration: widget.duration,
debugLabel: kDebugMode ? widget.toStringShort() : null,
vsync: this,
);

Animation<double> get animation => _animation;
late CurvedAnimation _animation = _createCurve();

CurvedAnimation _createCurve() {
return CurvedAnimation(parent: _controller, curve: widget.curve);
}

@override
void initState() {
super.initState();
_initialColor = widget.color;
}

@override
void didUpdateWidget(AnimatedIconTheme oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.curve != oldWidget.curve) {
_animation.dispose();
_animation = _createCurve();
}

_controller.duration = widget.duration;

if (widget.color != oldWidget.color) {
_targetColor = widget.color;
_initialColor = oldWidget.color;
_controller
..value = 0.0
..forward();
}
}

@override
void dispose() {
_animation.dispose();
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return RepaintBoundary(
child: AnimatedBuilder(
animation: _controller,
builder: (context, child) => IconTheme(
data: IconThemeData.lerp(
IconThemeData(color: _initialColor, size: widget.size),
IconThemeData(color: _targetColor, size: widget.size),
_animation.value,
),
child: child!,
),
child: widget.child,
),
);
}
}
11 changes: 6 additions & 5 deletions lib/src/widgets/chips/chip.dart
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import 'package:moon_design/src/theme/chip/chip_sizes.dart';
import 'package:moon_design/src/theme/colors.dart';
import 'package:moon_design/src/theme/effects/hover_effects.dart';
import 'package:moon_design/src/theme/theme.dart';
import 'package:moon_design/src/utils/extensions.dart';
import 'package:moon_design/src/utils/animated_icon_theme.dart';
import 'package:moon_design/src/widgets/base_control.dart';

enum MoonChipSize {
Expand Down Expand Up @@ -164,7 +164,6 @@ class MoonChip extends StatelessWidget {
}

Color _getTextColor({
required bool isDarkMode,
required Color backgroundColor,
required Color activeColor,
required Color? textColor,
Expand Down Expand Up @@ -246,7 +245,6 @@ class MoonChip extends StatelessWidget {

final Color effectiveTextColor = _getTextColor(
isActive: canAnimate,
isDarkMode: context.isDarkMode,
activeColor: effectiveActiveColor,
backgroundColor: effectiveBackgroundColor,
textColor: textColor,
Expand Down Expand Up @@ -287,8 +285,11 @@ class MoonChip extends StatelessWidget {
),
),
),
child: IconTheme(
data: IconThemeData(color: effectiveTextColor, size: effectiveMoonChipSize.iconSizeValue),
child: AnimatedIconTheme(
duration: effectiveHoverEffectDuration,
curve: effectiveHoverEffectCurve,
color: effectiveTextColor,
size: effectiveMoonChipSize.iconSizeValue,
child: AnimatedDefaultTextStyle(
duration: effectiveHoverEffectDuration,
curve: effectiveHoverEffectCurve,
Expand Down