v1: `ft.Divider()` will disrupt the centering layout and cause it to align to the left.

[yst-one]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

，，，

Code sample

Code

import flet as ft

class NavgationItem(ft.IconButton):
    def __init__(self,icon : ft.Icon,tooltip:str,on_click=None):
        super().__init__()
        self.style = ft.ButtonStyle(
            shape=ft.RoundedRectangleBorder(radius=10),
            color={
                ft.ControlState.DEFAULT: ft.Colors.WHITE,
            },
            overlay_color=ft.Colors.WHITE24,
            bgcolor={ft.ControlState.SELECTED: ft.Colors.WHITE24,}
        )
        self.icon = icon
        self.tooltip = tooltip
        self.on_click = on_click
        self.on_focus = self.in_focus

    def in_focus(self,e:ft.ControlEventHandler[ft.IconButton]):
        print(e)

    def in_blur(self,e):
        print(e)


class NavgationBar(ft.Container):
    def __init__(self,):
        super().__init__()
        self.width = 62
        self.offset = (0, 0)
        self.bgcolor = ft.Colors.BLUE
        self.alignment = ft.Alignment.CENTER
        

        


        self.items = [ft.Container(
            padding=ft.padding.only(top=10,bottom=10),
            content=ft.Column(
                
                controls=[
                    ft.Text(value="  QQ" ,color="white",text_align=ft.TextAlign.END,),
                    ft.CircleAvatar(
                        width=38,height=38,
                        foreground_image_src=r"https://tse2.mm.bing.net/th/id/OIP.-huOPXYqnMn6inG_4N50hQAAAA?rs=1&pid=ImgDetMain&o=7&rm=3",)
                ],
                alignment=ft.MainAxisAlignment.CENTER,
                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                height=80,
                spacing=12,
                ),
            ),
            NavgationItem(ft.Icons.HOME, "Home" , on_click=self.icon_click,),
            NavgationItem(ft.Icons.SEARCH, "Search",on_click=self.icon_click),
            NavgationItem(ft.Icons.NOTIFICATIONS, "Notifications",on_click=self.icon_click),
            NavgationItem(ft.Icons.MESSAGE, "Messages",on_click=self.icon_click),
            NavgationItem(ft.Icons.BOOKMARK, "Bookmarks",on_click=self.icon_click),
            NavgationItem(ft.Icons.LIST, "Lists",on_click=self.icon_click),
            NavgationItem(ft.Icons.PERSON, "Profile",on_click=self.icon_click),
            NavgationItem(ft.Icons.MORE_HORIZ, "More",on_click=self.icon_click),
            ###Here, here#######################
            ft.Divider(),
            ###Here, here#######################
            ft.Container(
                padding=ft.padding.only(top=10,bottom=10),expand=True,
                content=ft.Column(
                        alignment=ft.MainAxisAlignment.END,
                        controls=[
                            NavgationItem(ft.Icons.MESSAGE, "New Post",on_click=self.icon_click),
                            
                            NavgationItem(ft.Icons.DIRECTIONS, "New Post",on_click=self.icon_click),
                            NavgationItem(ft.Icons.CREATE, "New ",on_click=self.icon_click),
                        ]
                      ),
             ) # push to bottom

        ]

    def icon_click(self,e :ft.TapEvent):
        for item in self.items:
            item.selected = False
        e.control.selected = True

        print(e.control.tooltip)
        
        
        self.update()

    def build(self):
        self.content = ft.WindowDragArea(ft.Column(
            alignment=ft.MainAxisAlignment.START,
            controls=self.items,
            spacing=8,
            
        ))


def main(page: ft.Page):
    page.window.title_bar_hidden = True
    page.padding = 0

    page.add(
        ft.Row(
            [
                NavgationBar()
            ],
            alignment=ft.MainAxisAlignment.START,
            expand=True,
        )
    )

ft.run(main)

To reproduce

Expected behavior

No response

Screenshots / Videos

Captures

[Upload media here]

Operating System

Windows

Operating system details

11

Flet version

v1

Regression

No, it isn't

Suggestions

No response

Logs

Logs

[Paste your logs here]

Additional details

No response

[Vulturu1]

`
def main(page: ft.Page):
page.window.title_bar_hidden = True
page.padding = 0

page.add(
    ft.Row(
        [
            NavgationBar()
        ],
        alignment=ft.MainAxisAlignment.START,
        expand=True,
    )
)

ft.run(main)
`

Your issue is here where you create the row. You have all your elements aligned properly inside the Navigation Bar however when you add the row to the page you set the alignment equal to ft.MainAxisAlignment.START. You should change this to ft.MainAxisAlignment.CENTER.

Here is the fixed code:

`
def main(page: ft.Page):
page.window.title_bar_hidden = True
page.padding = 0

page.add(
    ft.Row(
        [
            NavgationBar()
        ],
        alignment=ft.MainAxisAlignment.CENTER,
        expand=True,
    )
)

ft.run(main)
`

[yst-one]

` def main(page: ft.Page): page.window.title_bar_hidden = True page.padding = 0

page.add(
    ft.Row(
        [
            NavgationBar()
        ],
        alignment=ft.MainAxisAlignment.START,
        expand=True,
    )
)

ft.run(main) `

Your issue is here where you create the row. You have all your elements aligned properly inside the Navigation Bar however when you add the row to the page you set the alignment equal to ft.MainAxisAlignment.START. You should change this to ft.MainAxisAlignment.CENTER.

Here is the fixed code:

` def main(page: ft.Page): page.window.title_bar_hidden = True page.padding = 0

page.add(
    ft.Row(
        [
            NavgationBar()
        ],
        alignment=ft.MainAxisAlignment.CENTER,
        expand=True,
    )
)

ft.run(main) `

I've tried "center", but it still causes problems. You can take a look at my code.

[yst-one]