NavigationRail is not shown if expand=True of parent is set in build method

[vodjan]

I hereby solemnly swear that I have read #287 and #303 and that what I am describing is, to my understanding, not covered by the solutions provided therein.

The following code results in an error, even though I am using a Row with expand=True to restrict the NavigationRail's height, as recommended in #303:

import flet as ft


class AppView(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.navigation_rail = ft.NavigationRail(
            destinations=[
                ft.NavigationRailDestination(
                    icon=ft.icons.START,
                    label="one destination"
                ),
                ft.NavigationRailDestination(
                    icon=ft.icons.STAR,
                    label="another destination"
                )
            ],
            on_change=lambda event: print("Selected destination:", event.control.selected_index),
        )

    def build(self):
        return ft.Row(
            controls=[
                self.navigation_rail
            ],
            expand=True
        )


def main(page: ft.Page):
    app_view = AppView()
    page.add(app_view)


ft.app(target=main)

However, when I change main to wrap the NavigationRail in a Row with expand=True, the code works: both

def main(page: ft.Page):
    app_view = AppView()
    page.add(ft.Row([app_view], expand=True))

and

def main(page: ft.Page):
    app_view = AppView()
    page.add(ft.Row([app_view.navigation_rail], expand=True))

work just fine. These also work if I replace expand=True with height=200 in main.

Using an explicit height restriction in the build method also works fine, i.e.

class AppView(ft.UserControl):

...

    def build(self):
        return ft.Row(
            controls=[
                self.navigation_rail
            ],
            height=200
        )


def main(page: ft.Page):
    app_view = AppView()
    page.add(app_view)


ft.app(target=main)

[FeodorFitsner]

Why not to inherit from Row directly, not from UserControl?

[vodjan]

Because I, uh, am new and I didn't think to do that haha. It is true that the following code works as expected:

import flet as ft


class AppView(ft.Row):
    def __init__(self):
        super().__init__()
        self.expand = True
        self.controls = [
            ft.NavigationRail(
                destinations=[
                    ft.NavigationRailDestination(
                        icon=ft.icons.START,
                        label="one destination"
                    ),
                    ft.NavigationRailDestination(
                        icon=ft.icons.STAR,
                        label="another destination"
                    )
                ],
                on_change=lambda event: print("Selected destination:", event.control.selected_index),
            )
        ]


def main(page: ft.Page):
    app_view = AppView()
    page.add(app_view)


ft.app(target=main)

Thanks for the tip and thank you for being patient with me.

[FeodorFitsner]

No worries! Introduction of UserControl was indeed misleading for the community. We are going to improve docs around custom controls authoring.

[vodjan]

Sounds great! If you find the time, would you mind pointing me towards somewhere where I can learn more about best practices regarding custom cotrols?