Adding a row breaks all of my widget alignments

[drummerboy2543]

Question

Hello! I am trying to figure out a weird issue of aligning items in a custom widget.

I created a custom widget that displays some text.
The alignments of each row is suppose to be different (yes I know it looks funny this is just a demo app to illustrate my issue 😄 )

You can see with the picture attached below that the first widget is aligning the elements as expected.

I specifically care about the first Text Box being centered. Which is done correctly in the widget

---

However my questions is the alignment of my text on the widgets where there is two of them on a row.

As you can see in the picture the Hello, World! is not centered as expected. I am confused why simply adding a row to have two or more widgets on a given row will break all the formatting of the widget itself. I just want a simple centered text to explain what is the point of the widget. In my given application it is possible to have two or more of these widgets in a row explaining different information.

I feel like something is missing on my understanding on how rows deal with alignment because it seems like adding a row is actually breaking how alignments are handled inside the container/widget.

Let me know if you have any more questions and hopefully I can answer them!

Code sample

def another_layout_thing(page):
    page.theme_mode = ft.ThemeMode.LIGHT

    page.add(ft.Text("Widget is working as expected.",size=16))

    # This works great as expected.
    custom_widget = ft.Container(ft.Column([
        ft.Container(ft.Text("Hello, World!"), alignment=ft.alignment.center),
        ft.Row([ft.Text("Item 1"), ft.Text("Item 2"), ft.Text("Item 3")], alignment=ft.MainAxisAlignment.SPACE_AROUND),
        ft.Row([ft.Text("Item 1"), ft.Text("Item 2"), ft.Text("Item 3")], alignment=ft.MainAxisAlignment.END),
    ]), alignment=ft.alignment.center, border=ft.border.all(2, ft.colors.BLACK), border_radius=ft.border_radius.all(16), margin=ft.margin.all(10), bgcolor=ft.colors.PURPLE_100, padding=ft.padding.all(10))
    page.add(custom_widget)

    # Now I want two of these with the same allignment in the containers
    page.add(ft.Divider(thickness=2, color=ft.colors.BLACK))
    page.add(ft.Text("Same widget, Now I just want two of them in a row.", size=16))
    page.add(ft.Container(ft.Row([custom_widget, custom_widget], alignment=ft.MainAxisAlignment.SPACE_AROUND),bgcolor=ft.colors.BLUE_100))
    page.add(ft.Text("My expectation is that the alignment will stay the same, But you can see 'Hello, World!' is not centered.",size=16))


if __name__ == "__main__":
    ft.app(target=another_layout_thing)

Error message

No response

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

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

[heximing]

Adding a horizontal_alignment=ft.CrossAxisAlignment.CENTER for ft.Column fixed your problem.

The reason is your "Hello, World!" is in a ft.Column, so you need to tell ft.Column how the things inside it shall be aligned.

[drummerboy2543]

Hey @heximing thanks for the response. It did indeed work but it does not seem to solve my main problem unfortunately.

Let me reclarify the problem since I think I may have miscommunicated. I am not looking to simply center "Hello, World!". Ideally the the child class should specify how that is aligned like it does on the top widget (Both have a column class) . The only difference is now that I have two in a row. I just used centering "Hello World" as a example.

The custom widget I use the column for both the top section and bottom section, since they are the same widget. However the issue is does not present itself when I just add the custom widget itself. It only shows up when it is in a row. Which seems very odd. Why would adding a row as a parent widget make this parameter a necessary thing to include? What is the row doing to make this needed.

When I add horizontal_alignment=ft.CrossAxisAlignment.CENTER for ft.Column it does center the "Hello, World!" but if I switch the hello world container to right aligned it would not work. I know I can simply do horizontal_alignment=ft.CrossAxisAlignment.END but my point is I want the child class to be able to derive the alignment. Like it does on the top widget. Here is a picture of that below.

It seems weird how adding a row as a parent widget now requires this control.

