Search code examples
pythonflet

Enabling Scroll on a Flet Column vertically centers its controls


Setting up a Flet column to be able to scroll, centers it's controls like how alignment=ft.MainAxisAlignment.CENTER centers controls in column.

Interestingly enough, this column centering behavior even overwrites my set property of alignment=ft.MainAxisAlignment.START

Here is the simplified code for a part of my app:

import flet as ft

def main(page: ft.Page):

    left_side = ft.Column(
            expand=2,
            scroll=ft.ScrollMode.ALWAYS,
            alignment=ft.MainAxisAlignment.START,
            controls=[
                ft.OutlinedButton(text="scroll=ScrollMode.ALWAYS")
            ]
        )
    right_side= ft.Column(
        expand=2,
        controls=[
            ft.OutlinedButton(text="Non scrollable")
        ]
    )

    main_container = ft.Container(
        height=900,
        content=ft.Row(
            spacing=0,
            controls=[
                left_side,
                ft.VerticalDivider(thickness=3, width=3),
                right_side
            ],
            expand=True
        )
    )

    page.add(main_container)

ft.app(target=main)

And here's a visual of what the code renders out

Basically I just want the left to look like the right while keeping the scroll property :]


Solution

  • I try your code and putting in ListView should work pretty fine

    main_container = ft.Container(
            height=900,
            content=ft.Row(
                spacing=0,
                controls=[
                    ft.ListView(controls=[left_side], expand=2), # change
                    ft.VerticalDivider(thickness=3, width=3),
                    right_side
                ],
                expand=True
            )
        )