ButtonStyle
ButtonStyle
#
Allows controlling all visual aspects of a button, such as shape, foreground, background and shadow colors, content padding, border width and radius.
Most of these style attributes could be configured for all or particular
ControlState
of a button,
such as HOVERED
, FOCUSED
, DISABLED
and others.
animation_duration
#
animation_duration: DurationValue | None = None
Defines the duration in milliseconds of animated changes for shape and elevation.
color
#
color: ControlStateValue[ColorValue] | None = None
The color for the button's Text and Icon control descendants.
elevation
#
elevation: ControlStateValue[Number | None] | None = None
The elevation of the button's Material.
enable_feedback
#
enable_feedback: bool | None = None
Whether detected gestures should provide acoustic and/or haptic feedback.
icon_color
#
icon_color: ControlStateValue[ColorValue] | None = None
The icon's color inside the button.
If not set or None
, then the color
will be used.
icon_size
#
icon_size: ControlStateValue[Number | None] | None = None
The icon's size inside of the button.
mouse_cursor
#
mouse_cursor: ControlStateValue[MouseCursor] | None = None
The cursor to be displayed when the mouse pointer enters or is hovering over the button.
overlay_color
#
overlay_color: ControlStateValue[ColorValue] | None = None
The highlight color that's typically used to indicate that the button is focused, hovered, or pressed.
padding
#
padding: ControlStateValue[PaddingValue] | None = None
The padding between the button's boundary and its content.
shadow_color
#
shadow_color: ControlStateValue[ColorValue] | None = None
The shadow color of the button's Material.
shape
#
shape: ControlStateValue[OutlinedBorder] | None = None
The shape of the button's underlying Material.
surface_tint_color
#
surface_tint_color: ControlStateValue[ColorValue] | None = (
None
)
The surface tint color of the button's Material.
text_style
#
text_style: ControlStateValue[TextStyle] | None = None
The text style of the button's Text
control descendants.
visual_density
#
visual_density: VisualDensity | None = None
Defines how compact the button's layout will be.
copy_with
#
copy_with(
*,
color: ControlStateValue[ColorValue] | None = None,
bgcolor: ControlStateValue[ColorValue] | None = None,
overlay_color: ControlStateValue[ColorValue]
| None = None,
shadow_color: ControlStateValue[ColorValue]
| None = None,
surface_tint_color: ControlStateValue[ColorValue]
| None = None,
elevation: ControlStateValue[Number | None]
| None = None,
animation_duration: DurationValue | None = None,
padding: ControlStateValue[PaddingValue] | None = None,
side: ControlStateValue[BorderSide] | None = None,
shape: ControlStateValue[OutlinedBorder] | None = None,
alignment: Alignment | None = None,
enable_feedback: bool | None = None,
text_style: ControlStateValue[TextStyle] | None = None,
icon_size: ControlStateValue[Number | None]
| None = None,
icon_color: ControlStateValue[ColorValue] | None = None,
visual_density: VisualDensity | None = None,
mouse_cursor: ControlStateValue[MouseCursor]
| None = None,
) -> ButtonStyle
Returns a copy of this object with the specified properties overridden.
Usage example#
You can configure a different shape, background color for a hovered state and configure fallback values for all other states.
To configure style attribute for all Material states set its value to a literal (or class instance). For example, if you set color
property to a literal the value will be applied to all button states:
To configure style attribute for specific Material states set its value to a dictionary where the key is state name. For example, to configure different background colors for HOVERED
and FOCUSED
states and another colors for all other states:
ButtonStyle(
color={
ft.ControlState.HOVERED: ft.Colors.WHITE,
ft.ControlState.FOCUSED: ft.Colors.BLUE,
ft.ControlState.DEFAULT: ft.Colors.BLACK,
}
)
Various button shapes example#
import flet as ft
def main(page: ft.Page):
page.padding = 30
page.spacing = 30
page.add(
ft.FilledButton(
"Stadium",
style=ft.ButtonStyle(
shape=ft.StadiumBorder(),
),
),
ft.FilledButton(
"Rounded rectangle",
style=ft.ButtonStyle(
shape=ft.RoundedRectangleBorder(radius=10),
),
),
ft.FilledButton(
"Continuous rectangle",
style=ft.ButtonStyle(
shape=ft.ContinuousRectangleBorder(radius=30),
),
),
ft.FilledButton(
"Beveled rectangle",
style=ft.ButtonStyle(
shape=ft.BeveledRectangleBorder(radius=10),
),
),
ft.FilledButton(
"Circle",
style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30),
),
)
ft.run(main)
Styled button example#
Check the following example:
import flet as ft
def main(page: ft.Page):
page.add(
ft.ElevatedButton(
"Styled button 1",
style=ft.ButtonStyle(
color={
ft.ControlState.HOVERED: ft.Colors.WHITE,
ft.ControlState.FOCUSED: ft.Colors.BLUE,
ft.ControlState.DEFAULT: ft.Colors.BLACK,
},
bgcolor={ft.ControlState.FOCUSED: ft.Colors.PINK_200, "": ft.Colors.YELLOW},
padding={ft.ControlState.HOVERED: 20},
overlay_color=ft.Colors.TRANSPARENT,
elevation={"pressed": 0, "": 1},
animation_duration=500,
side={
ft.ControlState.DEFAULT: ft.BorderSide(1, ft.Colors.BLUE),
ft.ControlState.HOVERED: ft.BorderSide(2, ft.Colors.BLUE),
},
shape={
ft.ControlState.HOVERED: ft.RoundedRectangleBorder(radius=20),
ft.ControlState.DEFAULT: ft.RoundedRectangleBorder(radius=2),
},
),
)
)
ft.run(main)