Skip to content

ScrollableControl

Inherits: Control

Properties

  • auto_scroll(bool) –

    True if scrollbar should automatically move its position to the end when children

  • scroll(ScrollMode | None) –

    Enables a vertical scrolling for the Column to prevent its content overflow.

  • scroll_interval(Number) –

    Throttling in milliseconds for on_scroll event.

Events

Methods

  • scroll_to –

    Moves scroll position to either absolute offset, relative delta or jump to

Properties#

auto_scroll class-attribute instance-attribute #

auto_scroll: bool = False

True if scrollbar should automatically move its position to the end when children updated. Must be False for scroll_to() method to work.

scroll class-attribute instance-attribute #

scroll: ScrollMode | None = None

Enables a vertical scrolling for the Column to prevent its content overflow.

Defaults to ScrollMode.None.

scroll_interval class-attribute instance-attribute #

scroll_interval: Number = 10

Throttling in milliseconds for on_scroll event.

Events#

on_scroll class-attribute instance-attribute #

on_scroll: EventHandler[OnScrollEvent] | None = None

Called when scroll position is changed by a user. class.

Methods#

scroll_to async #

scroll_to(
    offset: float | None = None,
    delta: float | None = None,
    scroll_key: str
    | int
    | float
    | bool
    | ScrollKey
    | None = None,
    duration: DurationValue | None = None,
    curve: AnimationCurve | None = None,
)

Moves scroll position to either absolute offset, relative delta or jump to the control with specified key.

offset is an absolute value between minimum and maximum extents of a scrollable control, for example:

await products.scroll_to(offset=100, duration=1000)

offset could be a negative to scroll from the end of a scrollable. For example, to scroll to the very end:

await products.scroll_to(offset=-1, duration=1000)

delta allows moving scroll relatively to the current position. Use positive delta to scroll forward and negative delta to scroll backward. For example, to move scroll on 50 pixels forward:

await products.scroll_to(delta=50)

key allows moving scroll position to a control with specified key. Most of Flet controls have key property which is translated to Flutter as "global key". key must be unique for the entire page/view. For example:

import flet as ft


def main(page: ft.Page):
    cl = ft.Column(
        spacing=10,
        height=200,
        width=200,
        scroll=ft.ScrollMode.ALWAYS,
    )
    for i in range(0, 50):
        cl.controls.append(ft.Text(f"Text line {i}", key=str(i)))

    async def scroll_to_key(e):
        await cl.scroll_to(scroll_key="20", duration=1000)

    page.add(
        ft.Container(cl, border=ft.border.all(1)),
        ft.Button("Scroll to key '20'", on_click=scroll_to_key),
    )


ft.run(main)
Note

scroll_to() method won't work with ListView and GridView controls building their items dynamically.

duration is scrolling animation duration in milliseconds. Defaults to 0 - no animation.

curve configures animation curve. Property value is AnimationCurve enum.

Defaults to AnimationCurve.EASE.