AlertDialog
Examples#
Modal and non-modal dialogs#
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.ElevatedButton(
content="Open dialog",
on_click=lambda e: page.show_dialog(dialog),
),
ft.ElevatedButton(
content="Open modal dialog",
on_click=lambda e: page.show_dialog(modal_dialog),
),
)
ft.run(main)
Bases: DialogControl
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.
| RAISES | DESCRIPTION |
|---|---|
AssertionError
|
action_button_padding: PaddingValue | None = None
The padding that surrounds each button in actions.
A set of actions that are displayed at the bottom of this dialog.
Typically this is a list of TextButton
controls.
actions_alignment: MainAxisAlignment | None = None
Defines the horizontal layout of the actions.
Internally defaults to MainAxisAlignment.END.
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: 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.
adaptive: bool | None = None
Enables platform-specific rendering or inheritance of adaptiveness from parent controls.
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: 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.
clip_behavior: ClipBehavior = NONE
Defines how the contents of this dialog are clipped (or not) to the given shape.
col: ResponsiveNumber = 12
If a parent of this control is a ResponsiveRow,
this property is used to determine
how many virtual columns of a screen this control will span.
Can be a number or a dictionary configured to have a different value for specific
breakpoints, for example col={"sm": 6}.
This control spans the 12 virtual columns by default.
Dimensions
| Breakpoint | Dimension |
|---|---|
| xs | <576px |
| sm | ≥576px |
| md | ≥768px |
| lg | ≥992px |
| xl | ≥1200px |
| xxl | ≥1400px |
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: 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
of Theme.text_theme if Theme.use_material3
is True, TextTheme.title_medium otherwise.
disabled: bool = False
Every control has disabled property which is False by default - control and all
its children are enabled.
Note
The value of this property will be propagated down to all children controls recursively.
elevation: Number | None = None
Defines the elevation (z-coordinate) at which this dialog should appear.
expand_loose: bool = False
Allows the control to expand along the main axis if space is available, but does not require it to fill all available space.
More information here.
icon: Control | None = None
A control that is displayed at the top of this dialog.
Typically a Icon control.
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.
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: bool = False
Whether dialog can be dismissed/closed by clicking the area outside of it.
on_dismiss: ControlEventHandler[DialogControl] | None = None
Called when dialog is dismissed.
opacity: Number = 1.0
Defines the transparency of the control.
Value ranges from 0.0 (completely transparent) to 1.0 (completely opaque
without any transparency).
The page (of type Page or PageView) to which this control belongs to.
parent: BaseControl | None
The direct ancestor(parent) of this control.
It defaults to None and will only have a value when this control is mounted (added to the page tree).
The Page control (which is the root of the tree) is an exception - it always has parent=None.
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.
In iOS, if this label is not provided, a semantic label will be inferred from the
title if it is not null.
shadow_color: ColorValue | None = None
The color used to paint a drop shadow under this dialog, which reflects this dialog's elevation.
shape: OutlinedBorder | None = None
The shape of this dialog.
Defaults to DialogTheme.shape. If it is not set,
it defaults to RoundedRectangleBorder(radius=4.0).
surface_tint_color: ColorValue | None = None
The color used as a surface tint overlay on this dialog's background color, which reflects this dialog's elevation.
title: StrOrControl | None = None
The title of this dialog is displayed in a large font at its top.
Typically a Text control.
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 providing 24 pixels on the top, left, and right of the title.
If the content is not None, 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.
tooltip: TooltipValue | None = None
The tooltip ot show when this control is hovered over.
visible: bool = True
Every control has visible property which is True by default - control is
rendered on the page. Setting visible to False completely prevents control (and
all its children if any) from rendering on a page canvas. Hidden controls cannot be
focused or selected with a keyboard or mouse and they do not emit any events.