NavigationBar and indicator_color - not working

[lennpet]

Question

Hi, maybe doing something wrong. Not able to set color on selected index in my NavigationBar. Had no problem in CupertinoNavigationBar.

Is it not supported or am I doing something wrong?

Code sample

page.navigation_bar = ft.NavigationBar(
        adaptive=True,
        bgcolor=ft.colors.GREY_900,
        indicator_color=ft.colors.LIGHT_GREEN, #ToDo this is not working
        on_change=lambda e: print("Selected tab:", e.control.selected_index),
        destinations=[
            ft.NavigationBarDestination(icon=ft.icons.HOUSE, label="Hem"),
            ft.NavigationBarDestination(icon=ft.icons.SHOPPING_CART, label="Butik"),
            ft.NavigationBarDestination(icon=ft.icons.RECEIPT, label="Kvitton"),
            ft.NavigationBarDestination(icon=ft.icons.SETTINGS, label="Inställningar"),
        ],
    )

Error message

No response

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

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

[ap4499]

I think that all looks ok.

Have you got a minimal reproducible example? (simplest complete script that shows the issue)

[lennpet]

Sure, stripped down .py here. Noticed now that if I comment the adaptive property, it behaves correctly. But now I don't get the iOS look-and-feel when testing there. Thought this would be a simple solution. But maybe I have to check system and use CupertinoNavigationBar when on iOS?

`import flet as ft

def main(page: ft.Page):

page.title = "TEST"

page.navigation_bar = ft.NavigationBar(
    adaptive=True,
    bgcolor=ft.colors.GREY_900,
    indicator_color=ft.colors.AMBER, #ToDo this is not working
    on_change=lambda e: print("Selected tab:", e.control.selected_index),
    destinations=[
        ft.NavigationBarDestination(icon=ft.icons.HOUSE, label="Hem"),
        ft.NavigationBarDestination(icon=ft.icons.SHOPPING_CART, label="Butik"),
        ft.NavigationBarDestination(icon=ft.icons.RECEIPT, label="Kvitton"),
        ft.NavigationBarDestination(icon=ft.icons.SETTINGS, label="Inställningar"),
    ],
)

welcome = ft.Text("Hello!")

safe_area = ft.SafeArea(welcome)

page.add(safe_area)

ft.app(main)`

[tanmay-bhatgare]

@lennpet See in my window 11 both are working fine when i set active_color in CupertinoNavigationBar to red it worked and same of 'indicator_colorinNavigationBar`. Try upgrading flet, this might help.

[ap4499]

@lennpet - I can replicate your issue on MacOS when running Flet latest (0.24.1) and 0.23.1.

I think this should work.. I've had a look over the Dart code and I am unsure why, it should just switch to the Cupertino control and return that (which you say is working).

I'd raise an issue for it.

You seem to have already figured out a solution, but yes - I'd create a custom control and have two routes,
if system == Darwin/iOS
return Curpurtino

Else dont

Dump in the kwargs to each respectively.

import flet as ft

def main(page: ft.Page):
    page.title = "TEST"

    page.navigation_bar = ft.NavigationBar(
        adaptive=True,
        bgcolor=ft.colors.GREY_900,
        indicator_color=ft.colors.AMBER, #ToDo this is not working
        on_change=lambda e: print("Selected tab:", e.control.selected_index),
        destinations=[
            ft.NavigationBarDestination(icon=ft.icons.HOUSE, label="Hem"),
            ft.NavigationBarDestination(icon=ft.icons.SHOPPING_CART, label="Butik"),
            ft.NavigationBarDestination(icon=ft.icons.RECEIPT, label="Kvitton"),
            ft.NavigationBarDestination(icon=ft.icons.SETTINGS, label="Inställningar"),
        ],
    )

    welcome = ft.Text("Hello!")

    safe_area = ft.SafeArea(welcome)

    page.add(safe_area)

if __name__ == "__main__":


    ft.app(target=main)

[lennpet]

Thanks 🙏

[lennpet]

Should be getting deeper into the code but for me it seems that in cupertino_navigation_bar.dart, when creating the CupertinoTabBar, the activeColor is set as attribute 'activeColor' - but I can't se how that is matched with indicator_color that I set in code for the NavigationBar. Something is missing. Or?