How to independently style a Thai letter positioned above another letter in Flutter?

Question

My setup: Flutter v1.17.4, Mac OS X 10.15.4, locale en-US, Dart v2.8.4

In the Thai language, vowels can appear above and below consonants. In my Thai language learning app, I want to style a consonant differently than its associated vowel.

Using Flutter's RichText and TextSpan, I almost achieved this. But as the image below shows, there's a problem. The vowel thinks it is missing its associated consonant. As a result, the vowel renders with a dotted circle, where it expects the consonant to be. The consonant is in the preceding TextSpan.

How can I make Flutter render this Thai text, with a differently styled vowel and consonant, and without the dotted red circle?

Code that created the chars in the image below.

  RichText thaiConsonantAndVowelAbove(){
    return RichText(
        text: TextSpan(
            children: <TextSpan>[
              TextSpan(text: "ง", style: TextStyle(color: Colors.white, fontSize: 100)),
              TextSpan(text: "ู", style: TextStyle(color: Colors.red, fontSize: 100))
            ]
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Row(children: <Widget>[Expanded(child: thaiConsonantAndVowelAbove(), flex: 1)]);
  }

Answer 1

Thanks to dev001 for helping solve the problem. I did not know that a Thai font is required for some low level styling of Thai characters. Thai and non-Thai fonts can correctly display Thai characters in most situations. However, it seems that only Thai fonts can be used to correctly render a Thai string that is composed of several Flutter TextSpans, and when that string is split between a consonant and a vowel (or tone mark) it must appear in the same space as the consonant.

TLDR: Use a Thai font when you want to style every part of Thai text.

If dev001 submits their comment as an answer, I'll mark it as correct.

Google has graciously made many Thai fonts available for free: https://fonts.google.com/?subset=thai