💫 Optimize the overlay animation of notifications
This commit is contained in:
@@ -79,15 +79,10 @@ class AnimatedNotificationItem extends HookConsumerWidget {
|
|||||||
final isDismissed = useState(false);
|
final isDismissed = useState(false);
|
||||||
|
|
||||||
final slideTween = Tween<Offset>(
|
final slideTween = Tween<Offset>(
|
||||||
begin: Offset(isDesktop ? 1.0 : 0.0, 0),
|
begin: isDesktop ? Offset(1.0, 0.0) : Offset(0.0, -1.0),
|
||||||
end: Offset.zero,
|
end: Offset.zero,
|
||||||
).chain(CurveTween(curve: Curves.easeOutCubic));
|
).chain(CurveTween(curve: Curves.easeOutCubic));
|
||||||
|
|
||||||
final fadeTween = Tween<double>(
|
|
||||||
begin: 0.0,
|
|
||||||
end: 1.0,
|
|
||||||
).chain(CurveTween(curve: Curves.easeOut));
|
|
||||||
|
|
||||||
useEffect(() {
|
useEffect(() {
|
||||||
animationController.forward();
|
animationController.forward();
|
||||||
return null;
|
return null;
|
||||||
@@ -105,17 +100,8 @@ class AnimatedNotificationItem extends HookConsumerWidget {
|
|||||||
return () => timer.cancel();
|
return () => timer.cancel();
|
||||||
}, [item.duration, isDismissed.value]);
|
}, [item.duration, isDismissed.value]);
|
||||||
|
|
||||||
return AnimatedBuilder(
|
return SlideTransition(
|
||||||
animation: animationController,
|
position: slideTween.animate(animationController),
|
||||||
builder: (context, child) {
|
|
||||||
return Transform.translate(
|
|
||||||
offset: slideTween.evaluate(animationController),
|
|
||||||
child: Opacity(
|
|
||||||
opacity: fadeTween.evaluate(animationController),
|
|
||||||
child: child,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
child: Padding(
|
child: Padding(
|
||||||
padding: isDesktop
|
padding: isDesktop
|
||||||
? const EdgeInsets.only(bottom: 12, right: 16)
|
? const EdgeInsets.only(bottom: 12, right: 16)
|
||||||
@@ -124,7 +110,7 @@ class AnimatedNotificationItem extends HookConsumerWidget {
|
|||||||
item: item,
|
item: item,
|
||||||
isDesktop: isDesktop,
|
isDesktop: isDesktop,
|
||||||
onDismiss: () {},
|
onDismiss: () {},
|
||||||
).width(isDesktop ? 340 : MediaQuery.sizeOf(context).width - 40),
|
).width(isDesktop ? 420 : MediaQuery.sizeOf(context).width - 40),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user