Skip to main 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.

Properties

Content

title
str | Control
The title of this dialog is displayed in a large font at its top. Typically a Text control.
content
Control
The content of this dialog is displayed in the center of this dialog in a lighter font. Typically a Column that contains this dialog’s Text message.
actions
list[Control]
default:"[]"
A set of actions that are displayed at the bottom of this dialog. Typically this is a list of TextButton controls.At least one of title, content, or actions must be provided, as the dialog would have nothing to display otherwise.
icon
Control
A control that is displayed at the top of this dialog. Typically an Icon control.

Behavior

modal
bool
default:"False"
Whether dialog can be dismissed/closed by clicking the area outside of it.
open
bool
default:"False"
Whether the dialog is currently displayed. Set to True to show the dialog.
scrollable
bool
default:"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.

Styling

bgcolor
ColorValue
The background color of this dialog’s surface.
elevation
Number
Defines the elevation (z-coordinate) at which this dialog should appear.
shape
OutlinedBorder
The shape of this dialog. If None, defaults to DialogTheme.shape. If it is also None, it defaults to RoundedRectangleBorder(radius=4.0).
shadow_color
ColorValue
The color used to paint a drop shadow under this dialog, which reflects this dialog’s elevation.
icon_color
ColorValue
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.
barrier_color
ColorValue
The color of the modal barrier below this dialog. If None, then DialogTheme.barrier_color is used. If that is also None, the default is Colors.BLACK_54.
clip_behavior
ClipBehavior
default:"ClipBehavior.NONE"
Defines how the contents of this dialog are clipped (or not) to the given shape.

Padding

title_padding
PaddingValue
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.
content_padding
PaddingValue
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.
actions_padding
PaddingValue
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 there are no actions, then no padding will be included. The padding around the button bar defaults to zero.
inset_padding
PaddingValue
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.
icon_padding
PaddingValue
Padding around the icon.
action_button_padding
PaddingValue
The padding that surrounds each button in actions.

Layout

actions_alignment
MainAxisAlignment
Defines the horizontal layout of the actions. Internally defaults to MainAxisAlignment.END.
actions_overflow_button_spacing
Number
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.
alignment
Alignment
How to align this dialog. If None, then DialogTheme.alignment is used. If that is also None, the default is Alignment.CENTER.

Text Styles

title_text_style
TextStyle
The text style for the title of this dialog.
content_text_style
TextStyle
The style for the text in the content of this dialog. If None, DialogTheme.content_text_style is used. If that’s also None, defaults to TextTheme.body_medium (if Theme.use_material3 is True; TextTheme.title_medium otherwise) of Theme.text_theme.

Accessibility

semantics_label
str
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.

Example

import flet as ft

def main(page: ft.Page):
    def close_dialog(e):
        dialog.open = False
        page.update()
    
    def open_dialog(e):
        dialog.open = True
        page.update()
    
    dialog = ft.AlertDialog(
        title=ft.Text("Session expired"),
        content=ft.Text("Please sign in again to continue."),
        actions=[
            ft.TextButton("Cancel", on_click=close_dialog),
            ft.TextButton("Sign in", on_click=close_dialog),
        ],
    )
    
    page.overlay.append(dialog)
    
    page.add(
        ft.ElevatedButton("Show Dialog", on_click=open_dialog)
    )

ft.app(target=main)

Advanced Example

import flet as ft

def main(page: ft.Page):
    def delete_file(e):
        print("File deleted")
        warning_dialog.open = False
        page.update()
    
    def cancel_delete(e):
        warning_dialog.open = False
        page.update()
    
    def show_warning(e):
        warning_dialog.open = True
        page.update()
    
    warning_dialog = ft.AlertDialog(
        modal=True,
        icon=ft.Icon(ft.Icons.WARNING_AMBER_ROUNDED, size=50, color=ft.Colors.AMBER),
        title=ft.Text("Delete File?"),
        content=ft.Column([
            ft.Text("This action cannot be undone."),
            ft.Text("Are you sure you want to delete this file?"),
        ], tight=True, spacing=5),
        actions=[
            ft.TextButton("Cancel", on_click=cancel_delete),
            ft.FilledButton(
                "Delete",
                on_click=delete_file,
                style=ft.ButtonStyle(
                    bgcolor=ft.Colors.RED,
                    color=ft.Colors.WHITE
                )
            ),
        ],
        actions_alignment=ft.MainAxisAlignment.END,
        bgcolor=ft.Colors.SURFACE_VARIANT,
        shape=ft.RoundedRectangleBorder(radius=10),
    )
    
    page.overlay.append(warning_dialog)
    
    page.add(
        ft.ElevatedButton("Delete File", on_click=show_warning)
    )

ft.app(target=main)
import flet as ft

def main(page: ft.Page):
    def close_modal(e):
        modal_dialog.open = False
        page.update()
    
    def open_modal(e):
        modal_dialog.open = True
        page.update()
    
    modal_dialog = ft.AlertDialog(
        modal=True,  # User must interact with dialog
        title=ft.Text("Terms and Conditions"),
        content=ft.Text(
            "By clicking 'Agree', you accept our terms and conditions. "
            "This is a modal dialog, so you must make a choice."
        ),
        actions=[
            ft.TextButton("Disagree", on_click=close_modal),
            ft.FilledButton("Agree", on_click=close_modal),
        ],
    )
    
    page.overlay.append(modal_dialog)
    
    page.add(
        ft.ElevatedButton("Show Terms", on_click=open_modal)
    )

ft.app(target=main)

Build docs developers (and LLMs) love