Skip to main content

AlertDialog

A material design alert dialog.

An alert dialog informs the user about situations that require acknowledgement. An alert dialog has an optional title and an optional list of actions. The title is displayed above the content and the actions are displayed below the content.

Examples​

Live example

Basic and modal dialogs​

import flet as ft

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

    dlg = ft.AlertDialog(
        title=ft.Text("Hello, you!"), on_dismiss=lambda e: print("Dialog dismissed!")
    )

    def close_dlg(e):
        dlg_modal.open = False
        page.update()

    dlg_modal = ft.AlertDialog(
        modal=True,
        title=ft.Text("Please confirm"),
        content=ft.Text("Do you really want to delete all those files?"),
        actions=[
            ft.TextButton("Yes", on_click=close_dlg),
            ft.TextButton("No", on_click=close_dlg),
        ],
        actions_alignment=ft.MainAxisAlignment.END,
        on_dismiss=lambda e: print("Modal dialog dismissed!"),
    )

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

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

    page.add(
        ft.ElevatedButton("Open dialog", on_click=open_dlg),
        ft.ElevatedButton("Open modal dialog", on_click=open_dlg_modal),
    )

ft.app(target=main)

Properties​

actions​

The (optional) set of actions that are displayed at the bottom of the dialog.

Typically this is a list of TextButton controls.

action_button_padding​

The padding that surrounds each button in actions.

actions_alignment​

Defines the horizontal layout of the actions according to the same rules as for Row.alignment.

Property value is MainAxisAlignment enum with MainAxisAlignment.END as default.

actions_padding​

Padding around the set of actions at the bottom of the dialog.

Typically used to provide padding to the button bar between the button bar and the edges of the dialog.

If are no actions, then no padding will be included. The padding around the button bar defaults to zero.

See Container.padding for more information about padding and possible values.

adaptive​

If the value is True, an adaptive AlertDialog is created based on whether the target platform is iOS/macOS.

On iOS and macOS, a CupertinoAlertDialog is created, which has matching functionality and presentation as AlertDialog, and the graphics as expected on iOS. On other platforms, a Material AlertDialog is created.

The default value is False. See the example of usage here.

bgcolor​

The background color of the dialog's surface.

clip_behavior​

Controls how the contents of the dialog are clipped (or not) to the given shape. See Container.clip_behavior for possible values.

Defaults to ClipBehavior.NONE.

content​

The (optional) content of the dialog is displayed in the center of the dialog in a lighter font. Typically this is a Column that contains the dialog's Text message.

content_padding​

Padding around the content.

If there is no content, no padding will be provided. Otherwise, padding of 20 pixels is provided above the content to separate the content from the title, and padding of 24 pixels is provided on the left, right, and bottom to separate the content from the other edges of the dialog.

See Container.padding for more information about padding and possible values.

elevation​

Defines the elevation (z-coordinate) at which the dialog should appear.

icon​

A control that is displayed at the top of the dialog. Typically a Icon control.

icon_padding​

Padding around the icon.

inset_padding​

Padding around the Dialog itself.

The default values of this property are 40 pixels horizontally and 24 pixels vertically outside of the dialog box. (padding.symmetric(vertical=40, horizontal=24))

See Container.padding for more information about padding and possible values.

Whether dialog can be dismissed/closed by clicking the area outside of it.

open​

Set to True to display a dialog.

semantics_label​

The semantic label of the dialog used by accessibility frameworks to announce screen transitions when the dialog is opened and closed.

In iOS, if this label is not provided, a semantic label will be inferred from the title if it is not null.

shadow_color​

The color used to paint a drop shadow under the dialog, which reflects the dialog's elevation.

shape​

The shape of the dialog's border. See FloatingActionButton.shape for possible values.

The default shape is a RoundedRectangleBorder with a radius of 4.0.

surface_tint_color​

The color used as a surface tint overlay on the dialog's background color, which reflects the dialog's elevation.

title​

The (optional) title of the dialog is displayed in a large font at the top of the dialog.

Typically a Text control.

title_padding​

Padding around the title.

If there is no title, no padding will be provided. Otherwise, this padding is used.

This property defaults to providing 24 pixels on the top, left, and right of the title. If the content is not null, then no bottom padding is provided (but see content_padding). If it is not set, then an extra 20 pixels of bottom padding is added to separate the title from the actions.

See Container.padding for more information about padding and possible values.

Events​

on_dismiss​

Fires when dialog is dismissed.