NavigationRail not displayed when returned by build method

[clstaudt]

As shown in the ToDoApp tutorial, I would like to create a class representing the main application (window). This application should have a side bar containing a NavigationRail. The problem: When the NavigationRail is returned by the build method of the App class (rather than added to the page directly), it is not displayed.

(In general it would be great to have a code example or template for how to implement such a common app window layout - sidebar and main window area changing depending on sidebar selection - with flet.)

import flet
from flet import (
    UserControl,
    Page,
    View,
    Text,
    Column,
    Row,
    KeyboardEvent,
    SnackBar,
    NavigationRail,
    NavigationRailDestination,
    VerticalDivider,
    Icon,
)
from flet import icons

from tuttle.controller import Controller

from views import (
    ContactView,
)

class App(UserControl):
    """Main application window."""

    def __init__(
        self,
    ):
        super().__init__()

    def build(self):
        return Row(
            [
                NavigationRail(
                    destinations=[
                        NavigationRailDestination(
                            icon=icons.AREA_CHART_OUTLINED,
                            selected_icon=icons.AREA_CHART,
                            label="Dashboard",
                        )
                    ],
                    extended=True,
                ),
                VerticalDivider(width=1),
            ]
        )


def main(page: Page):

    app = App()

    page.add(
        app,
    )

    page.update()


flet.app(
    target=main,
)

[clstaudt]

There is a more general issue here: How to debug flet applications. If there is some mistake in the layout, it seems like flet just gives up and displays nothing, also no error message. Is there a way to get debug information?

[FeodorFitsner]

That's, unfortunately, true - when you do something wrong in Flutter it gives up and in the most cases it looks like a grey area. In VS Code while debugging Flutter app there is a stack trace.

However, that's "fixable", by adding into Flet code more checks, assertions and using LayoutBuilder widget. It would be really helpful if, whenever you catch such a crash, you can submit an issue with repro code included, so we could fix it.

[clstaudt]

Happy to submit crash reports, but being new to flet and flutter, I am not sure what is considered a crash vs. a user error, and I would need examples for how to work with checks, assertions and the aforementioned LayoutBuilder to get started.

[FeodorFitsner]

That's my point - Flet should not crash because of user error, but to give a guidance how to remediate it. An example: #296

[FeodorFitsner]

This example could be helpful: https://github.com/flet-dev/examples/tree/main/python/community/responsive_menu_layout
Also, I'm working on Gallery app now which would be also a good starter kit for new projects.

[clstaudt]

Examples like this are very helpful. Beginners may be confused about how to define custom layouts and components. For example, if the component begins with a Row, should it inherit from UserControl and return a Row from the build method? Or should it inherit from Row?

[FeodorFitsner]

I agree we need more layout examples - that's the most challenging partl looks like.