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

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 property #

auth: Authorization | None

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

browser_context_menu class-attribute instance-attribute #

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 class-attribute instance-attribute #

client_ip: str | None = None

IP address of the connected user.

Note

This property is web- and read-only only.

client_user_agent class-attribute instance-attribute #

client_user_agent: str | None = None

Browser details of the connected user.

Note

This property is web- and read-only only.

clipboard class-attribute instance-attribute #

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

Provides access to the system clipboard.

debug class-attribute instance-attribute #

debug: bool = False

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

Note

This property is read-only.

executor property #

executor: ThreadPoolExecutor | None

The executor for the current page.

fonts class-attribute instance-attribute #

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 property #

loop: AbstractEventLoop

The event loop for the current page.

multi_view class-attribute instance-attribute #

multi_view: bool = False

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

Note

This property is read-only.

multi_views class-attribute instance-attribute #

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

The list of multi-views associated with this page.

name property #

name: str

The name of the current page.

platform class-attribute instance-attribute #

platform: PagePlatform | None = None

The operating system the application is running on.

platform_brightness class-attribute instance-attribute #

platform_brightness: Brightness | None = None

The current brightness mode of the host platform.

Note

This property is read-only.

pubsub property #

pubsub: PubSubClient

The PubSub client for the current page.

pwa class-attribute instance-attribute #

pwa: bool = False

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

Note

This property is read-only.

pyodide class-attribute instance-attribute #

pyodide: bool = False

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

Note

This property is read-only.

query property #

query: QueryString

The query parameters of the current page.

route class-attribute instance-attribute #

route: str = '/'

Gets current app route.

Note

This property is read-only.

session property #

session: Session

The session that this page belongs to.

shared_preferences class-attribute instance-attribute #

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

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

storage_paths class-attribute instance-attribute #

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

Provides the information about common storage paths.

test class-attribute instance-attribute #

test: bool = False

True if the application is running with test mode.

Note

This property is read-only.

url property #

url: str | None

The URL of the current page.

url_launcher class-attribute instance-attribute #

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

Provides methods for launching URLs.

wasm class-attribute instance-attribute #

wasm: bool = False

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

Note

This property is read-only.

web class-attribute instance-attribute #

web: bool = False

True if the application is running in the web browser.

Note

This property is read-only.

window class-attribute instance-attribute #

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 class-attribute instance-attribute #

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

Triggers when app lifecycle state changes.

on_close class-attribute instance-attribute #

on_close: ControlEventHandler[Page] | None = None

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

on_connect class-attribute instance-attribute #

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 class-attribute instance-attribute #

on_disconnect: ControlEventHandler[Page] | None = None

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

on_error class-attribute instance-attribute #

on_error: ControlEventHandler[Page] | None = None

Called when unhandled exception occurs.

on_keyboard_event class-attribute instance-attribute #

on_keyboard_event: EventHandler[KeyboardEvent] | None = None

Called when a keyboard key is pressed.

on_login class-attribute instance-attribute #

on_login: EventHandler[LoginEvent] | None = None

Called upon successful or failed OAuth authorization flow.

See Authentication guide for more information and examples.

on_logout class-attribute instance-attribute #

on_logout: ControlEventHandler[Page] | None = None

Called after page.logout() call.

on_multi_view_add class-attribute instance-attribute #

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

TBD

on_multi_view_remove class-attribute instance-attribute #

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

TBD

on_platform_brightness_change class-attribute instance-attribute #

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

Called when brightness of app host platform has changed.

on_route_change class-attribute instance-attribute #

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 class-attribute instance-attribute #

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 async #

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 async #

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 async #

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 async #

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 async #

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 async #

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 async #

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