Scrollbar
Configures the scrollbar that scrollable controls render for their content.
Properties
interactive- Whether this scroll bar should be interactive and respond to dragging on the thumb, or tapping in the track area.orientation- Specifies where the scrollbar should appear relative to the scrollable.radius- Circular radius of the scrollbar thumb's rounded rectangle corners in logical pixels.thickness- Controls the cross-axis size of the scrollbar in logical pixels.thumb_visibility- Whether this scrollbar's thumb should be always be visible, even when not being scrolled.track_visibility- Indicates whether the scrollbar track should be visible, so long as the thumb_visibility is visible.
Examples
Showcase
from typing import Optional
import flet as ft
def main(page: ft.Page):
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
page.appbar = ft.AppBar(title="Scrollbar Dataclass Showcase")
def get_scrollbar() -> ft.Scrollbar:
def str_as_bool(value: Optional[str]) -> Optional[bool]:
return True if value == "true" else False if value == "false" else None
return ft.Scrollbar(
thumb_visibility=str_as_bool(thumb_visibility.value),
track_visibility=str_as_bool(track_visibility.value),
interactive=str_as_bool(interactive.value),
thickness=thickness_value.value if use_thickness.value else None,
radius=radius_value.value if use_radius.value else None,
orientation=None
if orientation.value == "none"
else ft.ScrollbarOrientation(orientation.value),
)
def get_preview_content(scrollbar: ft.Scrollbar) -> tuple[str, ft.Control]:
selected_orientation = scrollbar.orientation
is_horizontal = selected_orientation in (
ft.ScrollbarOrientation.TOP,
ft.ScrollbarOrientation.BOTTOM,
)
if is_horizontal:
return (
"Horizontal preview (TOP/BOTTOM orientation)",
ft.Row(
spacing=8,
scroll=scrollbar,
controls=[
ft.Container(
width=110,
height=80,
border=ft.Border.all(1, ft.Colors.OUTLINE_VARIANT),
border_radius=8,
bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST,
alignment=ft.Alignment.CENTER,
content=ft.Text(f"Tile {i + 1}"),
)
for i in range(18)
],
),
)
return (
"Vertical preview (None/LEFT/RIGHT orientation)",
ft.Column(
spacing=4,
scroll=scrollbar,
controls=[ft.Text(f"Item {i + 1}") for i in range(40)],
),
)
def update_preview():
thickness_value.disabled = not use_thickness.value
radius_value.disabled = not use_radius.value
scrollbar = get_scrollbar()
title, content = get_preview_content(scrollbar)
preview_title.value = title
preview_viewport.content = content
page.update()
page.add(
ft.SafeArea(
content=ft.Column(
controls=[
ft.Text(
"Interactive playground for the Scrollbar dataclass. "
"Change each property and inspect the live result."
),
ft.Row(
wrap=True,
spacing=12,
run_spacing=12,
alignment=ft.MainAxisAlignment.CENTER,
controls=[
ft.Container(
width=360,
padding=12,
border=ft.Border.all(1, ft.Colors.OUTLINE_VARIANT),
border_radius=10,
bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
content=ft.Column(
spacing=10,
controls=[
ft.Text(
"Configuration", weight=ft.FontWeight.BOLD
),
thumb_visibility := ft.Dropdown(
label="thumb_visibility",
value="none",
on_select=update_preview,
options=[
ft.DropdownOption(
"none", "None (theme default)"
),
ft.DropdownOption("true", "True"),
ft.DropdownOption("false", "False"),
],
),
track_visibility := ft.Dropdown(
label="track_visibility",
value="none",
on_select=update_preview,
options=[
ft.DropdownOption(
"none", "None (theme default)"
),
ft.DropdownOption("true", "True"),
ft.DropdownOption("false", "False"),
],
),
interactive := ft.Dropdown(
label="interactive",
value="none",
on_select=update_preview,
options=[
ft.DropdownOption(
"none", "None (platform default)"
),
ft.DropdownOption("true", "True"),
ft.DropdownOption("false", "False"),
],
),
orientation := ft.Dropdown(
label="orientation",
value="none",
on_select=update_preview,
options=[
ft.DropdownOption(
"none", "None (auto side)"
)
]
+ [
ft.DropdownOption(o.value, o.name)
for o in ft.ScrollbarOrientation
],
),
use_thickness := ft.Checkbox(
label="Set thickness",
value=False,
on_change=update_preview,
),
thickness_value := ft.Slider(
min=0,
max=20,
divisions=20,
value=8,
label="{value}",
on_change=update_preview,
),
use_radius := ft.Checkbox(
label="Set radius",
value=False,
on_change=update_preview,
),
radius_value := ft.Slider(
min=0,
max=20,
divisions=20,
value=8,
label="{value}",
on_change=update_preview,
),
],
),
),
ft.Container(
width=420,
padding=12,
border=ft.Border.all(1, ft.Colors.OUTLINE_VARIANT),
border_radius=10,
bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
content=ft.Column(
spacing=10,
controls=[
ft.Text(
"Live preview", weight=ft.FontWeight.BOLD
),
preview_title := ft.Text(
weight=ft.FontWeight.BOLD
),
preview_viewport := ft.Container(
height=260,
border=ft.Border.all(1, ft.Colors.OUTLINE),
border_radius=8,
padding=8,
),
],
),
),
],
),
],
),
)
)
update_preview()
if __name__ == "__main__":
ft.run(main)
Properties
interactiveclass-attributeinstance-attribute
interactive: Optional[bool] = NoneWhether this scroll bar should be interactive and respond to dragging on the thumb, or tapping in the track area.
When False, the scrollbar will not respond to gesture or hover events, and will
allow to click through it.
If None, defaults to True, unless on Android, where it defaults to False.
orientationclass-attributeinstance-attribute
orientation: Optional[ScrollbarOrientation] = NoneSpecifies where the scrollbar should appear relative to the scrollable.
If None, for a vertical scroll, defaults to flet.ScrollbarOrientation.RIGHT
for left-to-right text direction and flet.ScrollbarOrientation.LEFT
for right-to-left text direction, while for a horizontal scroll, it defaults to
flet.ScrollbarOrientation.BOTTOM.
flet.ScrollbarOrientation.TOP and flet.ScrollbarOrientation.BOTTOM can only be used with a horizontal scroll; flet.ScrollbarOrientation.LEFT and flet.ScrollbarOrientation.RIGHT can only be used with a vertical scroll.
radiusclass-attributeinstance-attribute
radius: Optional[Number] = NoneCircular radius of the scrollbar thumb's rounded rectangle corners in logical
pixels. If None, platform defaults are used.
The radius of the scrollbar thumb's rounded rectangle corners.
If None, the default value is platform dependent:
no radius is applied on Android
(flet.Page.platform == flet.PagePlatform.ANDROID);
1.5 pixels on iOS (flet.Page.platform == flet.PagePlatform.IOS);
8.0 pixels on the remaining platforms.
thicknessclass-attributeinstance-attribute
thickness: Optional[Number] = NoneControls the cross-axis size of the scrollbar in logical pixels. The thickness of the scrollbar in the cross axis of the scrollable.
If None, the default value is platform dependent:
4.0 pixels on Android
(flet.Page.platform == flet.PagePlatform.ANDROID) and iOS
(flet.Page.platform == flet.PagePlatform.IOS);
flet.ScrollbarTheme.thickness on the remaining platforms.
thumb_visibilityclass-attributeinstance-attribute
thumb_visibility: Optional[bool] = NoneWhether this scrollbar's thumb should be always be visible, even when not being
scrolled. When False, the scrollbar will be shown during scrolling and
will fade out otherwise.
If None, then flet.ScrollbarTheme.thumb_visibility is used.
If that is also None, defaults to False.
track_visibilityclass-attributeinstance-attribute
track_visibility: Optional[bool] = NoneIndicates whether the scrollbar track should be visible, so long as the thumb_visibility is visible.
If None, then flet.ScrollbarTheme.track_visibility is used.
If that is also None, defaults to False.