Signals to drive Flutter Animations

[rodydavis]

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 TickerSignal:

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 onFrame signal:
#115

[snakeshift]

@rodydavis

Hello, I have a question regarding the following animation test setup.

in build method of StatelessWidget

final ticker = TickerSignal();
final controller = ticker.toAnimationController(duration: const Duration(seconds: 3))..repeat(reverse: false);
final animation = Tween<double>(begin: 0, end: 300).animate(controller);
final animationSignal = animation.toSignal();

controller.repeat();
effect(() => print(animationSignal.value.value));

use value in widget

Watch((context) => Positioned(
  top: animationSignal.value.value,
  child: Container(
    height: 30,
    width: 20,
    color: const Color(0XFFFFFFFF),
  ),
)),

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

[rodydavis]

Can you share the full widget code?

[snakeshift]

Thank you for your help.
However, my code has a lot of unnecessary processes,
so I'd like to use your sample code, as it produced the same results.

Initially, I thought alphaSignal.value.value would detect changes,
but it seems it isn't firing after the first time. Am I using it incorrectly?

import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';

class Sample extends StatelessWidget {
  const Sample({Key? key}) : super(key: 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 = alpha.toSignal(); // can be converted to a signal

    controller.repeat();
    effect(() => print(alphaSignal.value.value)); // just fired once

    return Watch(
      (context) => Container(
        height: 100,
        width: 100,
        color: const Color(0XFF000000).withAlpha(alphaSignal.value.value),
      ),
    );
  }
}

When I wrote it as follows, it obviously worked.(but not using animation controller.)

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';

class Sample extends StatelessWidget {
  const Sample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final manualAlphaSignal = signal<int>(0);
    Timer.periodic(const Duration(microseconds: 10000), (Timer timer) {
      manualAlphaSignal.value += 1;
    });

    return Watch(
      (context) => Container(
        height: 100,
        width: 100,
        color: const Color(0XFF000000).withAlpha(manualAlphaSignal.value),
      ),
    );
  }
}

[rodydavis]

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

[rodydavis]

I am looking to change the global .toSignal() to be a different type signature because it conflicts with other extensions

[rodydavis]

Also might could catch this with signals_lint in the future

[snakeshift]

Yay, it worked! Thank you so much! (ﾟ▽ﾟ)