Skip to content

Page

Page is a container for View controls.

A page instance and the root view are automatically created when a new user session started.

Inherits: BasePage

Properties

  • auth(Authorization | None) –

    The current authorization context, or None if the user is not authorized.

  • browser_context_menu(BrowserContextMenu) –

    Used to enable or disable the context menu that appears when the user

  • client_ip(str | None) –

    IP address of the connected user.

  • client_user_agent(str | None) –

    Browser details of the connected user.

  • clipboard(Clipboard) –

    Provides access to the system clipboard.

  • debug(bool) –

    True if Flutter client of Flet app is running in debug mode.

  • executor(ThreadPoolExecutor | None) –

    The executor for the current page.

  • fonts(dict[str, str] | None) –

    Defines the custom fonts to be used in the application.

  • loop(AbstractEventLoop) –

    The event loop for the current page.

  • multi_view(bool) –

    True if the application is running with multi-view support.

  • multi_views(list[MultiView]) –

    The list of multi-views associated with this page.

  • name(str) –

    The name of the current page.

  • platform(PagePlatform | None) –

    The operating system the application is running on.

  • platform_brightness(Brightness | None) –

    The current brightness mode of the host platform.

  • pubsub(PubSubClient) –

    The PubSub client for the current page.

  • pwa(bool) –

    True if the application is running as Progressive Web App (PWA).

  • pyodide(bool) –

    True if the application is running in Pyodide (WebAssembly) mode.

  • query(QueryString) –

    The query parameters of the current page.

  • route(str) –

    Gets current app route.

  • session(Session) –

    The session that this page belongs to.

  • shared_preferences(SharedPreferences) –

    Provides a persistent key-value storage for simple data types.

  • storage_paths(StoragePaths) –

    Provides the information about common storage paths.

  • test(bool) –

    True if the application is running with test mode.

  • url(str | None) –

    The URL of the current page.

  • url_launcher(UrlLauncher) –

    Provides methods for launching URLs.

  • wasm(bool) –

    True if the application is running in WebAssembly (WASM) mode.

  • web(bool) –

    True if the application is running in the web browser.

  • window(Window) –

    Provides properties/methods/events to monitor and control the

Events

Methods

Examples#

Listening to keyboard events#

import flet as ft


class ButtonControl(ft.Container):
    def __init__(self, text):
        super().__init__()
        self.content: ft.Text = ft.Text(text)
        self.border = ft.Border.all(1, ft.Colors.BLACK54)
        self.border_radius = 3
        self.bgcolor = "0x09000000"
        self.padding = 10
        self.visible = False


