ScrollableControl
Bases: Control
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.
col: ResponsiveNumber = 12
If a parent of this control is a ResponsiveRow,
this property is used to determine
how many virtual columns of a screen this control will span.
Can be a number or a dictionary configured to have a different value for specific
breakpoints, for example col={"sm": 6}.
This control spans the 12 virtual columns by default.
Dimensions
| Breakpoint | Dimension |
|---|---|
| xs | <576px |
| sm | ≥576px |
| md | ≥768px |
| lg | ≥992px |
| xl | ≥1200px |
| xxl | ≥1400px |
disabled: bool = False
Every control has disabled property which is False by default - control and all
its children are enabled.
Note
The value of this property will be propagated down to all children controls recursively.
expand_loose: bool = False
Allows the control to expand along the main axis if space is available, but does not require it to fill all available space.
More information here.
on_scroll: EventHandler[OnScrollEvent] | None = None
Called when scroll position is changed by a user. class.
opacity: Number = 1.0
Defines the transparency of the control.
Value ranges from 0.0 (completely transparent) to 1.0 (completely opaque
without any transparency).
The page (of type Page or PageView) to which this control belongs to.
parent: BaseControl | None
The direct ancestor(parent) of this control.
It defaults to None and will only have a value when this control is mounted (added to the page tree).
The Page control (which is the root of the tree) is an exception - it always has parent=None.
scroll: ScrollMode | None = None
Enables a vertical scrolling for the Column to prevent its content overflow.
Defaults to ScrollMode.None.
tooltip: TooltipValue | None = None
The tooltip ot show when this control is hovered over.
visible: bool = True
Every control has visible property which is True by default - control is
rendered on the page. Setting visible to False completely prevents control (and
all its children if any) from rendering on a page canvas. Hidden controls cannot be
focused or selected with a keyboard or mouse and they do not emit any events.
scroll_to(
offset: Number | None = None,
delta: Number | 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:
offset could be a negative to scroll from the end of a scrollable. For
example, to scroll to the very end:
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:
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)))
def scroll_to_key(e):
cl.scroll_to(key="20", duration=1000)
page.add(
ft.Container(cl, border=ft.border.all(1)),
ft.ElevatedButton("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.
scroll_to_async(
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:
offset could be a negative to scroll from the end of a scrollable. For
example, to scroll to the very end:
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:
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)))
def scroll_to_key(e):
cl.scroll_to(key="20", duration=1000)
page.add(
ft.Container(cl, border=ft.border.all(1)),
ft.ElevatedButton("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.