More detailed error description in console for rendering problems

[HardMax71]

Question

Hi all, I'm making a mobile app and utilisingft.UserControl to build screens in my app. 99% of the time error is shown directly in flet app window behind all existing elements, making it unreadable and not understandable, since I have no idea what exactly went south.

Is there any option for more verbose output of error not into app window, but into console?

Code sample

import flet as ft
from flet import Column, Container, GridView, Text, icons

class HomeScreen(ft.UserControl):
    def __init__(self, app):
        super().__init__()
        self.app = app
        self.init_ui()

    def init_ui(self):
        self.app_bar = ft.AppBar(
            leading=ft.Icon(ft.icons.PALETTE),
            leading_width=40,
            title=ft.Text("NexusWare"),
            center_title=False,
            bgcolor=ft.colors.SURFACE_VARIANT,
            actions=[
                ft.IconButton(ft.icons.SEARCH),
                ft.IconButton(ft.icons.MORE_VERT),
            ],
        )

        self.function_grid = GridView(
            expand=True,
            runs_count=2,
            max_extent=150,
            child_aspect_ratio=1.0,
            spacing=10,
            run_spacing=10,
        )

        self.bottom_nav_bar = ft.NavigationBar(
            destinations=[
                ft.NavigationDestination(icon=icons.HOME, label="Home"),
                ft.NavigationDestination(icon=icons.INVENTORY_2, label="Inventory"),
                ft.NavigationDestination(icon=icons.SHOPPING_CART, label="Orders"),
                ft.NavigationDestination(icon=icons.PERSON, label="Profile"),
            ],
            on_change=self.bottom_nav_change,
        )

    def build(self):
        return Column(
            controls=[
                self.app_bar,
                Container(
                    expand=True,
                    content=self.function_grid,
                ),
                self.bottom_nav_bar,
            ],
            expand=True,
        )

    def did_mount(self):
        self.load_function_cards()

    def create_function_card(self, icon, title):
        return ft.ElevatedButton(
            content=Column(
                controls=[
                    ft.Icon(icon, size=32),
                    Text(title, size=14),
                ],
                alignment=ft.MainAxisAlignment.CENTER,
                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
            ),
            style=ft.ButtonStyle(
                shape=ft.RoundedRectangleBorder(radius=10),
            ),
            on_click=lambda _: self.navigate_to_function(title),
        )

    def load_function_cards(self):
        functions = [
            ("Inventory", icons.INVENTORY_2),
            ("Picking", icons.LIST_ALT),
            ("Receiving", icons.MOVE_TO_INBOX),
            ("Shipping", icons.LOCAL_SHIPPING),
            ("Tasks", icons.ASSIGNMENT),
            ("Reports", icons.BAR_CHART),
        ]

        for title, icon in functions:
            self.function_grid.controls.append(self.create_function_card(icon, title))

        self.update()

    def navigate_to_function(self, function_name):
        function_routes = {
            "Inventory": "/inventory",
            "Picking": "/picking",
            "Receiving": "/receiving",
            "Shipping": "/shipping",
            "Tasks": "/tasks",
            "Reports": "/reports",
        }
        if function_name in function_routes:
            self.app.page.go(function_routes[function_name])

    def bottom_nav_change(self, e):
        index = e.control.selected_index
        if index == 0:  # Home
            pass  # Already on home screen
        elif index == 1:  # Inventory
            self.app.page.go("/inventory")
        elif index == 2:  # Orders
            self.app.page.go("/orders")
        elif index == 3:  # Profile
            self.app.page.go("/profile")

    def show_error_message(self, message):
        self.app.page.snack_bar = ft.SnackBar(content=Text(message))
        self.app.page.snack_bar.open = True
        self.app.page.update()

Error message

https://prnt.sc/QF-Zg6T3gXmY

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

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

[ndonkoHenri]

Can you provide some code we can run to view the issue?

[HardMax71]

Yes, here it is:

import flet as ft
from flet import (
    Column,
    Container,
    Text,
    Icon,
    Card,
    GridView,
    AppBar,
    colors,
    icons,
    padding,
    border_radius,
)
from flet import Page


