Dialogs and panels in Flet

AlertDialogs are small pop-up windows that can be used to inform the user about something that requires their acknowledgement of confirmation. AlertDialogs can be basic and just display a message or they can display a list of options to choose from. Basic AlertDialogs can be dismissed by clicking outside the AlertDialog. Modal AlertDialogs can only be dismissed if the user selects an option from a choice of actions (eg. Yes/No or, Confirm/Cancel).

The following code shows an example of a basic AlertDialog (that is called from a button click) and a modal AlertDialog (that is called from a button click).

	import flet as ft

	def main(page: ft.Page):
	page.title = "Examples of AlertDialog"

	dialog = ft.AlertDialog(
	title=ft.Text("Hello, world!"), on_dismiss=lambda e: print("Basic dialog dismissed!")
	)

	def confirm(e):
	dialog_modal.open = False
	page.update()
	print("Modal dialog closed (user selected 'Yes')")

	def cancel(e):
	dialog_modal.open = False
	page.update()
	print("Modal dialog closed (user selected 'Cancel')")

	dialog_modal = ft.AlertDialog(
	modal=True,
	title=ft.Text("Please confirm"),
	content=ft.Text("Are you sure you want to delete this file?"),
	actions=[
	ft.TextButton("Yes", on_click=confirm),
	ft.TextButton("Cancel", on_click=cancel),
	],
	actions_alignment=ft.MainAxisAlignment.END,
	on_dismiss=lambda e: print("Modal dialog dismissed!"),
	)

	def open_dialog(e):
	page.dialog = dialog
	dialog.open = True
	page.update()

	def open_dialog_modal(e):
	page.dialog = dialog_modal
	dialog_modal.open = True
	page.update()

	page.add(
	ft.ElevatedButton("Open basic dialog", on_click=open_dialog),
	ft.ElevatedButton("Open modal dialog", on_click=open_dialog_modal),
	)

	ft.app(target=main)

view raw app.py hosted with ❤ by GitHub

The two screenshots below show the basic dialog (left) and the modal dialog (right).

Screenshot of a basic dialog showing the text "Hello, world!"

Screenshot of a modal dialog displaying the message "Please confirm - Are you sure you want to delete this file?" with two buttons below titled "Yes" and "Cancel"

Banners

A banner displays an important message and provides actions for the user to address (or dismiss the banner). The user is required to perform an action to dismiss the banner. Banners are displayed at the top of the screen and are persistent, allowing the user to either ignore them or interact with them at any time.

Here is some example code for a banner launched from a button click.

	import flet as ft

	def main(page):
	def retry(e):
	page.banner.open = False
	page.update()
	print("User selected 'Retry'.")

	def cancel(e):
	page.banner.open = False
	page.update()
	print("User selected 'Cancel'.")

	page.banner = ft.Banner(
	bgcolor=ft.colors.AMBER_100,
	leading=ft.Icon(ft.icons.WARNING_AMBER_ROUNDED, color=ft.colors.AMBER, size=40),
	content=ft.Text(
	"Oops, somethong went wrong. Would you like to try again?",
	color="black"
	),
	actions=[
	ft.ElevatedButton("Retry", on_click=retry),
	ft.ElevatedButton("Cancel", on_click=cancel),
	],
	)

	def show_banner_click(e):
	page.banner.open = True
	page.update()

	page.add(ft.ElevatedButton("Show Banner", on_click=show_banner_click))

	ft.app(target=main)

view raw app.py hosted with ❤ by GitHub

The code above would produce the following banner:

Screenshot of a banner displaying a message and two buttons - Retry and Cancel.

BottomSheets

A BottomSheet is an alternative to a dialog alert or banner. It is a small alert panel that displays at the bottom of the screen. You can choose to make it dismissable after a button click or make it automatically dismiss after a certain amount of time. BottomSheets can be launched from a button click (like in the example below) or after some other event occurs. The user cannot interact with other parts of the screen until the BottomSheet is dismissed.

In the example code below, a BottomSheet is displayed when a button on the screen is clicked. The BottomSheet displays some text and a button that the user can click to dismiss the BottomSheet (this is optional). In this example, the time.sleep() function is also used to make the BottomSheet automatically disappear after 5 seconds (this is also optional). You can choose how you would like the BottomSheet to be dismissed. There are other properties that can also be changed such as the background colour, etc. You can check out Flet’s documentation here.

	import flet as ft
	import time

	def main(page: ft.Page):
	def bottomsheet_dismissed(e):
	print("BottomSheet dismissed!")

	def show_bottomsheet(e):
	# Show the BottomSheet control
	bottomsheet.open = True
	bottomsheet.update()
	# Hide the BottomSheet after 5 seconds
	time.sleep(5)
	bottomsheet.open = False
	bottomsheet.update()

	def close_bottomsheet(e):
	# Hide the BottomSheet when Dismiss button clicked
	bottomsheet.open = False
	bottomsheet.update()

	bottomsheet = ft.BottomSheet(
	ft.Container(
	ft.Column(
	[
	ft.Text("This is BottomSheet's content!"),
	ft.ElevatedButton("Dismiss", on_click=close_bottomsheet),
	],
	tight=True,
	),
	padding=10,
	),
	open=True,
	on_dismiss=bottomsheet_dismissed,
	)
	page.overlay.append(bottomsheet)
	page.add(ft.ElevatedButton("Display bottom sheet", on_click=show_bottomsheet))

	ft.app(target=main)

view raw app.py hosted with ❤ by GitHub

Here is a screenshot of a BottomSheet using the code above.

Example of a BottomSheet displayed at the bottom of the screen. It is showing some text and a Dismiss button.

SnackBars

SnackBars are similar to BottomSheets, however, they spread out across the bottom of the screen (from the left edge to the right edge of the window) and automatically dismiss after a few seconds. They also allow the user to continue interacting with other parts of the screen while the SnackBar is displayed. Here is some example code for a simple SnackBar.

	import flet as ft

	def main(page):

	def on_click(e):
	page.snack_bar = ft.SnackBar(ft.Text(f"Hello, world!"))
	page.snack_bar.open = True
	page.update()

	page.add(ft.ElevatedButton("Open SnackBar", on_click=on_click))

	ft.app(target=main)

view raw app.py hosted with ❤ by GitHub

Here is an example of a SnackBar using the above code.

Screenshot of a small window with a SnackBar display at the bottom of the window. The SnackBar is a small panel displaying the message "Hello, world!"

Next lesson: Layouts