Skip to main content

Pagelet

Pagelet implements the basic Material Design visual layout structure.

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

Examples

Live example

Pagelet example

import flet as ft

def main(page: ft.Page):
def open_pagelet_end_drawer(e):
pagelet.end_drawer.open = True
pagelet.end_drawer.update()

pagelet = ft.Pagelet(
appbar=ft.AppBar(
title=ft.Text("Pagelet AppBar title"), bgcolor=ft.colors.AMBER_ACCENT
),
content=ft.Text("Pagelet body"),
bgcolor=ft.colors.AMBER_100,
bottom_app_bar=ft.BottomAppBar(
bgcolor=ft.colors.BLUE,
shape=ft.NotchShape.CIRCULAR,
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=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"
),
],
),
floating_action_button=ft.FloatingActionButton(
"Open", on_click=open_pagelet_end_drawer
),
floating_action_button_location=ft.FloatingActionButtonLocation.CENTER_DOCKED,
width=400,
height=400,
)

page.add(pagelet)


ft.app(target=main)

Properties

appbar

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

bgcolor

Background color of the Pagelet.

bottom_appbar

BottomAppBar control to display at the bottom of the Pagelet. If both bottom_appbar and navigation_bar properties are provided, NavigationBar will be displayed.

bottom_sheet

The persistent bottom sheet to show information that supplements the primary content of the Pagelet. Can be any control.

content

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.

drawer

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

end_drawer

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

floating_action_button

A FloatingActionButton control to display on top of Pagelet content.

floating_action_button_location

Defines a position for the FloatingActionButton.

Property value is FloatingActionButtonLocation enum with the following values (diagrams here):

  • CENTER_DOCKED
  • CENTER_FLOAT
  • CENTER_TOP
  • END_CONTAINED
  • END_DOCKED
  • END_FLOAT (default)
  • END_TOP
  • MINI_CENTER_DOCKED
  • MINI_CENTER_FLOAT
  • MINI_CENTER_TOP
  • MINI_END_DOCKED
  • MINI_END_FLOAT
  • MINI_END_TOP
  • MINI_START_DOCKED
  • MINI_START_FLOAT
  • MINI_START_TOP
  • START_DOCKED
  • START_FLOAT

NavigationBar control to display at the bottom of the page. If both bottom_appbar and navigation_bar properties are provided, NavigationBar will be displayed.

Methods

close_drawer()

Closes active drawer.

close_end_drawer()

Closes active end drawer.

show_drawer(drawer: NavigationDialog)

Displays drawer.

show_end_drawer(drawer: NavigationDialog)

Displays end_drawer.