[Question] when trying to use scroll_to method for row it didn't work

[plugeit]

Question

i tried using scroll_to method for row but it didn't work

Code sample

import flet as ft

async def main(page: ft.Page):
    def scroll_auto(i):
        controllers.scroll_to(offset=100,duration=1000)
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    #---------------------------------------------navigation bar(footer)------------------------------------------------------------ 
    
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationDestination(
                icon=ft.icons.HOME_OUTLINED,
                selected_icon=ft.icons.HOME_ROUNDED,
                label="Home"
                ),
            ft.NavigationDestination(icon=ft.icons.COMMUTE, label="Commute"),
            ft.NavigationDestination(
                icon=ft.icons.ACCOUNT_CIRCLE_OUTLINED,
                selected_icon=ft.icons.ACCOUNT_CIRCLE_ROUNDED,
                label="Account",
            ),
        ]
    )

    #---------------------------------------------------------end----------------------------------------------------------------------

    #---------------------------------------------Plug and Play Logo(header)------------------------------------------------------------ 

    #---------------------------------------------------------end----------------------------------------------------------------------

    #---------------------------------------------body------------------------------------------------------------ 


    controllers=ft.Row(controls=[ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=scroll_auto),
                                     ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                     ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                     ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                     ], scroll="auto")
    hot_deals_label=ft.Text(value="Hot Deals", size=20, color="#062A70", weight=ft.FontWeight.BOLD,)
    body=ft.Column(controls=[ft.Text(),
                    ft.Row(controls=[hot_deals_label], alignment="center"),
                    controllers,

                    ], width=400,spacing=50)
    await page.add_async(body)
    #----------------------------------------------end---------------------------------------------------------------------------------

ft.app(target=main, view=ft.WEB_BROWSER)

Error message

AttributeError: 'Row' object has no attribute 'scroll_to'

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[FeodorFitsner]

Row.scroll_to() is implemented in recent Flet versions.

[plugeit]

but when doing it with async app it simply says not implemented raises a not implemented error

[plugeit]

// async app scroll_to works

import flet as ft
import time
async def main(page: ft.Page):
async def keep_scrolling():
time.sleep(1)
controllers_hot_deals.scroll_to(delta=40, duration=3000)
page.update()
def on_keyboard(e: ft.KeyboardEvent):
if e.key == "Arrow Up":
controllers_hot_deals.scroll_to(delta=-40, duration=3000)
r.scroll_to(delta=-40, duration=3000)
elif e.key == "Arrow Down":
controllers_hot_deals.scroll_to(delta=40, duration=3000)
r.scroll_to(delta=40, duration=3000)
else:
pass

# gv = ft.GridView(expand=True, max_extent=150, child_aspect_ratio=1)
r = ft.Row(scroll="always")
controllers_hot_deals=ft.Row(controls=[ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world"))
                                 ], scroll="always")
await page.add_async(controllers_hot_deals, r)

for i in range(100):
    r.controls.append(
        ft.Container(
            ft.Text(f"Item {i}"),
            width=150,
            height=150,
            alignment=ft.alignment.center,
            bgcolor=ft.colors.AMBER_100,
            border=ft.border.all(1, ft.colors.AMBER_400),
            border_radius=ft.border_radius.all(5),
        )
    )
    

await page.update_async()
await keep_scrolling()

ft.app(target=main)

[plugeit]

// just making it a non async app it starts to work

import flet as ft
import threading
def main(page: ft.Page):
def keep_scrolling():
controllers_hot_deals.controls.pop(0)
controllers_hot_deals.scroll_to(delta=40, duration=500)
controllers_hot_deals.controls.append(ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),)
page.update()
def on_keyboard(e: ft.KeyboardEvent):
if e.key == "Arrow Up":
controllers_hot_deals.scroll_to(delta=-40, duration=3000)
r.scroll_to(delta=-40, duration=3000)
elif e.key == "Arrow Down":
controllers_hot_deals.scroll_to(delta=40, duration=3000)
r.scroll_to(delta=40, duration=3000)
else:
pass

# gv = ft.GridView(expand=True, max_extent=150, child_aspect_ratio=1)
r = ft.Row(scroll="always")
controllers_hot_deals=ft.Row(controls=[ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world")),
                                 ft.Container(width=120, height=120, border_radius=15, bgcolor=ft.colors.GREEN_200, ink=True, on_click=lambda e:print("hello world"))
                                 ], scroll="hidden")
page.on_keyboard_event=on_keyboard
page.add(controllers_hot_deals, r)

for i in range(100):
    r.controls.append(
        ft.Container(
            ft.Text(f"Item {i}"),
            width=150,
            height=150,
            alignment=ft.alignment.center,
            bgcolor=ft.colors.AMBER_100,
            border=ft.border.all(1, ft.colors.AMBER_400),
            border_radius=ft.border_radius.all(5),
        )
    )
    

page.update()
threading.Thread(target=keep_scrolling()).start()

ft.app(target=main)