Seeking Feedback on Implementation of Custom Navigation Bar using "flet" Module

[Lucifer516-sudo]

Question

Hello everyone,

I hope you're all doing well. I'm relatively new to programming and have been exploring the "flet" module, which is a GUI framework for Python based on the Flutter framework. I've been working on creating a custom navigation bar using this module and wanted to get some feedback on my implementation.

I've created a class called NavBar that inherits from the ft.NavigationBar class in the "flet" module. The purpose of this class is to manage navigation destinations and corresponding views for the navigation bar. When the user navigates, the visibility of views is adjusted using the on_changing_navigation_page method.

Here's a snippet of the code I've written:

Code sample

from typing import Any, List
import flet as ft
from flet_core.control import OptionalNumber
from flet_core.navigation_bar import (
    NavigationBarLabelBehavior,
    NavigationDestination,
)
from flet_core.ref import Ref
from flet_core.types import (
    AnimationValue,
    OffsetValue,
    ResponsiveNumber,
    RotateValue,
    ScaleValue,
)
from inextracker.ui.widgets.colors import dark_theme, light_theme


class NavBar(ft.NavigationBar):
    def __init__(
        self,
        navigation_destinations: List[ft.NavigationDestination],
        navigation_views: List[ft.Control],
        pg: ft.Page,
        ref: Ref | None = None,
        width: OptionalNumber = None,
        height: OptionalNumber = None,
        left: OptionalNumber = None,
        top: OptionalNumber = None,
        right: OptionalNumber = None,
        bottom: OptionalNumber = None,
        expand: bool | int | None = None,
        col: ResponsiveNumber | None = None,
        opacity: OptionalNumber = None,
        rotate: RotateValue = None,
        scale: ScaleValue = None,
        offset: OffsetValue = None,
        aspect_ratio: OptionalNumber = None,
        animate_opacity: AnimationValue = None,
        animate_size: AnimationValue = None,
        animate_position: AnimationValue = None,
        animate_rotation: AnimationValue = None,
        animate_scale: AnimationValue = None,
        animate_offset: AnimationValue = None,
        on_animation_end=None,
        visible: bool | None = None,
        disabled: bool | None = None,
        data: Any = None,
        destinations: List[NavigationDestination] | None = None,
        selected_index: int | None = None,
        bgcolor: str | None = None,
        label_behavior: NavigationBarLabelBehavior | None = None,
        elevation: OptionalNumber = None,
        on_change=None,
    ):
        super().__init__(
            ref,
            width,
            height,
            left,
            top,
            right,
            bottom,
            expand,
            col,
            opacity,
            rotate,
            scale,
            offset,
            aspect_ratio,
            animate_opacity,
            animate_size,
            animate_position,
            animate_rotation,
            animate_scale,
            animate_offset,
            on_animation_end,
            visible,
            disabled,
            data,
            destinations,
            selected_index,
            bgcolor,
            label_behavior,
            elevation,
            on_change,
        )
        self.navigation_destinations = navigation_destinations
        self.navigation_views = navigation_views
        self.pg = pg
        self.pre_check()

        self.destinations = self.navigation_destinations

        self.destination_index_to_views_mapping = (
            self.create_destination_view_mapping()
        )

        self.selected_index = 0
        self.elevation = 6.6666666666
        self.destinations = self.navigation_destinations
        self.on_change = self.on_changing_navigation_page

    def on_changing_navigation_page(self, e):
        for index, control in self.destination_index_to_views_mapping:
            if index == self.selected_index:
                print(
                    f"onChange: {index=} == {self.selected_index=}\nVisible -> True\n\t============="
                )
                control.visible = True

            else:
                print(
                    f"onChange: {index=} != {self.selected_index=}\nVisible -> False\n\t============="
                )
                control.visible = False
        else:
            print("onChange: Updates")
            self.update()
            self.pg.update()

    def create_destination_view_mapping(self):
        if len(self.navigation_destinations) == len(self.navigation_views):
            print("create_destination_view_mapping: Returning Mapping")
            return tuple(enumerate(self.navigation_views))
        else:
            raise Exception("Unequal Mappings Supplied")

    def pre_check(self):
        for view in self.navigation_views:
            view.visible = False
            print(f"Precheck: Setting Visible -> False")

        else:
            self.navigation_views[0].visible = True
            print("Precheck: Update")
            self.pg.update()


