Vertical and horitzontal Scroll at the same time

[nastiliano]

Hello everybody:

I have this code in order to make my layout scrollable in vertical and horitzontal way, but it's impossible:

import flet as ft

def main(page: ft.Page):


    st = ft.Card(expand = True ,
                 content = ft.Container(expand = True ,
                                        content = ft.Row([ft.Column([ft.Image(src=f"https://picsum.photos/300/300") ,
                                                                     ft.TextField(label = "Hello World" , width = 400 ,)
                                                                     ] ,
                                                                    expand = True ,
                                                                    horizontal_alignment = "CENTER" ,
                                                                    scroll = "ALWAYS"
                                                                    )
                                                        ] ,
                                                        expand = True ,
                                                        vertical_alignment = "START" ,
                                                        #scroll = "ALWAYS"
                                                        )
                                       )
                )

    page.add(st)

ft.app(target=main)

When I uncomment the row's scrolls it doesn't work.

Some help please?
Thank you.

[ositoMalvado]

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Card(
            ft.Container(
                ft.Column(
                    horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                    controls=[ # here the important part - start
                        ft.Row(
                            [
                                ft.Container(
                                    ft.Column(
                                        [
                                            ft.Image(src=f"https://picsum.photos/500?random={_}", width=500, height=500, fit=ft.ImageFit.NONE)
                                            for _ in range(5)
                                        ],
                                        scroll="auto",
                                        expand=True
                                    ),
                                    width=500,
                                    height=500
                                )
                            ],
                            scroll="auto",
                            expand=True
                        ),
                        ft.TextField(label = "Hello World" , width = 400 ,)
                    ] # here the important part - end
                ),
                expand=True,
                bgcolor="background",
                alignment=ft.alignment.center
            ),
            expand=True
        )
    )

ft.app(target=main)

[nastiliano]

Thank you very very much!!!

I used your pattern to make a little bit modifications in order to achieve that I want:

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Card(
            ft.Container(
                ft.Column(
                    horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                    controls=[ # here the important part - start
                        ft.Row(
                            [
                                ft.Container(
                                    ft.Column(
                                        [
                                            ft.Image(src=f"https://picsum.photos/500?random", width=500, height=500, fit=ft.ImageFit.NONE) ,
                                            ft.TextField(label = "Hello World" , width = 400 ,)
                                        ],
                                        scroll="ALWAYS",
                                        expand=True
                                    )
                                ) ,

                                ft.VerticalDivider () ,

                                ft.Container(
                                    ft.Column(
                                        [
                                            ft.Image(src=f"https://picsum.photos/500?random", width=500, height=500, fit=ft.ImageFit.NONE) ,
                                            ft.TextField(label = "Hello World" , width = 400 ,)
                                        ],
                                        scroll="ALWAYS",
                                        expand=True
                                    )
                                )
                            ],
                            #alignment = ft.MainAxisAlignment.SPACE_BETWEEN ,
                            vertical_alignment = "START" ,
                            scroll="ALWAYS",
                            expand=True
                        )
                    ] # here the important part - end
                ),
                expand=True,
                alignment=ft.alignment.center
            ),
            expand=True
        )
    )

ft.app(target=main)

I want the screen divided in 2 simmetricals parts and the first part aligned on the LEFT. I tried a lot of options and I'm not able to do that.
I don't understand why the row alignment "ft.MainAxisAlignment.SPACE_BETWEEN" doesn't work when I uncomment...

Any idea??

Thank you very much

[nastiliano]

Finally!!!

That is that I wanted:

import flet as ft

def main(page: ft.Page):

    page.expand = True

    page.add(ft.Card(expand = True ,
                     content = ft.Container(ft.Row([ft.Container(alignment = ft.alignment.top_left ,
                                                                 expand = True ,
                                                                 content = ft.Row(scroll = "ALWAYS" ,
                                                                                  controls = [ft.Column(scroll = "ALWAYS" ,
                                                                                                        controls = [ft.Image(src=f"https://picsum.photos/500?random", 
width=500, height=500, fit=ft.ImageFit.NONE) ,
                                                                                                                    ft.TextField(label = "Hello World" , width = 400)
                                                                                                                   ]
                                                                                                       )
                                                                                      
                                                                                             ]
                                                                                 )
                                                                ) ,
                                                                     
                                                    ft.VerticalDivider() ,

                                                    ft.Container(alignment = ft.alignment.top_left ,
                                                                 expand = True ,
                                                                 content = ft.Row(scroll = "ALWAYS" ,
                                                                                  controls = [ft.Column(scroll = "ALWAYS" ,
                                                                                                        controls = [ft.Image(src=f"https://picsum.photos/500?random", 
width=500, height=500, fit=ft.ImageFit.NONE) ,
                                                                                                                    ft.TextField(label = "Hello World" , width = 400)
                                                                                                                   ]
                                                                                                       )                            
                                                                                             ]
                                                                                 )
                                                                )
                                                   ]
                                                  )
                                           )
                    )
            )

ft.app(target = main)

Thank you very much