Python Flet vertical alignment for column of controls

Question

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!

score 1 · Accepted Answer · answered Aug 09 '23 at 13:24

            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

Thank you, Jassim . It works. There's one thing I'm not quite fond of here - we're setting the height three times (in the real application, it's dynamic). It's not complicated, but it violates the DRY principle. Is there a way to specify that the columns should stretch based on the size of the largest one? — Serge Sotnyk, Aug 10 '23 at 17:01
As of now I don't think so, FYI you are not actually providing height for the container, instead, it's for the column. and I think the default height is restricted and providing height according to the canvas helps you to move around. Try to play around with the values you'll see:) — Jassim Shaji, Aug 26 '23 at 07:37

score 0 · Answer 2 · answered Aug 09 '23 at 12:50

import flet as ft

def main(page: ft.Page):
    def items(count):
        items = []
        for i in range(3):
            items.append(
            ft.Container(
                content=ft.Text(value=str(i)),
                alignment=ft.alignment.center
            )
        )
    return items

    def midcolumn_with_alignment(align: ft.MainAxisAlignment):
        return ft.Column(
            [
                
                ft.Container(
                    content=ft.Column(canvas, alignment=align),

                ),
            ]
        )



    def column_with_alignment(align: ft.MainAxisAlignment):
    return ft.Column(
        [
           
            ft.Container(
                content=ft.Column(items(3), alignment=align),
                height=400,

            ),
        ]
    )
canvas = []
canvas.append(
    ft.Container(
    content=ft.Text("Game field"),alignment=ft.alignment.center, width=500, height=500,bgcolor=ft.colors.TEAL
    )
)

page.add(
    ft.Row(
        [
            column_with_alignment(ft.MainAxisAlignment.START),
            midcolumn_with_alignment(ft.MainAxisAlignment.CENTER),
            column_with_alignment(ft.MainAxisAlignment.END),
            
        ],
        spacing=30,
        alignment=ft.MainAxisAlignment.START,
    )
)

ft.app(target=main)

A simple change in your code can help. just adding a height property can solve your problem — Jassim Shaji, Aug 09 '23 at 13:20
Thank you, Jassim. Unfortunately, your code doesn't compile (indentation is lost and some constructions are in the wrong order). I managed to make the code work, but your second answer https://stackoverflow.com/a/76868231/4884761 seems more compact and uses the same idea. That's why I'll mark that solution as the correct one. — Serge Sotnyk, Aug 10 '23 at 17:09
yea sorry...Actually, I was just playing around with the new module and came across your question and found it interesting to find out I hope it was useful :') — Jassim Shaji, Aug 26 '23 at 07:53

Python Flet vertical alignment for column of controls

2 Answers2