[Question] Add border radius for scroll track in ScrollbarTheme

[sagittarius-H]

Question

Hello community,

Is it possible to somehow add border radius to scroll track?
Currently I have this code:

import flet

def main(page:flet.Page):
    page.title = "Scroll Column Test"
    column = flet.Container(
        content=flet.Column(
            width=200,
            height=200,
            scroll=flet.ScrollMode.ALWAYS,
            controls=[flet.Text(value=str(i)) for i in range(100)]
            ),
        theme=flet.Theme(
            scrollbar_theme=flet.ScrollbarTheme(
                track_color={
                    flet.MaterialState.DEFAULT: "#E3E7E8",
                },
                track_visibility=True,
                thumb_color={
                    flet.MaterialState.DEFAULT: "#616161",
                },
                radius=10,
                main_axis_margin=10
            )
        )
    )
    page.add(column)

if __name__ == "__main__":
    flet.app(target=main)

it gives me the following result:

but actually I want to archive something like this:

Code sample

No response

Error message

No response

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

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

[sagittarius-H]

P.S. I'm not an expert in Flutter and Dart, but it looks like Scrollbar in Flutter has this feature out of the box - https://api.flutter.dev/flutter/widgets/RawScrollbar/trackRadius.html okay, I was wrong, this mentioned in flet sources - https://api.flutter.dev/flutter/material/ScrollbarThemeData-class.html

[sagittarius-H]

I was able to implement track corner rounding for the scrollbar using a workaround with Stack widget.

import flet

def main(page: flet.Page):

    page.horizontal_alignment = flet.CrossAxisAlignment.CENTER
    page.vertical_alignment = flet.MainAxisAlignment.CENTER

    page.add(
        flet.Stack(
            controls=[
                flet.Container(
                    content=flet.CircleAvatar(bgcolor="#e3e7e8", radius=6.5),
                    alignment=flet.alignment.bottom_right,
                ),
                flet.Container(
                    content=flet.CircleAvatar(bgcolor="#e3e7e8", radius=6.5),
                    alignment=flet.alignment.top_right,
                ),
                flet.Container(
                    content=flet.Column(
                        width=200,
                        height=200,
                        scroll=flet.ScrollMode.ADAPTIVE,
                        controls=[flet.Text(value=str(i)) for i in range(100)]
                    ),
                    theme=flet.Theme(
                        scrollbar_theme=flet.ScrollbarTheme(
                            track_color={
                                flet.MaterialState.DEFAULT: "#E3E7E8",
                            },
                            track_visibility=True,
                            thumb_color={
                                flet.MaterialState.DEFAULT: "#616161",
                            },
                            thickness={
                                flet.MaterialState.HOVERED: 8,
                            },
                            radius=10,
                            main_axis_margin=5,
                        )
                    ),
                    top=5
                ),
            ],
            width=200,
            height=210,
        )
    )

flet.app(target=main)

Recording.2024-04-29.193408.mp4