With the updated code of:

    page.theme_mode = ft.ThemeMode.LIGHT
    # This works great as expected.
    page.add(ft.Text("Widget is working as expected.",size=16))
    custom_widget = ft.Container(ft.Column([
        ft.Container(ft.Text("Hello, World!"), alignment=ft.alignment.center_right),
        ft.Row([ft.Text("Item 1"), ft.Text("Item 2"), ft.Text("really super duper long item 3")], alignment=ft.MainAxisAlignment.SPACE_AROUND),
        ft.Row([ft.Text("Item 1"), ft.Text("Item 2"), ft.Text("really super duper long item 3")], alignment=ft.MainAxisAlignment.END),
    ], horizontal_alignment=ft.CrossAxisAlignment.CENTER), alignment=ft.alignment.center, border=ft.border.all(2, ft.colors.BLACK), border_radius=ft.border_radius.all(16), margin=ft.margin.all(10), bgcolor=ft.colors.PURPLE_100, padding=ft.padding.all(10))
    page.add(custom_widget)
    # Now I want two of these with the same allignment in the containers
    page.add(ft.Divider(thickness=2, color=ft.colors.BLACK))
    page.add(ft.Text("Same widget, Now I just want two of them in a row.", size=16))
    page.add(ft.Container(ft.Row([custom_widget, custom_widget], alignment=ft.MainAxisAlignment.SPACE_AROUND),bgcolor=ft.colors.BLUE_100))
    page.add(ft.Text("My expectation is that the alignment will stay the same, But you can see 'Hello, World!' is not to the right.",size=16))

if __name__ == "__main__":
    ft.app(target=another_layout_thing, assets_dir="assets")

Thanks again for your thoughts and solution!

[heximing]

Here is how I understand Flet works:

1. ft.Container by default is a zero padding wrap unless you specify the height and width. Putting alignment for ft.Container does nothing except it has space/padding or got expanded (by its parent container, to fit the window).
2. ft.MainAxisAlignment and ft.CrossAxisAlignment dictate how the children are aligned; ft.alignment only dictate the alignment when the container has space/padding for alignment.

See the modified code below with my explanation:

import flet as ft

def another_layout_thing(page):
    page.theme_mode = ft.ThemeMode.LIGHT
    page.add(ft.Text("Widget is working as expected.", size=16))
    # This works great as expected.
    custom_widget = ft.Container(
        ft.Column([
            ft.Container(ft.Text("Hello, World!"), alignment=ft.alignment.center_right),  # changed to center_right per your request; when only 1 Container, the Container expands to fit the window, so the Text aligned to the right.
            ft.Row([ft.Text("Item 1"), ft.Text("Item 2"), ft.Text("Item 3")], alignment=ft.MainAxisAlignment.SPACE_AROUND),
            ft.Row([ft.Text("Item 1"), ft.Text("Item 2"), ft.Text("Item 3")], alignment=ft.MainAxisAlignment.END),
        ], horizontal_alignment=ft.CrossAxisAlignment.CENTER,  # Added this, which dictates the children to be centered.
            # Note: the Container is centered in ft.Column; the "Hello, World!" is aligned to the right inside the Container because the Container is window wide.
        ), alignment=ft.alignment.center, border=ft.border.all(2, ft.colors.BLACK), border_radius=ft.border_radius.all(16), margin=ft.margin.all(10), bgcolor=ft.colors.PURPLE_100, padding=ft.padding.all(10))
    page.add(custom_widget)
    # Now I want two of these with the same alignment in the containers
    page.add(ft.Divider(thickness=2, color=ft.colors.BLACK))
    page.add(ft.Text("Same widget, Now I just want two of them in a row.", size=16))
    page.add(ft.Container(  # <- this Container is window wide.
        ft.Row([  # this Row is window wide.
            custom_widget,  # Note 1: custom_widget is not window wide anymore; everything in custom_widget shrinks to the minimum size with no margin/padding/space.
            custom_widget,  # Note 2: the above "horizontal_alignment=ft.CrossAxisAlignment.CENTER" dictates everything inside it to be centered.
            # If you want only "Hello, World!" to align to the right, you either need to specify the Container's size or use ft.Row/Column instead of ft.Container to wrap the ft.Text
        ], alignment=ft.MainAxisAlignment.SPACE_AROUND,
        ), bgcolor=ft.colors.BLUE_100))
    page.add(ft.Text("My expectation is that the alignment will stay the same, But you can see 'Hello, World!' is not centered.",size=16))

