flet icon indicating copy to clipboard operation
flet copied to clipboard

bug: Container rotation and layout

Open Coimbra1984 opened this issue 1 month ago • 0 comments

Duplicate Check

  • [x] I have searched the opened issues and there are no duplicates

Describe the bug

When I rotate a Container, my layout becomes inconsistent. The left and right Column overlap with the middle container, the vertical spacing between the containers is too big and the content of the image is out of the screen:

Image

You can reproduce it with the attached asset and code:

Image

Code sample

Code
import flet as ft
import math

CARD_WIDTH = int(1024 / 10)
CARD_HEIGHT = int(1536 / 10)

class Card(ft.Container):
    def __init__(self, label, rotation_deg=0, on_click=None):
        super().__init__()
        self.width = CARD_WIDTH
        self.height = CARD_HEIGHT
        self.bgcolor = ft.Colors.AMBER
        self.border_radius = ft.border_radius.all(5)
        self.ink = True
        self.on_click = on_click        
        angle_rad = rotation_deg * math.pi / 180
        self.image = ft.DecorationImage(src=r"Eichel_Ober.png")
        self.rotate = ft.Rotate(angle=angle_rad, alignment=ft.alignment.center)

def main(page: ft.Page):
    def cards(count, rotation_deg=0, on_click=None):
        items = []
        for i in range(1, count + 1):
            card = Card(str(i), rotation_deg=rotation_deg, on_click=on_click)
            items.append(card)
        return items

    left = ft.Column(spacing=1, controls=cards(8, rotation_deg=90), alignment=ft.MainAxisAlignment.CENTER)
    right = ft.Column(spacing=1, controls=cards(8, rotation_deg=270), alignment=ft.MainAxisAlignment.CENTER)
    top = ft.Row(cards(8, rotation_deg=180), alignment=ft.MainAxisAlignment.CENTER)
    
    
    cardDeck = ft.Container(bgcolor=ft.Colors.AMBER_200, width=200, height=200)
    leftPlayed = cards(8, rotation_deg=90)[0]
    rightPlayed = cards(8, rotation_deg=270)[0]
    topPlayed = cards(8, rotation_deg=180)[0]
    bottomPlayed = cards(8)[0]
    midDeck = ft.Column([topPlayed, bottomPlayed], spacing=1)
    cardDeck = ft.Row([leftPlayed, midDeck, rightPlayed], alignment=ft.MainAxisAlignment.CENTER)
    
    
    bottom = ft.Row(cards(8, on_click=lambda e: print("Clickable with Ink clicked!"), rotation_deg=0,), alignment=ft.MainAxisAlignment.CENTER)
    
    mid = ft.Container(expand=True, bgcolor=ft.Colors.AMBER_100, 
                       content=ft.Column([top, cardDeck, bottom], alignment=ft.MainAxisAlignment.SPACE_BETWEEN, 
                                                                  horizontal_alignment=ft.CrossAxisAlignment.CENTER),)
    
    row = ft.Row([left, mid, right], expand=True, vertical_alignment=ft.CrossAxisAlignment.STRETCH)
    page.add(row)


ft.app(main, assets_dir="assets")

To reproduce

Run the code above

Expected behavior

No response

Screenshots / Videos

Captures

[Upload media here]

Operating System

Windows

Operating system details

Windows 11

Flet version

0.28.3

Regression

I'm not sure / I don't know

Suggestions

No response

Logs

Logs
[Paste your logs here]

Additional details

No response

Coimbra1984 avatar Dec 07 '25 12:12 Coimbra1984