class HomeScreen(ft.UserControl):
    def __init__(self, app):
        super().__init__()
        self.app = app
        self.init_ui()

    def init_ui(self):
        self.app_bar = AppBar(
            leading=ft.Icon(ft.icons.HOME),
            leading_width=40,
            title=Text("NexusWare", size=20, weight=ft.FontWeight.BOLD),
            center_title=False,
            bgcolor=colors.BLUE_600,
        )

        self.stats_row = Column(
            controls=[
                self.create_stat_card("Pick Lists", "N/A", "N/A"),
                self.create_stat_card("Receipts", "N/A", "N/A"),
                self.create_stat_card("Shipments", "N/A", "N/A"),
            ],
            spacing=10,
        )

        self.function_grid = GridView(
            expand=True,
            runs_count=2,
            max_extent=150,
            child_aspect_ratio=1.0,
            spacing=20,
            run_spacing=20,
        )

        self.bottom_nav_bar = ft.NavigationBar(
            destinations=[
                ft.NavigationBarDestination(icon=icons.HOME, label="Home"),
                ft.NavigationBarDestination(icon=icons.INVENTORY_2, label="Inventory"),
                ft.NavigationBarDestination(icon=icons.SHOPPING_CART, label="Orders"),
                ft.NavigationBarDestination(icon=icons.PERSON, label="Profile"),
            ],
            on_change=self.bottom_nav_change,
        )

    def build(self):
        return Column(
            controls=[
                self.app_bar,
                Container(
                    expand=True,
                    bgcolor=colors.BLUE_50,
                    content=Column(
                        controls=[
                            Container(
                                padding=padding.all(20),
                                content=Column(
                                    controls=[
                                        self.stats_row,
                                        Container(height=20),
                                        self.function_grid,
                                    ],
                                    expand=True,
                                ),
                            ),
                        ],
                        expand=True,
                    ),
                ),
                self.bottom_nav_bar,
            ],
            expand=True,
        )

    def did_mount(self):
        self.load_function_cards()
        self.update()

    def create_stat_card(self, title, value, percentage):
        return Card(
            content=Container(
                padding=padding.all(15),
                content=Column(
                    controls=[
                        Text(title, size=16, color=colors.BLUE_600, weight=ft.FontWeight.BOLD),
                        Text(value, size=24, weight=ft.FontWeight.BOLD),
                        Text(percentage, size=14, color=colors.GREY_600),
                    ],
                    alignment=ft.MainAxisAlignment.CENTER,
                    horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                ),
            ),
            width=self.app.page.width * 0.9,  # 90% of screen width
            height=120,
        )

    def create_function_card(self, icon, title, gradient_colors):
        return ft.GestureDetector(
            content=Card(
                content=Container(
                    gradient=ft.LinearGradient(
                        begin=ft.alignment.top_left,
                        end=ft.alignment.bottom_right,
                        colors=gradient_colors,
                    ),
                    border_radius=border_radius.all(12),
                    padding=15,
                    content=Column(
                        controls=[
                            Icon(icon, size=40, color=colors.WHITE),
                            Container(height=10),
                            Text(title, color=colors.WHITE, size=16, weight=ft.FontWeight.BOLD),
                        ],
                        alignment=ft.MainAxisAlignment.CENTER,
                        horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                    ),
                ),
            ),
            on_tap=lambda _: self.navigate_to_function(title),
        )

    def load_function_cards(self):
        functions = [
            ("Inventory", icons.INVENTORY_2, [ft.colors.BLUE_400, ft.colors.BLUE_700]),
            ("Picking", icons.LIST_ALT, [ft.colors.GREEN_400, ft.colors.GREEN_700]),
            ("Receiving", icons.MOVE_TO_INBOX, [ft.colors.AMBER_400, ft.colors.AMBER_700]),
            ("Shipping", icons.LOCAL_SHIPPING, [ft.colors.PURPLE_400, ft.colors.PURPLE_700]),
            ("Tasks", icons.ASSIGNMENT, [ft.colors.RED_400, ft.colors.RED_700]),
            ("Reports", icons.BAR_CHART, [ft.colors.CYAN_400, ft.colors.CYAN_700]),
        ]

        for title, icon, colors in functions:
            self.function_grid.controls.append(self.create_function_card(icon, title, colors))

        self.update()

    def navigate_to_function(self, function_name):
        function_routes = {
            "Inventory": "/inventory",
            "Picking": "/picking",
            "Receiving": "/receiving",
            "Shipping": "/shipping",
            "Tasks": "/tasks",
            "Reports": "/reports",
        }
        if function_name in function_routes:
            self.app.page.go(function_routes[function_name])

    def bottom_nav_change(self, e):
        index = e.control.selected_index
        if index == 0:  # Home
            pass  # Already on home screen
        elif index == 1:  # Inventory
            self.app.page.go("/inventory")
        elif index == 2:  # Orders
            self.app.page.go("/orders")
        elif index == 3:  # Profile
            self.app.page.go("/profile")


class NexusWareApp:
    def __init__(self, page: Page):
        self.page = page
        self.page.title = "NexusWare"
        self.page.theme = ft.Theme(color_scheme_seed=ft.colors.BLUE)
        self.page.theme_mode = ft.ThemeMode.LIGHT

        self.home_screen = HomeScreen(self)

        self.setup_routes()
        self.page.go("/")

    def setup_routes(self):
        self.page.on_route_change = self.route_change
        self.page.on_view_pop = self.view_pop

    def route_change(self, route):
        self.page.views.clear()
        new_view = ft.View(route.route)

        if route.route == "/":
            new_view.controls.append(self.home_screen)
        else:
            new_view.controls.append(ft.Text(f"404 - Page not found: {route.route}"))

        self.page.views.append(new_view)
        self.page.update()

    def view_pop(self, view):
        self.page.views.pop()
        top_view = self.page.views[-1]
        self.page.go(top_view.route)

    async def show_error_message(self, message):
        self.page.snack_bar = ft.SnackBar(content=ft.Text(message))
        self.page.snack_bar.open = True
        self.page.update()


def main(page: Page):
    app = NexusWareApp(page)


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

Shows: https://prnt.sc/KGonY8m7j5a3

And returns deprecation warning for UserControl (but that doesn't matter in current context inmho):

C:\Users\User\Desktop\NexusWare\.venv\Scripts\python.exe C:\Users\User\Desktop\NexusWare\clients\mobile\main.py --view=mobile --verbose 
C:\Users\User\Desktop\NexusWare\clients\mobile\main.py:20: DeprecationWarning: UserControl is deprecated since version 0.21.0 and will be removed in version 0.26.0. UserControl is deprecated. See https://flet.dev/docs/getting-started/custom-controls.
  super().__init__()

[ndonkoHenri]

Running the code shows a white screen on my end. Can you check?

[HardMax71]

Checked; show same stuff with red error description behind all elements.

flet                  0.23.2
flet-core             0.23.2
flet-runtime          0.23.2

Python 3.11.9, Win11 Home