flet icon indicating copy to clipboard operation
flet copied to clipboard

Using border radius property disables offset outside of Container

Open JorgeAlvarez21 opened this issue 1 year ago • 1 comments

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 avatar Nov 17 '23 22:11 JorgeAlvarez21