ember/fluffychat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix word card resize on load and add points animation

Browse source
This commit is contained in:
avashilling 2025-06-27 16:05:28 -04:00
parent 7d92e81f56
commit 5205ec8775
2 changed files with 57 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
lib/pangea/toolbar/widgets/word_zoom/new_word_overlay.dart
View file

@ -1,3 +1,4 @@
import 'package:fluffychat/pangea/analytics_misc/gain_points_animation.dart';
import 'package:fluffychat/pangea/constructs/construct_level_enum.dart';
import 'package:flutter/material.dart';
@ -26,7 +27,7 @@ class _NewWordOverlayState extends State<NewWordOverlay>
late final Animation<double> _fadeAnim;
late final Animation<Alignment> _alignmentAnim;
late final Animation<Offset> _offsetAnim;
final bool _showOverlay = true;
bool pointsBlast = false;
Widget xpSeedWidget = const SizedBox();
Widget? get svg => ConstructLevelEnum.seeds.icon();
@override
@ -34,7 +35,7 @@ class _NewWordOverlayState extends State<NewWordOverlay>
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 2500),
duration: const Duration(milliseconds: 2000),
);
_xpScaleAnim = CurvedAnimation(
@ -43,7 +44,7 @@ class _NewWordOverlayState extends State<NewWordOverlay>
);
_fadeAnim = CurvedAnimation(
parent: _controller,
curve: const Interval(0.5, 1.0, curve: Curves.easeOut),
curve: const Interval(0.7, 1.0, curve: Curves.easeOut),
);
_alignmentAnim = AlignmentTween(
@ -67,6 +68,14 @@ class _NewWordOverlayState extends State<NewWordOverlay>
),
);
_controller.addListener(() {
if (!pointsBlast && _controller.value >= 0.6) {
setState(() {
pointsBlast = true;
});
}
});
xpSeedWidget = Container(
child: svg,
);
@ -84,37 +93,51 @@ class _NewWordOverlayState extends State<NewWordOverlay>
@override
Widget build(BuildContext context) {
if (!_showOverlay) return widget.child;
if (!widget.show) return widget.child;
return Stack(
children: [
widget.child,
Positioned.fill(
child: FadeTransition(
opacity: ReverseAnimation(_fadeAnim),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: widget.overlayColor,
child: AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Align(
alignment: _alignmentAnim.value,
child: FractionalTranslation(
translation: _offsetAnim.value,
child: ScaleTransition(
scale: _xpScaleAnim,
child: Transform.scale(
scale: 2 * (1 - _fadeAnim.value),
child: xpSeedWidget,
Positioned(
left: 5,
right: 5,
top: 5,
bottom: 5,
child: Stack(
children: [
FadeTransition(
opacity: ReverseAnimation(_fadeAnim),
child: Container(
color: widget.overlayColor,
child: AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Align(
alignment: _alignmentAnim.value,
child: FractionalTranslation(
translation: _offsetAnim.value,
child: ScaleTransition(
scale: _xpScaleAnim,
child: Transform.scale(
scale: 2 * (.8 - _fadeAnim.value),
child: xpSeedWidget,
),
),
),
),
);
},
);
},
),
),
),
),
pointsBlast
? const Align(
alignment: Alignment.bottomCenter,
child: PointsGainedAnimation(
points: 10,
targetID: "",
),
)
: const SizedBox.shrink(),
],
),
),
],

17
lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart
View file

@ -43,9 +43,8 @@ class WordZoomWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isNewWord = wordIsNew;
final overlayColor = Theme.of(context).scaffoldBackgroundColor;
Widget card = Container(
final Widget card = Container(
padding: const EdgeInsets.all(12.0),
constraints: const BoxConstraints(
minHeight: AppConfig.toolbarMinHeight - 8,
@ -245,13 +244,11 @@ class WordZoomWidget extends StatelessWidget {
),
),
);
if (isNewWord) {
card = NewWordOverlay(
show: true,
overlayColor: overlayColor,
child: card,
);
}
return card;
// Only wrap in NewWordOverlay if wordIsNew is true
return NewWordOverlay(
show: wordIsNew,
overlayColor: overlayColor,
child: card,
);
}
}