[Q] specify page.bgcolor for views from bottom navbar

[goyalyashpal]

Question

Title: specify page.bgcolor for each view from bottom NavigationBar ?

Go to "# HERE IS THE PROBLEM" part of this code
I want to move that assignment of color in the class definition of that page itself.

Also, ONLY_SHOW_SELECTED doesn't seem to be working

Code took from: https://github.com/codeWithOrange/fletfullcourse-2022/tree/master/22.bottomNavigationBar

Code sample

# Code modified from https://github.com/codeWithOrange/fletfullcourse-2022/tree/master/22.bottomNavigationBar

from flet import (
    Column,
    Container,
    Icon,
    NavigationBar,
    NavigationBarLabelBehavior,
    NavigationDestination,
    Page,
    Text,
    UserControl,
    colors,
    icons,
)


class HomePage(UserControl, page):
    def build(self, page):
        # NameError RAISED HERE
        page.bgcolor = colors.BLUE
        return Column(controls=[Text("home page")])


class AboutPage(UserControl):
    def build(self):
        return Column(
            controls=[
                Text("About page"),
                Icon(name=icons.PERSON, color=colors.GREEN, size=30),
            ]
        )


class PageNotFound(UserControl):
    def __init__(self, title: str):
        super().__init__()
        self.title = title

    def build(self):
        return Container(content=Text(self.title))


def main(page: Page):
    page.title = "bottom navigation bar tutorial"
    # page.padding=0
    # page.theme_mode='light'
    page.window_width, page.window_height = (45 * i for i in (9, 16))
    page.window_resizable = False

    page.navigation_bar = NavigationBar(
        # bgcolor=colors.ON_SECONDARY,
        # elevation=30,
        
        # HERE IS THE PROBLEM ANOTHER:
        # ONLY_SHOW_SELECTED doesn't seem to be working
        label_behavior=NavigationBarLabelBehavior.ONLY_SHOW_SELECTED,
        destinations=[
            NavigationDestination(
                label="Home",
                icon=icons.HOME_OUTLINED,
                selected_icon=icons.HOME_FILLED,
                # icon_content=Icon(name=icons.HOME, color=colors.GREEN),
                # selected_icon_content=Icon(name=icons.HOME_FILLED, color=colors.BLUE)
            ),
            NavigationDestination(
                label="About",
                icon=icons.PERSON_OUTLINE,
                selected_icon=icons.PERSON
                # icon_content=Icon(name=icons.HOME, color=colors.GREEN),
            ),
        ],
        # selected_index=1
        on_change=lambda e: set_page(e),
    )

    def set_page(e):
        page.clean()
        page_index = e.control.selected_index
        page_label = e.control.destinations[page_index].label

        # HERE IS THE PROBLEM
        # HACK: this should not done here.
        if page_label == "Home":
            # page.bgcolor = colors.BLUE
            page.add(HomePage(page))
        elif page_label == "About":
            page.bgcolor = colors.RED
            page.add(AboutPage())

    # page.bgcolor='blue'
    page.add(HomePage())

    page.update()


if __name__ == "__main__":
    flet.app(target=main, view=flet.FletApp)

Error message

class HomePage(UserControl, page):
                                ^^^^
NameError: name 'page' is not defined. Did you mean: 'range'?

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.