search

FilledStacks / flutter-tutorials

The repo contains the source code for all the tutorials on the FilledStacks Youtube channel.
MIT License
4.74k stars 1.76k forks source link

TikTok UI Tutorial Video Description "Marquee" behaviour for text overflow #92

Open catherinetsang opened 4 years ago

catherinetsang commented 4 years ago

Great tutorial! Just a minor suggestion about the VideoDescription text which displays the song details. I noticed TikTok's got a marquee-behaviour to display long song details.

I've tried 2 things: adding dependency: https://pub.dev/packages/marquee and a stack overflow solution: https://stackoverflow.com/questions/51772543/how-to-make-a-text-widget-act-like-marquee-when-the-text-overflows-in-flutter but cannot seem to get the effect working.

Do you have any suggestions on what might be a solution?

FilledStacks commented 4 years ago

@catherinetsang I would manually do it. Put the text in a scoll view, then use the controller of that view to animate the scroll position. When it gets to the end I would animated it back, pause, and then repeat.

The end position can be retrieved from the controller which will give you the max offset of the calculated scrollable area (I think). then you can use a tween between 0 and that amount to linearly interpolate the value over time. I have a video that goes over 3 animation techniques here.

Check it out and try 1 of them. The sequence animation would work well for this because then you can make your delay apart of the squence. If the comment is a bit unclear watch the video first, understand how controllers work and then come back and read this and you "should" get it. I hope.