Global AppBar System

Fuente canónica. Cambios en el AppBar global se documentan aquí.

Architecture

shared/components/
├── app_bar_config.py      # AppBarConfig dataclass (title, actions, flags)
├── app_bar_registry.py    # Route-to-config mapping (APP_BAR_REGISTRY)
├── app_bar_manager.py     # Route state + rebuild triggers
└── global_app_bar.py      # ft.AppBar builder

How It Works

1. Route Change: main.py's route_change handler calls build_global_app_bar() based on route
2. i18n Rebuild: LanguageSelector._change_language() triggers rebuild_app_bar() which:
3. Rebuilds the AppBar with new translations
4. Calls page-specific callbacks to update page labels

Adding a New Page

1. Add config builder to app_bar_registry.py:

def get_new_page_app_bar_config(page: ft.Page) -> AppBarConfig:
    return AppBarConfig(
        title=t("new_page.title"),
        show_language_selector=True,
        show_theme_toggle=True,
    )

2. Register in APP_BAR_REGISTRY:

APP_BAR_REGISTRY = {
    "/new-page": get_new_page_app_bar_config,
}

3. If page has i18n labels, register rebuild callback:

from shared.components.app_bar_manager import register_page_rebuild_callback

def my_page(page: ft.Page, controller):
    title_text = ft.Text(t("new_page.title"), weight=ft.FontWeight.BOLD)

    def rebuild_page_labels():
        title_text.value = t("new_page.title")

    register_page_rebuild_callback("/new-page", rebuild_page_labels)

AppBarConfig Properties

Property	Type	Description
title	str	AppBar title
bgcolor	ft.Colors	Background color
actions	list[ft.Control]	Additional action controls
leading	ft.Control	Leading widget
automatically_imply_leading	bool	Auto show back button
show_language_selector	bool	Include LanguageSelector
show_theme_toggle	bool	Include ThemeToggleButton