[FIXED] Python Flet vertical alignment for column of controls

Issue

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:

Expected layout:

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

Answered By - Jassim Shaji