How to use a TextSpan as a Widget inside VisibilityDetector

Question

I have text in my app that I want to color differently as time goes on. I did this by using RichText widget with a separate text span for each character and a timer that will then update the the state and repaint all of the text spans appropriately. This works so long as the text isn't too long. It starts to break at around 7-10k characters text.

In order to optimize this I decided to use the VisibilityDetector library because text that isn't visible doesn't need to be colored differently. So I chunked the text and put each chunk in its own visibility detector, and when it isn't visible I just set the text using a Text widget. This works, but a single line will get cut off halfway through and start on the next line since they're separate widgets.

What I would like to do is pass the TextSpan as a child of the VisibilityDetector, but this gives the error that TextSpan is not a subtype of the type Widget. Is there any way to do what I want to do?

This is the type of widget tree I would like to have:

String myText = '';

RichText(
    text: TextSpan(
        children: myText.chunk().mapIndexed((chunkIndex, chunkText) {
            return WidgetSpan(
                child: VisibilityDetector(
                    onVisibilityChanged: (info) => _handleVisibilityChanged(),
                    child: !chunkIsVisible ? 
                        Text(chunkText) :
                        TextSpan( //This breaks because its not a subtype of Widget
                            children: chunkText.characters.mapIndexed((charIndex, char) {
                                return TextSpan(
                                    text: char,
                                    style: _styleTextBasedOnIndex((chunkIndex * ChunkSize) + charIndex)
                                )
                            }
                        )
                )
            )
        }
    )
)

Answer 1

I think you can do this to pass the error:

String myText = '';

RichText(
    text: TextSpan(
        children: myText.chunk().mapIndexed((chunkIndex, chunkText) {
            return WidgetSpan(
                child: VisibilityDetector(
                    onVisibilityChanged: (info) => _handleVisibilityChanged(),
                    child: !chunkIsVisible ? 
                        Text(chunkText) :
                        RichText(text: TextSpan( // Use another RichText
                            children: chunkText.characters.mapIndexed((charIndex, char) {
                                return TextSpan(
                                    text: char,
                                    style: _styleTextBasedOnIndex((chunkIndex * ChunkSize) + charIndex)
                                )
                            }
                        )
                   )
              )
            )
        }
    )
)