"Textbox" with different colored lines?

[rlad78]

I'm trying to write an app that has a "diff" viewer for viewing the differences between certain configurations. I wanted to write a Textbox widget with the following properties:

• Colors differing lines between the two configurations red/green to display their differences
• Allows the user to select text in box for easy copying and pasting
• Is read-only

I've tried using a combination of multiple Text widgets for each line and put them all in a Column widget, but this doesn't allow for multiple lines of text to be selected at a time:

self.lines: list[Control] = [
    Text(
        value=s,
        selectable=True,
        no_wrap=True,
        font_family="Fira",
    )
    for s in self.__text.split("\n")
]
self.text_area = Column(
    controls=self.lines,
    wrap=True,
    spacing=0,
    run_spacing=0,
    scroll="auto",
    expand=True,
)

I can achieve a more "Textbox-like" widget by using a read-only TextField, but there doesn't seem to be a way to change the color of individual text within the TextField.

I've tried using Markdown as well but it naturally doesn't support font colors, and using the gitHubFlavored extension set with the 'diff' code block doesn't produce colors in Flet.

Is there any supported way to set the color of specific text within a Text or TextField widget? Or perhaps a way to support a multiline select across a Column of Text?

[ndonkoHenri]

Do you mean something similar to this ? : https://pub.dev/packages/markup_text

[FeodorFitsner]

Theoretically, this could be implemented with multiple Text control as it allows setting text. Also, there is a recently added SelectionArea widget in Flutter which allows selecting a group of text widgets. Would that work?

[rlad78]

I actually wrote an alternate solution, which was to layer another "background" Container underneath in a Stack. That background container contains a Column of other containers representing the text lines and colors any diffs appropriately.

I'm curious though, are there any mechanisms in place for a user to implement a Flutter widget in Flet that hasn't been created as a standard Control yet? I tried looking through the Control object to try and understand how it's interacting with Flutter but I got stumped pretty quickly.

[FeodorFitsner]

Yes, it's possible to implement a custom control for Flet. This sample PR could shed some light on the process: https://github.com/flet-dev/flet/pull/428/files