How to center a column in flet framework python?

Question

I want to center this column in flet in python. I don't want to use page.vertical_alignment and page.horizontal_alignment. Here is the code

def main(page):
    page.title = 'Example'
    
    about_page = ft.Row([ft.Column([
        ft.Text(value='Written By:', size=40),
        ft.Text(value='sljdfklajl', size=20)
    ], alignment=ft.MainAxisAlignment.CENTER, horizontal_alignment=ft.CrossAxisAlignment.CENTER)],
                        alignment=ft.MainAxisAlignment.CENTER, vertical_alignment=ft.CrossAxisAlignment.CENTER)
    
    page.add(about_page)

ft.app(target=main)

Expectation: The about_page content should appear centered vertically and horizontally. It appears centerd horizontally, but does not center vertically.

Answer 1

The reason for that behaviour is that the centering happens within the row, and the row is not filling the entire page.

To let the row fill the entire page, you can use expand=True:

import flet as ft


def main(page):
    page.title = "Example"

    about_page = ft.Row(
        [
            ft.Column(
                [
                    ft.Text(value="Written By:", size=40),
                    ft.Text(value="sljdfklajl", size=20),
                ],
                alignment=ft.MainAxisAlignment.CENTER,
                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
            )
        ],
        expand=True,
        alignment=ft.MainAxisAlignment.CENTER,
        vertical_alignment=ft.CrossAxisAlignment.CENTER,
    )

    page.add(about_page)


ft.app(target=main)