def main(page: ft.Page):
    def theme_changed(e):
        page.theme_mode = (
            ft.ThemeMode.DARK
            if page.theme_mode == ft.ThemeMode.LIGHT
            else ft.ThemeMode.LIGHT
        )
        theme_switcher.label = (
            "Light theme"
            if page.theme_mode == ft.ThemeMode.LIGHT
            else "Dark theme"
        )

        page.theme = (
            light_theme
            if page.theme_mode == ft.ThemeMode.LIGHT
            else dark_theme
        )

        page.update()

    page.theme_mode = ft.ThemeMode.LIGHT
    theme_switcher = ft.Switch(label="Light theme", on_change=theme_changed)
    page.add(theme_switcher)

    d1 = ft.NavigationDestination(icon=ft.icons.BOOKMARK)
    d2 = ft.NavigationDestination(icon=ft.icons.BOOKMARK)
    d3 = ft.NavigationDestination(icon=ft.icons.BOOKMARK)

    v1 = ft.Text("v1")
    v2 = ft.Text("v2")
    v3 = ft.Text("v3")

    page.add(v1)
    page.add(v2)
    page.add(v3)

    page.navigation_bar = NavBar(
        navigation_destinations=[d1, d2, d3],
        navigation_views=[v1, v2, v3],
        pg=page,
    )
    page.update()


if __name__ == "__main__":
    ft.app(target=main)

Error message

No response

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

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

[ndonkoHenri]

Why use inextracker?

[Lucifer516-sudo]

Actually that is my project that I am working now, and it is an personal one, as I don't have an full fledged PC, I use archlinux arm64 os on my mobile phone using termux app(with the help of proot-distro) and when I tried relative import it didn't work for me I kept trying for an week at first place and I just declared the Environment Variable PYTHONPATH and so i have to do an absolute import which best suited my needs, and in case you wondered what I have in it, here is the code:

"""
* Primary and Variants:
   - `primary`: The core color used for prominent UI elements, like the app's toolbar or headers.
   - `on_primary`: The text and icon color that's suitable to be displayed on top of the `primary` color.
   - `primary_container`: Background color of containers that house elements using the `primary` color.
   - `on_primary_container`: The color of text and icons that appear on top of `primary_container` backgrounds.

* Secondary and Variants:
   - `secondary`: A complementary color to the primary, used for less important components.
   - `on_secondary`: The text and icon color that works well on top of the `secondary` color.
   - `secondary_container`: Background color of containers for elements using the `secondary` color.

* Tertiary and Variants:
   - `tertiary`: A color for UI elements that are even less important than secondary ones.
   - `on_tertiary`: The text and icon color for the `tertiary` color.
   - `tertiary_container`: Background color for containers holding elements with the `tertiary` color.

* Error and Variants:
   - `error`: A color that indicates errors or alerts in the UI.
   - `on_error`: The text and icon color for the `error` color.
   - `error_container`: Background color for containers with error-related elements.

* Background and Surface:
   - `background`: The base color for the overall background of the app.
   - `on_background`: The text and icon color that's easily readable on the `background`.
   - `surface`: The color for surfaces (like cards) in your app's layout.
   - `on_surface`: The text and icon color that's easily readable on the `surface`.

* Variants of Surface:
   - `surface_variant`: A variation of the surface color, for subtle visual distinctions.
   - `on_surface_variant`: Text and icons color for content on `surface_variant` backgrounds.

* Other Variants:
   - `outline`: Color for outlines and dividers.
   - `outline_variant`: A variation of the outline color.
   - `shadow`: Color for drop shadows.
   - `scrim`: A translucent overlay color used for background elements.
   - `inverse_surface`: Color for surfaces in high-contrast (e.g., dark mode).
   - `on_inverse_surface`: Text and icons color on top of `inverse_surface`.
   - `inverse_primary`: A high-contrast color version of the primary color.
   - `surface_tint`: A tint applied to surfaces, often used to indicate selection.

These attributes provide a comprehensive way to define a consistent and visually pleasing color scheme for your app following the principles of Material Design. By setting these attributes, you ensure that your app's UI remains coherent and attractive across different devices and platforms.
"""