if __name__ == "__main__":
    ft.app(target=another_layout_thing)

Hope this helps.

[drummerboy2543]

Oh wow @heximing! I appreciate the response and code explanation.

It is making a bit more sense (or I can buy what is going on based on the logic) So it looks like the row is exposed to the window sizing when I have multiple columns, the row will become window wide, but the containers in it does not. Compared to the first widget.

The thing that I am missing is that with another row (the outside/window row on widget 2) you basically loose all alignment of rows within the container. I understand that the container is not window width so it is trying to minimize its size as based on the content inside the container as well that there is no explicit width and height . But it looks like the Hello , World or the rows below (Item 1, Item 2) do not align at all when is behind the outer row on widget 2, even if there is space to align like the update photo sent below.

So the alignments fail for both the rows and container inside the widget, where it looks like the column dictates all of the alignment (like the update you provided). But I would prefer that job go to the lower level controls, in this case the alignment is assigned in the rows of the containers like shown in widget one.

You can see in the photo that adding a big string at the bottom provides enough space in the container for the rows to align with. However they do not align in the same way as widget one. (Hello, World!)= Right) (Row 1 = space around), (Row 2 = End).

It feels a bit unintuitive that I need to dictate a width/ height explicitly on the container or select expanded in the given container. I would want the alignment to just align with what parent widget width and height is based on the content inside the top container/widget. Since I would like all the containers to not have explicit width and length and just let the internal objects in the container dictate that for me. That way everything has the correct padding and spacing.

Maybe this is just a flutter paradigm I need to read a bit more but

Hopefully I am able to communicate what I am trying to accomplish here.

I appreciate you helping me and walking through what you observed with flet.

Here is the code for context

import flet as ft

def another_layout_thing(page):
    page.theme_mode = ft.ThemeMode.LIGHT
    page.add(ft.Text("Widget is working as expected.", size=16))
    # This works great as expected.
    custom_widget = ft.Container(
        ft.Column([
            ft.Container(ft.Text("Hello, World!"), alignment=ft.alignment.center_right),  
            ft.Row([ft.Text("Item 1"), ft.Text("Item 2"), ft.Text("Item 3")], alignment=ft.MainAxisAlignment.SPACE_AROUND),
            ft.Row([ft.Text("Item 1"), ft.Text("Item 2"), ft.Text("Item 3")], alignment=ft.MainAxisAlignment.END),
            ft.Row([ft.Text("supercalifragilisticexpialidocious!! supercalifragilisticexpialidocious!!!")])
        ], horizontal_alignment=ft.CrossAxisAlignment.CENTER, 

        ), alignment=ft.alignment.center, border=ft.border.all(2, ft.colors.BLACK), border_radius=ft.border_radius.all(16), margin=ft.margin.all(10), bgcolor=ft.colors.PURPLE_100, padding=ft.padding.all(10))
    page.add(custom_widget)
    # Now I want two of these with the same alignment in the containers
    page.add(ft.Divider(thickness=2, color=ft.colors.BLACK))
    page.add(ft.Text("Same widget, Now I just want two of them in a row.", size=16))
    page.add(ft.Container(  
        ft.Row([ 
            custom_widget,  
            custom_widget,  

        ], alignment=ft.MainAxisAlignment.SPACE_AROUND,
        ), bgcolor=ft.colors.BLUE_100))
    page.add(ft.Text("My expectation is that the alignments for the rows (Item 1, Item 2) will stay the same, But you can see They are centered do to the  ft.CrossAxisAlignment.CENTER",size=16))

if __name__ == "__main__":
    ft.app(target=another_layout_thing, assets_dir="assets")