Chip
Examples#
Assist chips#
Assist chips are chips with leading icon and on_click event specified.
They represent smart or automated actions that appear dynamically and contextually in a UI.
An alternative to assist chips are buttons, which should appear persistently and consistently.
import flet as ft
def main(page: ft.Page):
def handle_chip1_click(e: ft.Event[ft.Chip]):
e.control.label.value = "Saved to favorites"
e.control.leading = ft.Icon(ft.Icons.FAVORITE_OUTLINED)
e.control.disabled = True
page.update()
async def handle_chip2_click(e: ft.Event[ft.Chip]):
await page.launch_url("https://maps.google.com")
page.update()
page.add(
ft.Row(
controls=[
ft.Chip(
label=ft.Text("Save to favourites"),
leading=ft.Icon(ft.Icons.FAVORITE_BORDER_OUTLINED),
bgcolor=ft.Colors.GREEN_200,
disabled_color=ft.Colors.GREEN_100,
autofocus=True,
on_click=handle_chip1_click,
),
ft.Chip(
label=ft.Text("9 min walk"),
leading=ft.Icon(ft.Icons.MAP_SHARP),
bgcolor=ft.Colors.GREEN_200,
on_click=handle_chip2_click,
),
]
)
)
ft.run(main)
Filter chips#
Filter chips are chips with on_select event specified.
They use tags or descriptive words provided in the label to filter content.
They can be a good alternative to switches or checkboxes.
import flet as ft
def main(page: ft.Page):
def handle_amenity_selection(e: ft.Event[ft.Chip]):
page.update()
amenities = ["Washer / Dryer", "Ramp access", "Dogs OK", "Cats OK", "Smoke-free"]
page.add(
ft.Row(controls=[ft.Icon(ft.Icons.HOTEL_CLASS), ft.Text("Amenities")]),
ft.Row(
controls=[
ft.Chip(
label=ft.Text(amenity),
bgcolor=ft.Colors.GREEN_200,
disabled_color=ft.Colors.GREEN_100,
autofocus=True,
on_select=handle_amenity_selection,
)
for amenity in amenities
]
),
)
ft.run(main)
Bases: LayoutControl
Chips are compact elements that represent an attribute, text, entity, or action.
| RAISES | DESCRIPTION |
|---|---|
AssertionError
|
If |
AssertionError
|
autofocus: bool = False
Whether this chip will be selected as the initial focus.
If there is more than one control on a page with autofocus set, then the first one added to the page will get focus.
bgcolor: ColorValue | None = None
Color to be used for the unselected, enabled chip's background.
border_side: BorderSide | None = None
Defines the color and weight of this chip's outline.
check_color: ColorValue | None = None
The color of this chip's check mark when a check mark is visible.
clip_behavior: ClipBehavior = NONE
The content will be clipped (or not) according to this option.
color: ControlStateValue[ColorValue] | None = None
The color that fills this chip in various ControlState.
delete_drawer_animation_style: AnimationStyle | None = None
The animation style for the delete_icon's animations.
delete_icon_size_constraints: BoxConstraints | None = None
The size constraints for the delete_icon control.
If None, it defaults to a minimum size of chip height or label height
(whichever is greater) and a padding of 8.0 pixels on all sides.
delete_icon_tooltip: str | None = None
The text to be used for this chip's delete_icon tooltip. If not provided or
provided with an empty string, the tooltip of the delete icon will not be displayed.
disabled_color: ColorValue | None = None
The color used for this chip's background if it is disabled.
elevation: Number | None = None
A non-negative value which defines the size of the shadow below this chip.
Defaults to 0.
elevation_on_click: Number | None = None
The elevation to be applied on this chip relative to its parent during the press motion. This controls the size of the shadow below this chip.
Defaults to 8.0.
Note
Must be non-negative.
enable_animation_style: AnimationStyle | None = None
The animation style for the enable and disable animations.
label_padding: PaddingValue | None = None
label_text_style: TextStyle | None = None
The style to be applied to this chip's label.
leading: Control | None = None
A Control to display to the left of this chip's label.
Typically the leading control is an Icon or a CircleAvatar.
leading_drawer_animation_style: AnimationStyle | None = None
The animation style for the leading control's animations.
leading_size_constraints: BoxConstraints | None = None
The size constraints for the leading control.
If None, it defaults to a minimum size of chip height or label height
(whichever is greater) and a padding of 8.0 pixels on all sides.
on_click: ControlEventHandler[Chip] | None = None
Called when the user clicks on this chip.
Note
Cannot be specified together with on_select.
on_delete: ControlEventHandler[Chip] | None = None
Called when the user clicks on the delete_icon.
on_focus: ControlEventHandler[Chip] | None = None
Called when this chip has received focus.
on_select: ControlEventHandler[Chip] | None = None
padding: PaddingValue | None = None
The padding between the label and the outside shape.
Defaults to 8 logical pixels on all sides.
select_animation_style: AnimationStyle | None = None
The animation style for the select and unselect animations.
selected: bool = False
If on_select event is specified, selected property is used to
determine whether this chip is selected or not.
selected_color: ColorValue | None = None
The color used for this chip's background when it is selected.
selected_shadow_color: ColorValue | None = None
The color used for this chip's background
when the elevation is greater than 0 and this chip is selected.
shadow_color: ColorValue | None = None
The color used for this chip's background
when the elevation is greater than 0 and this chip is not selected.
shape: OutlinedBorder | None = None
The shape of the border around this chip.
Defaults to ChipTheme.shape, or if that is resolves to
None, falls back to RoundedRectangleBorder(radius=8).