flet
flet copied to clipboard
Using border radius property disables offset outside of Container
Description
When I use the border_radius property and set it to any value, it no longer allows for offset alignment to be outside of the container. Everything inside it becomes restricted to its parent. This does not happen when simply setting a border, only border radius will do this.
Code
import flet as ft
def main(page: ft.Page):
height, width = 850, 420
screen_height, screen_width = 822, 420
page.window_height = height
page.window_width = width
page.window_resizable = False
page.window_bar_hidden = True
page.window_frameless = True
page.padding = 0
page.title = "Application"
def menu_hover(e):
if e.control.content.bgcolor == ft.colors.WHITE:
e.control.content.bgcolor = ft.colors.GREY
else:
e.control.content.bgcolor = ft.colors.WHITE
component_menu.update()
e.control.content.update()
def menu_click(e):
index = e.control.data
if e.control.offset == None:
e.control.offset = ft.transform.Offset(0, -0.1)
component_menu.controls[0].content.controls[index].offset = ft.transform.Offset(0, -0.3)
else:
e.control.offset = None
component_menu.controls[0].content.controls[index].offset = ft.transform.Offset(0, 0)
component_menu.controls[0].content.update()
component_menu = ft.Stack(controls=[
ft.Container(
width=screen_width - 40,
height=65,
bgcolor=ft.colors.WHITE,
# border_radius=ft.border_radius.all(30), THIS IS THE LINE THAT CAUSES THE BUG.
content=ft.Row(
alignment=ft.MainAxisAlignment.CENTER,
controls=[
ft.Container(bgcolor=ft.colors.WHITE,
width=(screen_width - 110) / 5, height=65, border_radius=ft.border_radius.all(80),
content=ft.Container(
content=ft.IconButton(data=0, icon=ft.icons.HOME, icon_color=ft.colors.BLACK,
bgcolor=ft.colors.WHITE, on_click=menu_click))),
ft.Container(bgcolor=ft.colors.WHITE,
width=(screen_width - 110) / 5, height=65, border_radius=ft.border_radius.all(80),
content=ft.Container(
content=ft.IconButton(data=1, icon=ft.icons.STAR, icon_color=ft.colors.BLACK,
bgcolor=ft.colors.WHITE, on_click=menu_click))),
ft.Container(bgcolor=ft.colors.WHITE,
width=(screen_width - 110) / 5, height=65, border_radius=ft.border_radius.all(80),
content=ft.Container(
content=ft.IconButton(data=2, icon=ft.icons.LOCAL_DRINK, icon_color=ft.colors.BLACK,
bgcolor=ft.colors.WHITE, on_click=menu_click))),
ft.Container(bgcolor=ft.colors.WHITE,
width=(screen_width - 110) / 5, height=65, border_radius=ft.border_radius.all(80),
content=ft.Container(
content=ft.IconButton(data=3, icon=ft.icons.QR_CODE, icon_color=ft.colors.BLACK,
bgcolor=ft.colors.WHITE, on_click=menu_click))),
ft.Container(bgcolor=ft.colors.WHITE,
width=(screen_width - 110) / 5, height=65, border_radius=ft.border_radius.all(80),
content=ft.Container(
content=ft.IconButton(data=4, icon=ft.icons.FAVORITE, icon_color=ft.colors.BLACK,
bgcolor=ft.colors.WHITE, on_click=menu_click))),
])
)
])
page.add(
ft.Container(bgcolor=ft.colors.BLUE_GREY_700,
height=screen_height,
width=screen_width,
padding=ft.margin.only(bottom=15),
content=
ft.Column(controls=
[
component_menu
],
alignment=ft.MainAxisAlignment.END,
horizontal_alignment=ft.CrossAxisAlignment.CENTER
)
)
)
ft.app(target=main)
### Pictures

When enabling border radius:

**Flet version (`pip show flet`)**
0.12.1
**Operating system**:
MacOS Sonoma 14.1