Skip to content

AlertDialog

Can be used to inform the user about situations that require acknowledgement.

It 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.

Inherits: DialogControl

Properties

Examples#

Live example

import flet as ft


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

    dialog = ft.AlertDialog(
        title=ft.Text("Hello"),
        content=ft.Text("You are notified!"),
        alignment=ft.Alignment.CENTER,
        on_dismiss=lambda e: print("Dialog dismissed!"),
        title_padding=ft.Padding.all(25),
    )

    modal_dialog = 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=lambda e: page.pop_dialog()),
            ft.TextButton("No", on_click=lambda e: page.pop_dialog()),
        ],
        actions_alignment=ft.MainAxisAlignment.END,
        on_dismiss=lambda e: print("Modal dialog dismissed!"),
    )

    page.add(
        ft.Button(
            content="Open dialog",
            on_click=lambda e: page.show_dialog(dialog),
        ),
        ft.Button(
            content="Open modal dialog",
            on_click=lambda e: page.show_dialog(modal_dialog),
        ),
    )


ft.run(main)

modal-and-non-modal

Properties#

action_button_padding #

action_button_padding: PaddingValue | None = None

The padding that surrounds each button in actions.

actions #

actions: list[Control] = field(default_factory=list)

A set of actions that are displayed at the bottom of this dialog.

Typically this is a list of TextButton controls.

Raises:

actions_alignment #

actions_alignment: MainAxisAlignment | None = None

Defines the horizontal layout of the actions.

Internally defaults to MainAxisAlignment.END.

actions_overflow_button_spacing #

actions_overflow_button_spacing: Number | None = None

The spacing between actions when the OverflowBar switches to a column layout because the actions don't fit horizontally.

If the controls in actions do not fit into a single row, they are arranged into a column. This parameter provides additional vertical space between buttons when it does overflow.

actions_padding #

actions_padding: PaddingValue | None = None

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

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

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

alignment #

alignment: Alignment | None = None

How to align this dialog.

If None, then DialogTheme.alignment is used. If that is also None, the default is Alignment.CENTER.

barrier_color #

barrier_color: ColorValue | None = None

The color of the modal barrier that darkens everything below this dialog.

If None, then DialogTheme.barrier_color is used. If that is also None, the default is Colors.BLACK_54.

bgcolor #

bgcolor: ColorValue | None = None

The background color of this dialog's surface.

clip_behavior #

clip_behavior: ClipBehavior = NONE

Defines how the contents of this dialog are clipped (or not) to the given shape.

content #

content: Control | None = None

The content of this dialog is displayed in the center of this dialog in a lighter font.

Typically this is a Column that contains this dialog's Text message.

content_padding #

content_padding: PaddingValue | None = None

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 this dialog.

content_text_style #

content_text_style: TextStyle | None = None

The style for the text in the content of this dialog.

If None, DialogTheme.content_text_style is used. If that's is also None, defaults to TextTheme.body_medium (if Theme.use_material3 is True; TextTheme.title_medium otherwise) of Theme.text_theme.

elevation #

elevation: Number | None = None

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

icon #

icon: Control | None = None

A control that is displayed at the top of this dialog.

Typically a Icon control.

icon_color #

icon_color: ColorValue | None = None

The color for the Icon in the icon of this dialog.

If None, DialogTheme.icon_color is used. If that is null, defaults to color scheme's ColorScheme.secondary if Theme.use_material3 is True, Colors.BLACK otherwise.

icon_padding #

icon_padding: PaddingValue | None = None

Padding around the icon.

inset_padding #

inset_padding: PaddingValue | None = None

Padding around this dialog itself.

Defaults to Padding.symmetric(vertical=40, horizontal=24) - 40 pixels horizontally and 24 pixels vertically outside of this dialog box.

modal #

modal: bool = False

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

scrollable #

scrollable: bool = False

Determines whether the title and content controls are wrapped in a scrollable.

This configuration is used when the title and content are expected to overflow. Both title and content are wrapped in a scroll view, allowing all overflowed content to be visible while still showing the button bar.

semantics_label #

semantics_label: str | None = None

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

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

shadow_color #

shadow_color: ColorValue | None = None

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

shape #

shape: OutlinedBorder | None = None

The shape of this dialog.

If None, defaults to DialogTheme.shape. If it is also None, it defaults to RoundedRectangleBorder(radius=4.0).

title #

title: StrOrControl | None = None

The title of this dialog is displayed in a large font at its top.

Typically a Text control.

title_padding #

title_padding: PaddingValue | None = None

Padding around the title.

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

Defaults to 24 pixels on the top, left, and right of the title. If the content is not None, then no bottom padding is provided (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.

title_text_style #

title_text_style: TextStyle | None = None

TBD