[Bug] - Text Does Not Take Up Available Space When Rotated

[nelson-python]

Question

If we have a list of items (using flet 0.28.3) and display text (without using text rotation):

...we notice that the text takes up all available space (which is expected).

However, if we rotate the text (to display in a column rather than a row - see code example):

Note: Notice how even though we've rotated the text:

content = ft.Text(
expand = True,
value = "Navigation 01",
bgcolor = "blue",
rotate = ft.Rotate(angle = math.radians(90)),
size = font_size,
color = "amber",
weight = ft.FontWeight.BOLD,
),

...that the text doesn't take up all the space of the column container. Instead, text only takes up the space in blue (which is not expected).

Question: Assuming this is fixed eventually, is there a workaround I could use (in the meantime)?

I've tried placing text into another column, with each letter as a separate cell in the column, but I can't get the letters to be spaced closer, instead resulting in something like the following:

Thank you,
Nelson

Code sample

menu_user = ft.Container(
	animate_offset = ft.Animation(speed),
	content = ft.Row(
		controls = [
			ft.Column(
				controls = [
					ft.Container(
						alignment = ft.alignment.center,
						bgcolor = "green",
						content = ft.Text(
							expand = True,
							value = "Navigation 01",
							bgcolor = "blue",
							rotate = ft.Rotate(angle = math.radians(90)),
							size = font_size,
							color = "amber",
							weight = ft.FontWeight.BOLD,
						),
						height = container_height * 2,
						width = container_width,
					),
					ft.Container(
						bgcolor = "green",
						content = ft.Icon(
							color = "amber",
							name = ft.Icons.ADMIN_PANEL_SETTINGS_OUTLINED,
							size = item_size,
						),
						height = container_height,
						width = container_width,
					),
				],
				spacing = 0,
			),
			ft.Column(
				controls = [
					ft.Container(
						alignment = ft.alignment.center,
						bgcolor = "green",
						content = ft.Text(
							expand = True,
							value = "Navigation 02",
							bgcolor = "blue",
							rotate = ft.Rotate(angle = math.radians(90)),
							size = font_size,
							color = "amber",
							weight = ft.FontWeight.BOLD,
						),
						height = container_height * 2,
						width = container_width,
					),
					ft.Container(
						bgcolor = "green",
						content = ft.Icon(
							color = "amber",
							name = ft.Icons.ADS_CLICK,
							size = item_size,
						),
						height = container_height,
						width = container_width,
					),
				],
				spacing = 0,
			),
			ft.Column(
				controls = [
					ft.Container(
						alignment = ft.alignment.center,
						bgcolor = "green",
						content = ft.Text(
							expand = True,
							value = "Navigation 03",
							bgcolor = "blue",
							rotate = ft.Rotate(angle = math.radians(90)),
							size = font_size,
							color = "amber",
							weight = ft.FontWeight.BOLD,
						),
						height = container_height * 2,
						width = container_width,
					),
					ft.Container(
						bgcolor = "green",
						content = ft.Icon(
							color = "amber",
							name = ft.Icons.AIRPLAY,
							size = item_size,
						),
						height = container_height,
						width = container_width,
					),
				],
				spacing = 0,
			),
		],
		spacing = 0,
		scroll = True,
	),
	height = height,
	left = left_coordinate,
	top = top_coordinate,
	width = width,
)

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[7576457]

It seems like your example is missing some code, could you please share the full code?

[nelson-python]

Hello @7576457,

To simplify things, allow me to use a basic example.

We notice with the following code:

import math

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Stack(
            controls = [
                ft.Container(
                    alignment = ft.alignment.bottom_center,
                    bgcolor = "red",
                    content = (
                        ft.Text(
                            "Flet is awesome!",
                            size = 18,
                            weight = ft.FontWeight.BOLD,
                        )
                    ),
                    height = 50,
                    left = 0,
                    top = 0,
                    width = 150,
                ),
            ],
            height = 200,
            width = 200,
        ),
    )

ft.app(main)

The following output:

Notice how the text "Flet is awesome!", fits in a Container that is 150x50 (WxH).

If we modify the code, and set the height = 150 and width = 50 (i.e., flipping the width/height):

import math

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Stack(
            controls = [
                ft.Container(
                    alignment = ft.alignment.bottom_center,
                    bgcolor = "red",
                    content = (
                        ft.Text(
                            "Flet is awesome!",
                            size = 18,
                            weight = ft.FontWeight.BOLD,
                        )
                    ),
                    height = 150,
                    left = 0,
                    top = 0,
                    width = 50,
                ),
            ],
            height = 200,
            width = 200,
        ),
    )

ft.app(main)

...we notice the following output:

This is expected.

However, if we rotate the text (as well as flip the width/height), we expect the text to fit in the Container:

import math

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Stack(
            controls = [
                ft.Container(
                    alignment = ft.alignment.bottom_center,
                    bgcolor = "red",
                    content = (
                        ft.Text(
                            "Flet is awesome!",
                            size = 18,
                            weight = ft.FontWeight.BOLD,
                            rotate = ft.Rotate(angle = math.radians(90)),
                        )
                    ),
                    height = 150,
                    left = 0,
                    top = 0,
                    width = 50,
                ),
            ],
            height = 200,
            width = 200,
        ),
    )

ft.app(main)

...yet notice the following output:

This is not expected, given that the text was rotated, it should fit in the Container.

Regards,
Nelson

[7576457]

Your question is related to how Flutter calculates layout and applies transforms.

At first glance, it feels logical to expect that when you rotate the text, it should fit into the container. However, there is an important nuance here: layout and transform are two separate stages.

Flutter first performs the layout phase, where widget sizes are calculated, and only after that applies the transform (such as rotation). Because of this, rotation does not affect how width and height are calculated.

In your example, the text is rotated by 90 degrees, but its width is still calculated in its original orientation and is constrained by the parent container. That’s why it gets clipped.

If you rotate the parent widget (the container that defines the boundaries), the same transformation will be applied to the child, and the layout will behave as expected. But if you rotate only the child while keeping the parent unchanged, you will get exactly the result you are seeing

[nelson-python]

Hello @7576457,

Understood.

Apologies for the invalid bug (as I didn't understand the nuance related to layouts and transforms being two separate stages).

Regards,
Nelson

[ndonkoHenri]

You might want to checkout this issue too: #1073