def main(page: ft.Page):
    page.spacing = 50
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def on_keyboard(e: ft.KeyboardEvent):
        key.content.value = e.key
        key.visible = True
        shift.visible = e.shift
        ctrl.visible = e.ctrl
        alt.visible = e.alt
        meta.visible = e.meta
        page.update()

    page.on_keyboard_event = on_keyboard

    page.add(
        ft.Text(
            "Press any key with a combination of CTRL, ALT, SHIFT and META keys..."
        ),
        ft.Row(
            controls=[
                key := ButtonControl(""),
                shift := ButtonControl("Shift"),
                ctrl := ButtonControl("Control"),
                alt := ButtonControl("Alt"),
                meta := ButtonControl("Meta"),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        ),
    )


ft.run(main)

Mobile device orientation configuration#

Shows how to lock your app to specific device orientations (e.g., portrait up, landscape right) and listen for orientation changes on mobile devices.

import flet as ft


def main(page: ft.Page) -> None:
    page.title = "Device orientation lock"
    page.appbar = ft.AppBar(
        title=ft.Text("Device orientation Playground"),
        center_title=True,
        bgcolor=ft.Colors.BLUE,
    )

    def handle_media_change(e: ft.PageMediaData) -> None:
        page.show_dialog(
            ft.SnackBar(
                f"I see you rotated the device to {e.orientation.name} orientation. 👀",
                action="Haha!",
                duration=ft.Duration(seconds=3),
            )
        )

    page.on_media_change = handle_media_change

    async def on_checkbox_change(e: ft.Event[ft.Checkbox]) -> None:
        # get selection
        selected = [o for o, checkbox in checkboxes.items() if checkbox.value]
        # apply selection
        await page.set_allowed_device_orientations(selected)

    checkboxes: dict[ft.DeviceOrientation, ft.Checkbox] = {
        orientation: ft.Checkbox(
            label=orientation.name,
            value=True,
            on_change=on_checkbox_change,
            disabled=not page.platform.is_mobile(),  # disabled on non-mobile platforms
        )
        for orientation in list(ft.DeviceOrientation)
    }

    page.add(
        ft.Text(
            spans=[
                # shown only on mobile platforms
                ft.TextSpan(
                    "Select the orientations that should remain enabled for the app. "
                    "If no orientation is selected, the system defaults will be used.",
                    visible=page.platform.is_mobile(),
                ),
                # shown only on non-mobile platforms
                ft.TextSpan(
                    "Please open this example on a mobile device instead.",
                    visible=not page.platform.is_mobile(),
                    style=ft.TextStyle(weight=ft.FontWeight.BOLD),
                ),
            ],
        ),
        ft.Column(controls=list(checkboxes.values())),
    )


if __name__ == "__main__":
    ft.run(main)

App exit confirmation#

import flet as ft


def main(page: ft.Page):
    def window_event(e: ft.WindowEvent):
        if e.type == ft.WindowEventType.CLOSE:
            page.show_dialog(confirm_dialog)
            page.update()

    page.window.prevent_close = True
    page.window.on_event = window_event

    async def handle_yes_click(e: ft.Event[ft.Button]):
        await page.window.destroy()

    def handle_no_click(e: ft.Event[ft.OutlinedButton]):
        page.pop_dialog()
        page.update()

    confirm_dialog = ft.AlertDialog(
        modal=True,
        title=ft.Text("Please confirm"),
        content=ft.Text("Do you really want to exit this app?"),
        actions=[
            ft.Button(content="Yes", on_click=handle_yes_click),
            ft.OutlinedButton(content="No", on_click=handle_no_click),
        ],
        actions_alignment=ft.MainAxisAlignment.END,
    )

    page.add(ft.Text('Try exiting this app by clicking window\'s "Close" button!'))


ft.run(main)

Hidden app window on startup#

import asyncio

import flet as ft


async def main(page: ft.Page):
    page.add(ft.Text("Hello!"))
    await asyncio.sleep(3)
    page.window.visible = True
    page.update()


ft.run(main, view=ft.AppView.FLET_APP_HIDDEN)

Properties#

auth #

auth: Authorization | None

The current authorization context, or None if the user is not authorized.

browser_context_menu #

browser_context_menu: BrowserContextMenu = field(
    default_factory=lambda: BrowserContextMenu(),
    metadata={"skip": True},
)

Used to enable or disable the context menu that appears when the user right-clicks on the web page.

Limitation

Web only.

client_ip #

client_ip: str | None = None

IP address of the connected user.

Note

This property is web- and read-only only.

client_user_agent #

client_user_agent: str | None = None

Browser details of the connected user.

Note

This property is web- and read-only only.

clipboard #

clipboard: Clipboard = field(
    default_factory=lambda: Clipboard(),
    metadata={"skip": True},
)

Provides access to the system clipboard.

debug #

debug: bool = False

True if Flutter client of Flet app is running in debug mode.

Note

This property is read-only.

executor #

executor: ThreadPoolExecutor | None

The executor for the current page.

fonts #

fonts: dict[str, str] | None = None

Defines the custom fonts to be used in the application.

Value is a dictionary, in which the keys represent the font family name used for reference and the values: - Key: The font family name used for reference. - Value: The font source, either an absolute URL or a relative path to a local asset. The following font file formats are supported .ttc, .ttf and .otf.

Usage example here.

loop #

loop: AbstractEventLoop

The event loop for the current page.

multi_view #

multi_view: bool = False

True if the application is running with multi-view support.

Note

This property is read-only.

multi_views #

multi_views: list[MultiView] = field(default_factory=list)

The list of multi-views associated with this page.

name #

name: str

The name of the current page.

platform #

platform: PagePlatform | None = None

The operating system the application is running on.

platform_brightness #

platform_brightness: Brightness | None = None

The current brightness mode of the host platform.

Note

This property is read-only.

pubsub #

pubsub: PubSubClient

The PubSub client for the current page.

pwa #

pwa: bool = False

True if the application is running as Progressive Web App (PWA).

Note

This property is read-only.

pyodide #

pyodide: bool = False

True if the application is running in Pyodide (WebAssembly) mode.

Note

This property is read-only.

query #

query: QueryString

The query parameters of the current page.

route #

route: str = '/'

Gets current app route.

Note

This property is read-only.

session #

session: Session

The session that this page belongs to.

shared_preferences #

shared_preferences: SharedPreferences = field(
    default_factory=lambda: SharedPreferences(),
    metadata={"skip": True},
)

Provides a persistent key-value storage for simple data types.

storage_paths #

storage_paths: StoragePaths = field(
    default_factory=lambda: StoragePaths(),
    metadata={"skip": True},
)

Provides the information about common storage paths.

test #

test: bool = False

True if the application is running with test mode.

Note

This property is read-only.

url #

url: str | None

The URL of the current page.

url_launcher #

url_launcher: UrlLauncher = field(
    default_factory=lambda: UrlLauncher(),
    metadata={"skip": True},
)

Provides methods for launching URLs.

wasm #

wasm: bool = False

True if the application is running in WebAssembly (WASM) mode.

Note

This property is read-only.

web #

web: bool = False

True if the application is running in the web browser.

Note

This property is read-only.

window #

window: Window = field(default_factory=lambda: Window())

Provides properties/methods/events to monitor and control the app's native OS window.

Events#

on_app_lifecycle_state_change #

on_app_lifecycle_state_change: (
    EventHandler[AppLifecycleStateChangeEvent] | None
) = None

Triggers when app lifecycle state changes.

on_close #

on_close: ControlEventHandler[Page] | None = None

Called when a session has expired after configured amount of time (60 minutes by default).

on_connect #

on_connect: ControlEventHandler[Page] | None = None

Called when a web user (re-)connects to a page session.

It is not triggered when an app page is first opened, but is triggered when the page is refreshed, or Flet web client has re-connected after computer was unlocked. This event could be used to detect when a web user becomes "online".

on_disconnect #

on_disconnect: ControlEventHandler[Page] | None = None

Called when a web user disconnects from a page session, i.e. closes browser tab/window.

on_error #

on_error: ControlEventHandler[Page] | None = None

Called when unhandled exception occurs.

on_keyboard_event #

on_keyboard_event: EventHandler[KeyboardEvent] | None = None

Called when a keyboard key is pressed.

on_login #

on_login: EventHandler[LoginEvent] | None = None

Called upon successful or failed OAuth authorization flow.

See Authentication guide for more information and examples.

on_logout #

on_logout: ControlEventHandler[Page] | None = None

Called after page.logout() call.

on_multi_view_add #

on_multi_view_add: (
    EventHandler[MultiViewAddEvent] | None
) = None

TBD

on_multi_view_remove #

on_multi_view_remove: (
    EventHandler[MultiViewRemoveEvent] | None
) = None

TBD

on_platform_brightness_change #

on_platform_brightness_change: (
    EventHandler[PlatformBrightnessChangeEvent] | None
) = None

Called when brightness of app host platform has changed.

on_route_change #

on_route_change: EventHandler[RouteChangeEvent] | None = (
    None
)

Called when page route changes either programmatically, by editing application URL or using browser Back/Forward buttons.

on_view_pop #

on_view_pop: EventHandler[ViewPopEvent] | None = None

Called when the user clicks automatic "Back" button in AppBar control.

Methods#

before_event #

before_event(e: ControlEvent)

can_launch_url #

can_launch_url(url: str) -> bool

Checks whether the specified URL can be handled by some app installed on the device.

Parameters:

  • url (str) –

    The URL to check.

Returns:

  • bool –

    True if it is possible to verify that there is a handler available.

  • bool –

    False if there is no handler available,

  • bool –

    or the application does not have permission to check. For example:

  • bool –
    • On recent versions of Android and iOS, this will always return False unless the application has been configuration to allow querying the system for launch support.
  • bool –
    • In web mode, this will always return False except for a few specific schemes that are always assumed to be supported (such as http(s)), as web pages are never allowed to query installed applications.

close_in_app_web_view #

close_in_app_web_view() -> None

Closes in-app web view opened with launch_url().

📱 Mobile only.

error #

error(message: str) -> None

get_control #

get_control(id: int) -> BaseControl | None

Get a control by its id.

Example:

import flet as ft


def main(page: ft.Page):
    x = ft.IconButton(ft.Icons.ADD)
    page.add(x)
    print(type(page.get_control(x.uid)))


ft.run(main)

get_device_info #

get_device_info() -> DeviceInfo | None

Returns device information.

Returns:

  • DeviceInfo | None –

    The device information object for the current platform, or None if unavailable.

get_upload_url #

get_upload_url(file_name: str, expires: int) -> str

Generates presigned upload URL for built-in upload storage:

  • file_name - a relative to upload storage path.
  • expires - a URL time-to-live in seconds.

For example:

upload_url = page.get_upload_url("dir/filename.ext", 60)

To enable built-in upload storage provide upload_dir argument to flet.app() call:

ft.run(main, upload_dir="uploads")

go #

go(
    route: str,
    skip_route_change_event: bool = False,
    **kwargs: Any,
) -> None

A helper method that updates page.route, calls page.on_route_change event handler to update views and finally calls page.update().

launch_url #

launch_url(
    url: str | Url,
    *,
    web_popup_window_name: str | UrlTarget | None = None,
    web_popup_window: bool = False,
    web_popup_window_width: int | None = None,
    web_popup_window_height: int | None = None,
) -> None

Opens a web browser or popup window to a given url.

Parameters:

  • url (str | Url) –

    The URL to open.

  • web_popup_window_name (str | UrlTarget | None, default: None ) –

    Window tab/name to open URL in. Use UrlTarget.SELF for the same browser tab, UrlTarget.BLANK for a new browser tab (or in external application on mobile device), or a custom name for a named tab.

  • web_popup_window (bool, default: False ) –

    Display the URL in a browser popup window.

  • web_popup_window_width (int | None, default: None ) –

    Popup window width.

  • web_popup_window_height (int | None, default: None ) –

    Popup window height.

login #

login(
    provider: OAuthProvider,
    fetch_user: bool = True,
    fetch_groups: bool = False,
    scope: list[str] | None = None,
    saved_token: str | None = None,
    on_open_authorization_url: Callable[
        [str], Coroutine[Any, Any, None]
    ]
    | None = None,
    complete_page_html: str | None = None,
    redirect_to_page: bool | None = False,
    authorization: type[AT] = AuthorizationImpl,
) -> AT

Starts OAuth flow.

See Authentication guide for more information and examples.

logout #

logout() -> None

Clears current authentication context. See Authentication guide for more information and examples.

push_route #

push_route(route: str, **kwargs: Any) -> None

Pushes a new navigation route to the browser history stack. Changing route will fire page.on_route_change event handler.

Example:

import flet as ft
import asyncio


def main(page: ft.Page):
    page.title = "Push Route Example"

    def route_change(e):
        page.views.clear()
        page.views.append(
            ft.View(
                route="/",
                controls=[
                    ft.AppBar(title=ft.Text("Flet app")),
                    ft.ElevatedButton(
                        "Visit Store",
                        on_click=lambda _: asyncio.create_task(
                            page.push_route("/store")
                        ),
                    ),
                ],
            )
        )
        if page.route == "/store":
            page.views.append(
                ft.View(
                    route="/store",
                    can_pop=True,
                    controls=[
                        ft.AppBar(title=ft.Text("Store")),
                        ft.ElevatedButton(
                            "Go Home",
                            on_click=lambda _: asyncio.create_task(
                                page.push_route("/")
                            ),
                        ),
                    ],
                )
            )

    async def view_pop(e):
        page.views.pop()
        top_view = page.views[-1]
        await page.push_route(top_view.route)

    page.on_route_change = route_change
    page.on_view_pop = view_pop


ft.run(main)

Parameters:

  • route (str) –

    New navigation route.

  • **kwargs (Any, default: {} ) –

    Additional query string parameters to be added to the route.

render #

render(
    component: Callable[
        ..., list[View] | list[Control] | View | Control
    ],
    *args,
    **kwargs,
)

render_views #

render_views(
    component: Callable[
        ..., list[View] | list[Control] | View | Control
    ],
    *args,
    **kwargs,
)

run_task #

run_task(
    handler: Callable[InputT, Awaitable[RetT]],
    *args: args,
    **kwargs: kwargs,
) -> Future[RetT]

Run handler coroutine as a new Task in the event loop associated with the current page.

run_thread #

run_thread(
    handler: Callable[InputT, Any],
    *args: args,
    **kwargs: kwargs,
) -> None

Run handler function as a new Thread in the executor associated with the current page.

schedule_update #

schedule_update()

set_allowed_device_orientations #

set_allowed_device_orientations(
    orientations: list[DeviceOrientation],
) -> None

Constrains the allowed orientations for the app when running on a mobile device.

Parameters:

  • orientations (list[DeviceOrientation]) –

    A list of allowed device orientations. Set to an empty list to use the system default behavior.

Raises:

Limitations

  • Android: On Android 16 (API 36) or later, this method won't be able to change the orientation of devices with a display width ≥ 600 dp cannot change orientation. For more details see Android 16 docs here. Also, Android limits the orientations to the following combinations: - [] → unspecified - [PORTRAIT_UP] → portrait - [LANDSCAPE_LEFT] → landscape - [PORTRAIT_DOWN] → reversePortrait - [PORTRAIT_UP, PORTRAIT_DOWN] → userPortrait - [LANDSCAPE_RIGHT] → reverseLandscape - [LANDSCAPE_LEFT, LANDSCAPE_RIGHT] → userLandscape - [PORTRAIT_UP, LANDSCAPE_LEFT, LANDSCAPE_RIGHT] → user - [PORTRAIT_UP, PORTRAIT_DOWN, LANDSCAPE_LEFT, LANDSCAPE_RIGHT] → fullUser

  • iOS: This setting will only be respected on iPad if multitasking is disabled. You can decide to opt out of multitasking on iPad, then this will work but your app will not support Slide Over and Split View multitasking anymore. Should you decide to opt out of multitasking you can do this by setting "Requires full screen" to true in the Xcode Deployment Info.

update #

update(*controls) -> None