TextBoxComponent with typer text shows pink image before rendering text

[xjyribro]

What happened?

This error ONLY occurs in iOS. When trying to use the 'typer' mechanism in TextBoxComponent, a pink image is rendered for a split second before the actual text appears. This does not happen if the boxConfig param is null.

Simulator.Screen.Recording.-.iPad.10th.generation.-.2024-03-07.at.10.27.00.mp4

What do you expect?

There should not be a pink image rendered

How can we reproduce this?

Create a custom TextBoxComponent and add param boxConfig: TextBoxConfig(timePerChar: timePerChar). Example:

class DialogueTextBox extends TextBoxComponent {
  DialogueTextBox({
    required String text,
  }) : super(
          text: text,
          position: Vector2(16, 16),
          size: Vector2(704, 96),
          textRenderer: TextPaint(
            style: const TextStyle(
              fontSize: dialogueBoxFontSize,
              color: Colors.black,
              fontFamily: Strings.minecraft,
            ),
          ),
          boxConfig: TextBoxConfig(timePerChar: timePerChar),
        );
}

What steps should take to fix this?

No response

Do have an example of where the bug occurs?

No response

Relevant log output

No response

Execute in a terminal and put output into the code block below

Output of: flutter doctor -v

Affected platforms

iOS

Other information

No response

Are you interested in working on a PR for this?

• I want to work on this

[jaehong0721]

Perhaps overloading drawBackground would solve the problem.
e.g)

@override
  void drawBackground(Canvas c) {
    super.drawBackground(c);
    c.drawColor(Colors.transparent, BlendMode.clear);
}

But I'm wondering why this is happening too.

[spydon]

This must be a rendering issue in Flutter, I wonder if we could reproduce it without Flame and report it.

[spydon]

@jaehong0721 does this happen without the BlendMode?

[jaehong0721]

@spydon Oh, that's not happening now (I completely removed the logic overriding drawBackground), so I guess it was probably fixed with the version update.

When I first saw the issue,
Flutter version was 3.16.9, now it's 3.19.1 and
Flame version was 1.16.0, which is now 1.17.0.

I haven't actually tested if downgrading the versions reproduces the issue, should I try that?

[spydon]

Nah, no need to downgrade, if it works on the latest version we can close this.