flet-dev / flet

Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.
https://flet.dev
Apache License 2.0
11.18k stars 430 forks source link

Using border radius property disables offset outside of Container #2099

Open JorgeAlvarez21 opened 11 months ago

JorgeAlvarez21 commented 11 months ago

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

![CleanShot 2023-11-17 at 16 23 39@2x](https://github.com/flet-dev/flet/assets/73565218/897f273c-055a-4915-8cfc-f1b93cc6524c)

When enabling border radius:
![CleanShot 2023-11-17 at 16 23 03@2x](https://github.com/flet-dev/flet/assets/73565218/212b53bb-2488-4e55-9229-54152bff4e94)

**Flet version (`pip show flet`)**

0.12.1


**Operating system**:

MacOS Sonoma 14.1

JorgeAlvarez21 commented 11 months ago

CleanShot 2023-11-17 at 16 23 03@2x CleanShot 2023-11-17 at 16 23 39@2x (1)