0

I'm currently writing a small app using flet but I've run into a weird UI issue where I'm using the same colour in two different places and they are coming out looking different to one another. The code I'm running looks like this:

import flet


def main(page: flet.Page):
    page.bgcolor = "#535D6C"
    page.window_title_bar_hidden = True
    page.spacing = 0
    page.padding = 0

    width_screen = page.window_width

    def maximise_window(e):
        page.window_maximized = not page.window_maximized
        page.update()

    def minimise_window(e):
        page.window_minimized = not page.window_minimized
        page.update()

    file_bar = flet.ResponsiveRow([
        flet.WindowDragArea(
            flet.Container(
                width=width_screen,
                bgcolor=flet.colors.BLUE_GREY_900,
                padding=3,
                content=flet.Row([
                    flet.Text(
                        "Home",
                        size=12,
                        color=flet.colors.WHITE60,
                    ),
                    flet.Container(
                        content=flet.Row([
                            flet.IconButton(flet.icons.MINIMIZE_ROUNDED,
                                            icon_color=flet.colors.WHITE60,
                                            on_click=minimise_window,
                                            ),
                            flet.IconButton(flet.icons.CHECK_BOX_OUTLINE_BLANK,
                                            icon_color=flet.colors.WHITE60,
                                            on_click=maximise_window,
                                            ),
                            flet.IconButton(flet.icons.CLOSE,
                                            icon_color=flet.colors.WHITE60,
                                            on_click=lambda e: page.window_close(),
                                            ),
                        ])
                    )
                ], alignment="spaceBetween")
            )
        )
    ])

    page.navigation_bar = flet.NavigationBar(
        bgcolor=flet.colors.BLUE_GREY_900,
        destinations=[
            flet.NavigationDestination(icon=flet.icons.HOME),
            flet.NavigationDestination(icon=flet.icons.EXPLORE),
            flet.NavigationDestination(icon=flet.icons.SETTINGS),
        ]
    )

    page.add(
        file_bar,
    )


flet.app(target=main)

Display with different colours

I've added in multiple different colours including custom ones and the behaviour doesn't change. It seems as though this only happens in the bottom navigation bar though and I'm not sure how to fix it.

Thanks, Mitchell

Mitchell
  • 1
  • 1

0 Answers0