scroll in flet , navigationrail

Question

When I use NavigationRail, it is flet. I can not activate the scroll and i have this error: ERROR DISPLAYING NAVIGATIONRAIL control's height is unbounded. Either set "expand" property , set a fixed "height" or nest NavigationRail inside another control with fixed height

`
import time
import flet as ft


def main(page: ft.Page):
    # PAGE SETTING
    page.window_height = 800
    page.scroll = True
    page.window_width = 1200
    page.bgcolor = "#2D033B"
    page.appbar = ft.AppBar(
        leading=ft.IconButton(icon=ft.icons.MENU),
    bgcolor="#E5B8F4",
    color="#2D033B"
    )
    
    # APP CODE
    
    side_menu = ft.NavigationRail(
        selected_index=0,
        label_type=ft.NavigationRailLabelType.ALL,
        min_width=100,
        min_extended_width=100,
        leading=ft.FloatingActionButton(icon=ft.icons.CREATE, text="Add"),
        group_alignment=-0.9,
        destinations=[
            ft.NavigationRailDestination(
                icon_content=ft.Icon(ft.icons.PERSON_2_OUTLINED),
                selected_icon_content=ft.Icon(ft.icons.PERSON_2),
                label="Atila interchange",
            ),
        ],
        on_change=lambda e: print("Selected destination:", e.control.selected_index),
    )
    cl = ft.Column()
    for i in range(100):
        cl.controls.append(
            ft.ListTile(
                title=ft.Text(f"Atila{i}"),
                subtitle=ft.Text("Pasha")
            )
        )
    page.add(
        ft.Row([
            side_menu,
            ft.VerticalDivider(width=1),
                cl,
                
        ],expand=True),
    )

    


ft.app(main)
`

Answer 1

I'm no expert on flets myself, but I think that if you don't set scrolling in the page settings and allow scrolling in the column controls you will get the result you intend.

import flet as ft

def main(page: ft.Page):
    # PAGE SETTING
    page.window_height = 800
    page.window_width = 1200
    #page.scroll = True
    page.bgcolor = "#2D033B"
    page.appbar = ft.AppBar(
        leading=ft.IconButton(icon=ft.icons.MENU),
    bgcolor="#E5B8F4",
    color="#2D033B"
    )

    side_menu = ft.NavigationRail(
        selected_index=0,
        label_type=ft.NavigationRailLabelType.ALL,
        # extended=True,
        min_width=100,
        min_extended_width=400,
        leading=ft.FloatingActionButton(icon=ft.icons.CREATE, text="Add"),
        group_alignment=-0.9,
        destinations=[
            ft.NavigationRailDestination(
                icon_content=ft.Icon(ft.icons.PERSON_2_OUTLINED),
                selected_icon_content=ft.Icon(ft.icons.PERSON_2),
                label="Atila interchange",
            ),
        ],
        on_change=lambda e: print("Selected destination:", e.control.selected_index),
    )
    cl = ft.Column(scroll=True)
    for i in range(100):
        cl.controls.append(
            ft.ListTile(
                title=ft.Text(f"Atila{i}"),
                subtitle=ft.Text(f"Pasha{i}", color=ft.colors.YELLOW)
            )
        )

    page.add(
        ft.Row(
            [
                side_menu,
                ft.VerticalDivider(width=1),
                cl
            ],
            expand=True,
        )
    )

ft.app(target=main)