flet.Row isn't scrolling to the end when flet.Text child gets updated content

[cheak1974]

Hi Everybody,

for one of my apps I need an online console like view. The Construction is very easy: One big flet.Text Control to take the content of the IOStream as console output and below one flet.TextInput with two buttons for sending commands to the interpreter. This all works great.

What does not work right now is, that when there is new content given to the self.console_text Control by the data aquisition thread then the flet.Text element is not scolling to the end. The Text control does not have a method or property to define such behaviour, but the parent layout element flet.Row does.

So from the docs I read, that the Row should scroll to the end when it comes to an update for one of its children if you define the auto_scroll=True. Unfortunately this is not going to happen. You have to scroll down manually which is very annoying for a console like app.

Furthermore I tried to use the scroll_to(offset=-1, duration=500) method of the Row along with auto_scroll=False each time the content of the Text control is updated. Unfortunately this isn't working either.

Any good ideas?

Here is the code:

class Viewmodel(flet.View):

    def __init__(self, page):
        super().__init__()          # Init Parent Object
        self.page = page            # Store reference to the page Object which is given as an arg
        self.build()                # Build up the UI
        self.page.update()          # Update the UI after built up
        self.active = True          # Flag for detecting if the page is still shown
        self.page.on_disconnect = self.set_state

        check_thread = threading.Thread(target=self.get_memory_logs, daemon=True)
        check_thread.start()


    def build(self):
        self.page.fonts = {"RobotoMono": "/fonts/RobotoMono-Regular.ttf"}

        self.contentbox = flet.Container(margin=20, padding=10, expand=True,
                                      alignment=flet.alignment.top_center,
                                      bgcolor=flet.colors.GREY,
                                      border=flet.border.all(1, flet.colors.BLACK),
                                      border_radius=10)

        self.controls.append(self.contentbox)
        self.column = flet.Column(expand=True)
        self.contentbox.content = self.column

        # Heading
        self.column.controls.append(flet.Row(controls=[flet.Text("Console and Live View Logging"),], height=40))

        # Logging Area
        # Um das Auffüllen möglich zu machen das oberste und unterste Row Element mit fester Höhe, das mittlere auf expand=True und das Child Text auch
        # Um das Scrolln zu ermöglichen die Row auf auto_scroll=True UND im Text das selectable auf True. Sonst geht es nicht.
        self.console_row = flet.Row(expand=True, auto_scroll=True)
        self.console_text = flet.Text("DUMMY TEXT - CONSOLE FILE CONTENT", font_family="RobotoMono", size=10, expand=True, selectable=True)          # Content of Log goes here
        self.console_row.controls.append(self.console_text)
        self.column.controls.append(self.console_row)

        # Command Area
        self.command_btn = flet.ElevatedButton("Send", bgcolor=flet.colors.WHITE, on_click=self.handle_clicks)
        self.clear_btn = flet.ElevatedButton("Clear", bgcolor=flet.colors.WHITE, on_click=self.handle_clicks)
        self.command_input = flet.TextField(label="Command Input", expand=True, height=40, bgcolor=flet.colors.WHITE,
                                            text_size=10, text_style=flet.TextStyle(font_family="RobotoMono"))
        self.column.controls.append((flet.Row(controls=[self.command_input, self.command_btn, self.clear_btn], height=60, spacing=3)))


    def handle_clicks(self, event):
        logger.info(f"CLICK on {event.control.text}")

        if event.control.text.lower() == 'clear':
            self.command_input.value = ""

        if event.control.text.lower() == 'send':
            response_json = m2p.interpreter(self.command_input.value)
            m2p.memory_log.write(f"\n\n{response_json}\n\n")                         # We can write directly into the memory stream without chaging the log file

        self.page.update()


    def set_state(self, event):
        self.active = False

    def get_memory_logs(self):
        while self.active == True:
            new_value = m2p.memory_log.getvalue()       # Get actual Value from memory StringIO stream
            self.console_text.value = new_value         # Update the Text Control

            try:
                pass
                #self.console_row.scroll_to(offset=-1, duration=500)
            except Exception as e:
                print(e)

            self.page.update()
            time.sleep(0.5)

Thanks in advance.

cheers

Chris

[ndonkoHenri]

So from the docs I read, that the Row should scroll to the end when it comes to an update for one of its children if you define the auto_scroll=True. Unfortunately this is not going to happen.

Use a Column instead (still with the auto_scroll=True).

[cheak1974]

Hi @ndonkoHenri ,

thank you very much for your hint.

I tried to exchange the Layout element flet.Row with flet.Column(expand=True, auto_scroll=False) as you suggested but unfortunately this isn't working either. Furthermore I tried to set the auto_scroll to False and call the scroll_to(offset=-1) method for the column too, but without any success.

Maybe the layout elements are not aware of the size of the Text control.

Are there any working examples with Text controls that autoscroll to the bottom after an update?

regards
Chris

[ndonkoHenri]

You might find this useful (made by a community member).

If this doesnt help, please build up a runnable code repro with the issue, so I can test locally.