I would like to generate the following layout:

1. Two columns, each one taking the full height of the page.
2. Column 1 contains items as Row objects.
3. Column 2 also contains items as Row objects, but each Row contains multiple Container objects, and each Row should have an independent scroll bar.

I managed to generate a basic layout that resembles what I want, but:

1. Column 1 does not take the full height.
2. In Column 2, there is a single scroll bar for all Row objects.

Below is the code to reproduce my current layout:

def main2(page: ft.Page):

    searchArea = ft.Row(scroll="always")

    def buildContainer(text):
        return ft.Container(
                content=ft.Text(value=text),
                alignment=ft.alignment.center,
                width=page.width * 0.4,
                bgcolor=ft.colors.BLUE,
                border_radius=ft.border_radius.all(5))

    searchColumn = ft.Column(
            [
                buildContainer("Column 1 item 1"),
                buildContainer("Column 1 item 2"),
            ]
        )

    searchArea.controls.append(searchColumn)  # searchArea.controls[0]

    searchArea.controls.append(
        ft.Column(
            [
                ft.Row([buildContainer("Column 2 Row 1 item 1"), buildContainer("Column 2 Row 1 item 2")]),  # First feed area
                ft.Row([buildContainer("Column 2 Row 2 item 1"), buildContainer("Column 2 Row 2 item 2")]),
            ]
        )
    )
    page.add(searchArea) 

ft.app(main2)

I would like to generate the following layout:

1. Two columns, each one taking the full height of the page.
2. Column 1 contains items as Row objects.
3. Column 2 also contains items as Row objects, but each Row contains multiple Container objects, and each Row should have an independent scroll bar.

I managed to generate a basic layout that resembles what I want, but:

1. Column 1 does not take the full height.
2. In Column 2, there is a single scroll bar for all Row objects.

Below is the code to reproduce my current layout:

def main2(page: ft.Page):

    searchArea = ft.Row(scroll="always")

    def buildContainer(text):
        return ft.Container(
                content=ft.Text(value=text),
                alignment=ft.alignment.center,
                width=page.width * 0.4,
                bgcolor=ft.colors.BLUE,
                border_radius=ft.border_radius.all(5))

    searchColumn = ft.Column(
            [
                buildContainer("Column 1 item 1"),
                buildContainer("Column 1 item 2"),
            ]
        )

    searchArea.controls.append(searchColumn)  # searchArea.controls[0]

    searchArea.controls.append(
        ft.Column(
            [
                ft.Row([buildContainer("Column 2 Row 1 item 1"), buildContainer("Column 2 Row 1 item 2")]),  # First feed area
                ft.Row([buildContainer("Column 2 Row 2 item 1"), buildContainer("Column 2 Row 2 item 2")]),
            ]
        )
    )
    page.add(searchArea) 

ft.app(main2)

• python
• flet

Share Improve this question Follow edited Nov 25, 2024 at 7:45 mkrieger1 23.3k77 gold badges6464 silver badges8181 bronze badges asked Nov 20, 2024 at 11:23 SosaSosa 1411010 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

edit 1. I miss understood you at first time, this codde should be that you want.

If you want to give some feature like scroll to some control you need to add it to direct to it. Also expand attribute is that what you want to use to fit free space.

I delete attribute scroll from main row and it directly to column that you want have scroll and add expand attribute to main row to fit whole page, same in second column to fit witdh of not used page.

import flet as ft

def main2(page: ft.Page):

    searchArea = ft.Row(expand=1,
            vertical_alignment=ft.CrossAxisAlignment.START)

    def buildContainer(text):
        return ft.Container(
                content=ft.Text(value=text),
                alignment=ft.alignment.center,
                width=page.width * 0.4,
                bgcolor=ft.colors.BLUE,
                border_radius=ft.border_radius.all(5))

    searchColumn = ft.Column(
            [
                buildContainer("Column 1 item 1"),
                buildContainer("Column 1 item 2"),
            ],
        alignment=ft.MainAxisAlignment.START
        )

    searchArea.controls.append(searchColumn)  # searchArea.controls[0]

    searchArea.controls.append(
        ft.Column(
            [
                ft.Row([buildContainer("Column 2 Row 1 item 1"), buildContainer("Column 2 Row 1 item 2")],
                            scroll=ft.ScrollMode.ALWAYS,
                            expand=1
                            ),  # First feed area
                ft.Row([buildContainer("Column 2 Row 2 item 1"), buildContainer("Column 2 Row 2 item 2")],
                       expand=1,
                       scroll=ft.ScrollMode.ALWAYS),
                ],
            expand=1,
            scroll=ft.ScrollMode.ALWAYS,
            alignment=ft.MainAxisAlignment.START
        )
    )
    page.add(searchArea)

ft.app(main2)

After edit 1: