Python Flet cannot align text to center

Question

Hello i am a beginner in Flet module my goal is center the text.

According to documentation there is a text_align property in text widget.

I tried to use it but not worked.

My code:

import flet as ft


def main(page: ft.Page):
    page.title = "Zirinus X Edition"
    page.scroll = "adaptive "
    title_text = ft.Text(
        value=f"Zirinus X",
        size=60,
        weight=ft.FontWeight.W_100,
        text_align="CENTER"
    )
    page.add(title_text)
    page.update()



ft.app(target=main)

UPDATE

I throught i found the solution but still not centering the text.

Code:

import flet as ft


def main(page: ft.Page):
    page.title = "Zirinus X Edition"
    page.scroll = "adaptive "
    title_text = ft.Text(
        text_align=ft.TextAlign.CENTER,
        value=f"Zirinus X",
        size=60,
        weight=ft.FontWeight.W_100,
    )
    page.add(title_text)
    page.update()



ft.app(target=main)

[Documentation](https://flet.dev/docs/controls/text/) for text widget — Heisenberg, Apr 08 '23 at 13:22

score 0 · Answer 1 · answered Apr 12 '23 at 22:54

Flet widgets size to their content, or to their parent if you make the widget expand=True. So to centre text in a Text widget you have to set its width to a specific value or place it in a control with a width that is either set or changes with screen width (like a ResponsiveRow)

score 0 · Answer 2 · edited May 12 '23 at 08:57

You have to add page.horizontal_alignment and page.vertical_alignment inside the main function. Here is the modified code.

import flet as ft

def main(page: ft.Page):

    # these two lines will align the text center in the app
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    # adding the text in the app
    page.add(
        ft.Text(
            value="Hello World!",       # Adding the text
            size=32,                    # Increasing the size of the text
            weight=ft.FontWeight.BOLD   # it will bold the text
        )
    )

ft.app(target=main)

Don’t add page.scroll and page.update() in every code. You need page.update() when you are changing anything while running the application. For example, changing the text by clicking a button. Otherwise, it has no use. And if you don’t want to scroll the app page, remove the page.scroll. Accoding to your code, it do nothing here.

score 0 · Answer 3 · answered May 20 '23 at 02:26

You can insert the Text widget inside a Row and center align.

The code would look like this:

import flet as ft

def main(page: ft.Page):
    page.title = "Zirinus X Edition"
    page.scroll = "adaptive "
    title_text = ft.Row(
        controls=[
            ft.Text(
                text_align=ft.TextAlign.CENTER,
                value=f"Zirinus X",
                size=60,
                weight=ft.FontWeight.W_100,
            )
        ],
        alignment=ft.MainAxisAlignment.CENTER
    )
    page.add(title_text)
    page.update()

ft.app(target=main)

score 0 · Answer 4 · answered Jul 30 '23 at 08:22

Just use 'page.horizontal_alignment' argument.

import flet as ft


def main(page: ft.Page):
    page.horizontal_alignment = 'CENTER'
    page.title = "Zirinus X Edition"
    page.scroll = "adaptive "
    title_text = ft.Text(
        value=f"Zirinus X",
        size=60,
        weight=ft.FontWeight.W_100,
        text_align="CENTER"
    )
    page.add(title_text)
    page.update()

ft.app(target=main)

Python Flet cannot align text to center

4 Answers4