Horizontal scrolling text with word selection (highlight word in centre while scrolling0

[Alex Baker]

Hey, I'm just looking for some advice on how I might build the sort of widget I have in mind.

So I want a horizontal scrolling text widget that highlights a specific word.

- When the widget is built, it receives an index (or something like that) for the word that should be highlighted

- The highlighted word should be centred

- When the user scrolls the widget, it should also send the value of the word currently in the centre to the backend (and then the highlight will also change to this word)

See attachment for illustration

So far I've managed to achieve a horizontal scrolling widget with one word highlighted by splitting the text into a List<String> of words and drawing them in individual text widgets in a Row inside SingleChildScrollView, and using a GlobalKey and Scrollable.EnsureVisible to make sure the highlighted word is on the screen.

So now what I need is some way to determine which word is in the centre during scrolling and return an index to my model, and I'm not quite sure how to proceed so would appreciate some advice. I looked at ScrollController and ScrollMetrics but can't figure out how to get which widget is in the centre. If the words were all the same length then I could do some maths but they aren't.

Thanks in advance guys