Search code examples
pythonflet

Python Flet vertical alignment for column of controls


I'm trying to learn Flet (Python) by implementing a simple game with a rectangular field. A player makes a move by pressing buttons on his side. So, I want to place such buttons closer to his home (left-top corner for the first player and bottom-right corner for the second).

Very simplified code:

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Row([
            ft.Column(
                [ft.Container(ft.Text(f"{i}"), alignment=ft.alignment.center) for i in range(3)],
                alignment=ft.alignment.top_right),
            ft.Container(ft.Text("Game field"), width=300, height=300, bgcolor=ft.colors.TEAL,
                         alignment=ft.alignment.center),
            ft.Column([ft.Container(ft.Text(f"{i}")) for i in range(3)],
                      alignment=ft.alignment.bottom_left),
        ])
    )

ft.app(main, "Layout example")

The result is:

enter image description here

Expected layout:

enter image description here

Could someone help me to correct the layout? Thanks!


Solution

  •             import flet as ft
    
                def main(page: ft.Page):
                    page.add(
                        ft.Row([
                            ft.Column(
                                [ft.Container(ft.Text(f"{i}")) for i in range(3)], height=500, alignment=ft.MainAxisAlignment.START
                                ),
                            ft.Container(ft.Text("Game field"), width=500, height=500, bgcolor=ft.colors.TEAL,
                                        alignment=ft.alignment.center),
                            ft.Column([ft.Container(ft.Text(f"{i}")) for i in range(3)], height=500, alignment=ft.MainAxisAlignment.END
                                    )
                                    
                        ])
                        
                    )
    
                ft.app(main, "Layout example")
    

    Just adding a height property with alignment as MainAxisAlignment.START and MainAxisAlignment.START in to corresponding column of containers.

    The code you provide is not working because the column in which the container is placed doesn't have any space to move along providing height helps it to have enough space to move along