from curses import color_content
from pydantic import BaseModel
import flet as ft


class LightColorScheme(BaseModel):
    """
    # NOTE: Generated by material theme builder 3
    """

    primary: str = "#885200"
    on_primary: str = "#ffffff"
    primary_container: str = "#ffdcbb"
    on_primary_container: str = "#2c1700"
    secondary: str = "#725a41"
    on_secondary: str = "#ffffff"
    secondary_container: str = "#feddbd"
    on_secondary_container: str = "#281805"
    tertiary: str = "#56633b"
    on_tertiary: str = "#ffffff"
    tertiary_container: str = "#dae9b6"
    on_tertiary_container: str = "#141f01"
    error: str = "#ba1a1a"
    error_container: str = "#ffdad6"
    on_error: str = "#ffffff"
    on_error_container: str = "#410002"
    background: str = "#fffbff"
    on_background: str = "#1f1b16"
    outline: str = "#827568"
    on_inverse_surface: str = "#faefe7"
    inverse_surface: str = "#352f2b"
    inverse_primary: str = "#ffb869"
    shadow: str = "#000000"
    surface_tint: str = "#885200"
    outline_variant: str = "#d4c4b5"
    scrim: str = "#000000"
    surface: str = "#fff8f4"
    on_surface: str = "#1f1b16"
    surface_variant: str = "#f1dfd0"
    on_surface_variant: str = "#50453a"


class DarkColorScheme(BaseModel):
    primary: str = "#ffb869"
    on_primary: str = "#482900"
    primary_container: str = "#673d00"
    on_primary_container: str = "#ffdcbb"
    secondary: str = "#e0c1a3"
    on_secondary: str = "#402d17"
    secondary_container: str = "#58432c"
    on_secondary_container: str = "#feddbd"
    tertiary: str = "#becc9c"
    on_tertiary: str = "#293411"
    tertiary_container: str = "#3f4b26"
    on_tertiary_container: str = "#dae9b6"
    error: str = "#ffb4ab"
    error_container: str = "#93000a"
    on_error: str = "#690005"
    on_error_container: str = "#ffdad6"
    background: str = "#1f1b16"
    on_background: str = "#ebe1d9"
    outline: str = "#9d8e81"
    on_inverse_surface: str = "#1f1b16"
    inverse_surface: str = "#ebe1d9"
    inverse_primary: str = "#885200"
    shadow: str = "#000000"
    surface_tint: str = "#ffb869"
    outline_variant: str = "#50453a"
    scrim: str = "#000000"
    surface: str = "#17130e"
    on_surface: str = "#cfc5be"
    surface_variant: str = "#50453a"
    on_surface_variant: str = "#d4c4b5"


font_family: str = "Roboto Mono"

dark_theme: ft.Theme = ft.Theme(
    color_scheme=ft.ColorScheme(**DarkColorScheme().dict()),
    font_family=font_family,
    use_material3=True,
)

light_theme: ft.Theme = ft.Theme(
    color_scheme=ft.ColorScheme(**LightColorScheme().dict()),
    font_family=font_family,
    use_material3=True,
)

And incase if you wondered what , inextracker means Income-Expense Tracker 😅, this is an personal project.

And sorry for the late response.