Pagelet

Implements the basic Material Design visual layout structure.

Use it for projects that require a "page within a page" layouts with its own AppBar, BottomAppBar, NavigationDrawer, such as demos and galleries.

Inherits: LayoutControl, AdaptiveControl

Properties

• appbar(AppBar | CupertinoAppBar | None) –

  An AppBar control to display at the top

• bgcolor(ColorValue | None) –

  Background color of the Pagelet.

• bottom_appbar(BottomAppBar | None) –

  A BottomAppBar control to display at

• bottom_sheet(Control | None) –

  The persistent bottom sheet to show information that supplements the primary

• content(Control) –

  A child Control contained by the Pagelet.

• drawer(NavigationDrawer | None) –

  A NavigationDrawer control to

• end_drawer(NavigationDrawer | None) –

  A NavigationDrawer control to

• floating_action_button(Control | None) –

  A FloatingActionButton

• floating_action_button_location(FloatingActionButtonLocation | OffsetValue | None) –

  Defines a position for the FloatingActionButton.

• navigation_bar(NavigationBar | CupertinoNavigationBar | None) –

  A navigation bar (NavigationBar or

Methods

• close_drawer –
• close_end_drawer –
• show_drawer –
• show_end_drawer –

Examples

Live example

Pagelet example

import flet as ft


def main(page: ft.Page):
    def handle_show_drawer(e: ft.Event[ft.FloatingActionButton]):
        pagelet.show_drawer(drawer)

    drawer = ft.NavigationDrawer(
        controls=[
            ft.NavigationDrawerDestination(
                icon=ft.Icons.ADD_TO_HOME_SCREEN_SHARP,
                label="Item 1",
            ),
            ft.NavigationDrawerDestination(
                icon=ft.Icons.ADD_COMMENT,
                label="Item 2",
            ),
        ],
    )

    page.add(
        pagelet := ft.Pagelet(
            width=400,
            height=400,
            appbar=ft.AppBar(
                title=ft.Text("Pagelet AppBar Title"),
                bgcolor=ft.Colors.AMBER_ACCENT,
            ),
            content=ft.Container(ft.Text("Pagelet Body"), padding=ft.Padding.all(16)),
            bgcolor=ft.Colors.AMBER_100,
            bottom_appbar=ft.BottomAppBar(
                bgcolor=ft.Colors.BLUE,
                shape=ft.CircularRectangleNotchShape(),
                content=ft.Row(
                    controls=[
                        ft.IconButton(icon=ft.Icons.MENU, icon_color=ft.Colors.WHITE),
                        ft.Container(expand=True),
                        ft.IconButton(icon=ft.Icons.SEARCH, icon_color=ft.Colors.WHITE),
                        ft.IconButton(
                            icon=ft.Icons.FAVORITE, icon_color=ft.Colors.WHITE
                        ),
                    ]
                ),
            ),
            end_drawer=drawer,
            floating_action_button=ft.FloatingActionButton(
                content="Open",
                shape=ft.CircleBorder(),
                on_click=handle_show_drawer,
            ),
            floating_action_button_location=ft.FloatingActionButtonLocation.CENTER_DOCKED,
        )
    )


ft.run(main)

Properties

appbar

appbar: AppBar | CupertinoAppBar | None = None

An AppBar control to display at the top of the Pagelet.

bgcolor

bgcolor: ColorValue | None = None

Background color of the Pagelet.

bottom_appbar

bottom_appbar: BottomAppBar | None = None

A BottomAppBar control to display at the bottom of the Pagelet.

Note

If both the bottom_appbar and navigation_bar properties are specified, bottom_appbar takes precedence and will be displayed.

bottom_sheet

bottom_sheet: Control | None = None

The persistent bottom sheet to show information that supplements the primary content of the Pagelet.

content

content: Control

A child Control contained by the Pagelet.

The control in the content of the Pagelet is positioned at the top-left of the available space between the app bar and the bottom of the Pagelet.

Raises:

• ValueError –

  If content is not visible.

drawer

drawer: NavigationDrawer | None = None

A NavigationDrawer control to display as a panel sliding from the start edge of the page.

end_drawer

end_drawer: NavigationDrawer | None = None

A NavigationDrawer control to display as a panel sliding from the end edge of the page.

floating_action_button

floating_action_button: Control | None = None

A FloatingActionButton control to display on top of Pagelet content.

floating_action_button_location

floating_action_button_location: (
    FloatingActionButtonLocation | OffsetValue | None
) = END_FLOAT

Defines a position for the FloatingActionButton.

navigation_bar

navigation_bar: (
    NavigationBar | CupertinoNavigationBar | None
) = None

A navigation bar (NavigationBar or CupertinoNavigationBar) control to display at the bottom of the Pagelet.

Note

If both the navigation_bar and bottom_appbar properties are specified, navigation_bar takes precedence and will be displayed.

Methods

close_drawer

close_drawer()

close_end_drawer

close_end_drawer()

show_drawer

show_drawer(drawer: NavigationDrawer)

show_end_drawer

show_end_drawer(end_drawer: NavigationDrawer)