-
Working with Animations in Flutter is something that can be cumbersome to setup with animation controllers and vsync. I think this could be improved with a new widget class TickerSignal extends ValueSignal<Duration> implements TickerProvider {
TickerSignal() : super(Duration.zero) {
SchedulerBinding.instance.addPersistentFrameCallback((timeStamp) {
super.value = timeStamp;
});
}
Ticker? _ticker;
@override
Ticker createTicker(TickerCallback onTick) {
_ticker = Ticker(
onTick,
debugLabel: kDebugMode ? 'created by ${describeIdentity(this)}' : null,
);
return _ticker!;
}
@override
void dispose() {
_ticker?.dispose();
super.dispose();
}
AnimationController toAnimationController({
double? value,
Duration? duration,
Duration? reverseDuration,
String? debugLabel,
double lowerBound = 0.0,
double upperBound = 1.0,
AnimationBehavior animationBehavior = AnimationBehavior.normal,
}) {
return AnimationController(
vsync: this,
value: value,
duration: duration,
reverseDuration: reverseDuration,
debugLabel: debugLabel,
lowerBound: lowerBound,
upperBound: upperBound,
animationBehavior: animationBehavior,
);
}
} This implements the TickerProvider required for vsync and can create animation controllers: void main() {
final ticker = TickerSignal(); // could be a global
final controller = ticker.toAnimationController(); // can be local or global
final curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); // can be used outside of widget tree
final alpha = IntTween(begin: 0, end: 255).animate(curve);
...
final alphaSignal = alpha.toSignal(); // can be converted to a signal
} Then this could be passed to widgets that need the Animation class. But because it is a signal it can be used in effects and computed callbacks too. If global flutter signals are added then it would depend on the |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
Hello, I have a question regarding the following animation test setup. in build method of StatelessWidget
use value in widget
Initially, I expected that within the effect, the value of animationSignal would be detected increasing from 0 to 300 over a period of 3 seconds. However, it appears that this is not the case. It is only printed once. (also no change in widget) P.S. I apologize if I am using it incorrectly. m(_ _)m |
Beta Was this translation helpful? Give feedback.
-
It is a small change but it is now working: import 'dart:async';
import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';
class Sample extends StatelessWidget {
const Sample({super.key});
@override
Widget build(BuildContext context) {
final ticker = TickerSignal(); // could be a global
final controller = ticker.toAnimationController(
duration: const Duration(seconds: 1)); // can be local or global
final curve = CurvedAnimation(
parent: controller,
curve: Curves.easeOut); // can be used outside of widget tree
final alpha = IntTween(begin: 0, end: 255).animate(curve);
final alphaSignal =
valueListenableToSignal(alpha); // <-- Needs valueListenableToSignal instead of toSignal
controller.repeat();
effect(() => print(alphaSignal.value)); // just fired once
return Watch(
(context) => Container(
height: 100,
width: 100,
color: Colors.red.withAlpha(alphaSignal.value),
),
);
}
} It was creating a Signal<Animation> instead of Signal from the animation |
Beta Was this translation helpful? Give feedback.
It is a small change but it is now working: