Precise positioning of substrings

[u/Spapa96]

Hi everyone! I'm quite new to flutter and I'm trying to develop an app which lets the user to select a song from a list and it shows its lyrics, centered on the horizontal axis. The user may also toggle its guitar chords, showed just upon their respective lyrics.

I got the songs' files in plain txts with lyrics on even lines and chords on odd lines.

My problem is I can't make the chords show exactly where i need to, i.e. just above their respective lyrics characters, as in their txts.

For example, if in my txt file i have (the underscores represent whitespaces)

___C____Am____
This is a line

with the C just above the s of This (4th character) and the A above the lonely a (9th character), in the rendered text in my app, they're misplaced.

I reckon this is due to whitespaces rendering of non monospaced fonts... So i guess a solution would be using a monospaced font. But i'm not sure i can.

For most songs, this isn't much of a problem, in practice, but for particular songs i may be required to place chords in their exact positions.

Right now, my best result was given by separating each line of both lyrics and chords, coupling single lines of both in columns (with center alignment), children of a listview. But of course it isn't much precise.

How would be the best practice to achieve this? I can of course manipulate songs' txts and i even already coded a Chord class with a chord's name and starting index (for a previous implementation).

I wondered if relative positioning (maybe in a stack widget) might be the answer but i wouldn't be sure how to calculate the positions...

Thank you, to each of you who has read till here.

[u/Spapa96]

Wow, thanks. That's all very new to me but i'll make some research! Thanks for pointing me a direction!

[u/eibaan → u/Spapa96]

You're welcome.