[error] NotchShape Circular Breaks When page.scroll=True in BottomAppBar

[Ayberk-Irmak]

Question

I've encountered a visual bug in Flet's BottomAppBar implementation when combining these two properties:

Using shape=ft.NotchShape.CIRCULAR in BottomAppBar

Enabling page.scroll = True

Current Behavior:

The circular notch loses its transparency when scrolling is enabled

The notch area becomes filled with either black or white (depends on theme) instead of maintaining transparency

This breaks the intended Material Design aesthetic where the notch should show content behind it

Expected Behavior:

The circular notch should maintain its transparency regardless of scroll state

Content behind the BottomAppBar should remain visible through the notch area

Reproduction Steps:

Create a page with BottomAppBar containing a circular notch

bottom_appbar = ft.BottomAppBar(
shape=ft.NotchShape.CIRCULAR,
notch_margin=10,
content=ft.Row([...])
)
page.add(bottom_appbar)
Enable page scrolling

page.scroll = True
Observe the notch rendering incorrectly

Environment:

Flet version: 0.28.3, 0.28.2, 0.28.1, 0.27.6 (The problem persists across all versions.)

OS: windows 10

Code sample

No response

Error message

No response

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

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

[ndonkoHenri]

Will you mind filing a bug report here? Will be nice if you could attach an image/video showing the behaviours.