How to tween between two strings?

[lordtottuu]

I'm trying to reimplement this checkbox (https://felixblaschke.medium.com/custom-animated-control-elements-with-flutter-8c0d352d7136) with the latest version of the library. Mostly it's been painless but I'm drawing a blank on how to tween between the on and off strings. Is there a recommended way to do this? Thanks in advance!

[felixblaschke]

You can use a constant tween for this. At one point in time it's "on". And after some time it turns to "off". You can do a constanttween of string. Use timeline tween for orchestration. Sid ***@***.***> schrieb am Mo., 3. Mai 2021, 21:34:

…

I'm trying to reimplement this checkbox ( https://felixblaschke.medium.com/custom-animated-control-elements-with-flutter-8c0d352d7136) with the latest version of the library. Mostly it's been painless but I'm drawing a blank on how to tween between the on and off strings. Is there a recommended way to do this? Thanks in advance! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#72>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGJPELCWM2YV5QHM7KERSODTL33CRANCNFSM44BMDH3Q> .

[lordtottuu]

I'm sorry if it's a daft question but I still don't understand how it fits into a scene. Is there a snippet out there that can show me how to integrate a text change into a timeline tween? This is my current code, which doesn't work as the text is stuck on OFF all the time. Feels like my understanding of ConstantTween is below par as, honestly, I wasn't sure how it worked in the earlier version of the library too. If there's a page detailing ConstantTween, feel free to just chuck it in my direction instead. Thank you.

final _tween = TimelineTween<AniProps>()
    ..addScene(
            begin: Duration(milliseconds: 0),
            end: Duration(milliseconds: animDuration))
        .animate(AniProps.paddingLeft, tween: Tween(begin: 1.0, end: 39.0))
        .animate(AniProps.color,
            tween: ColorTween(begin: UI.redNice, end: UI.greenPop))
        .animate(AniProps.rotation, tween: Tween(begin: -2 * pi, end: 0.0))
    ..addScene(
            begin: Duration(milliseconds: animDuration/2),
            end: Duration(milliseconds: animDuration))
        .animate(AniProps.text, tween: ConstantTween(T["co-off"]))
        .animate(AniProps.text, tween: ConstantTween(T["co-on"]));

[felixblaschke]

You need to split it into two scenes, here pseudocode:

.addScene(begin: 0, end: 0.5).animate(text, ConstantTween("off")) // prop text is 'off' for first half
.addScene(begin: 0.5, end: 1).animate(text, ConstantTween("on")) // prop text is 'on' for second half

[lordtottuu]

This is exactly what I needed. Thank you! And thank you for the clear explanation. It has now really clicked in my head how all of this fits together.

Are you accepting PRs for documentation/examples?

[felixblaschke]

Sure you can PR doc/example, if they improve and match the overall style.
Keep in mind that all MD files are generated from the /tool/ directory.