tessl/pypi-flet

Flet is a rich User Interface framework to quickly build interactive web, desktop and mobile apps in Python without prior knowledge of web technologies.

—

Pending

Overview

Eval results

Files

UI Controls

Name: tessl/pypi-flet
Author: tessl

This document covers Flet's comprehensive UI control library, including basic display controls, input controls, buttons, dialogs, and selection controls.

Import

import flet as ft

Basic Display Controls

Text

class Text(Control):
    """Text display control."""
    
    def __init__(
        self,
        value: str = None,
        size: float = None,
        color: str = None,
        bgcolor: str = None,
        weight: FontWeight = None,
        italic: bool = None,
        font_family: str = None,
        text_align: TextAlign = None,
        overflow: TextOverflow = None,
        max_lines: int = None,
        selectable: bool = None,
        spans: List[TextSpan] = None,
        style: TextStyle = None,
        **kwargs
    )

Parameters:

value (str, optional): Text content to display
size (float, optional): Font size in logical pixels
color (str, optional): Text color
bgcolor (str, optional): Background color
weight (FontWeight, optional): Font weight (NORMAL, BOLD, etc.)
italic (bool, optional): Whether text is italicized
font_family (str, optional): Font family name
text_align (TextAlign, optional): Text alignment (LEFT, CENTER, RIGHT, etc.)
overflow (TextOverflow, optional): How to handle text overflow
max_lines (int, optional): Maximum number of lines
selectable (bool, optional): Whether text can be selected
spans (List[TextSpan], optional): Rich text spans
style (TextStyle, optional): Advanced text styling

Example:

ft.Text(
    "Hello, World!",
    size=30,
    color=ft.colors.BLUE,
    weight=ft.FontWeight.BOLD,
    text_align=ft.TextAlign.CENTER
)

Icon

class Icon(Control):
    """Icon display control."""
    
    def __init__(
        self,
        name: str = None,
        color: str = None,
        size: float = None,
        tooltip: str = None,
        **kwargs
    )

Parameters:

name (str, optional): Icon name from Icons or CupertinoIcons
color (str, optional): Icon color
size (float, optional): Icon size in logical pixels
tooltip (str, optional): Tooltip text on hover

Example:

ft.Icon(
    ft.icons.FAVORITE,
    color=ft.colors.PINK,
    size=30
)

Image

class Image(Control):
    """Image display control."""
    
    def __init__(
        self,
        src: str = None,
        src_base64: str = None,
        width: float = None,
        height: float = None,
        fit: ImageFit = None,
        repeat: ImageRepeat = None,
        border_radius: BorderRadiusValue = None,
        tooltip: str = None,
        color: str = None,
        color_blend_mode: BlendMode = None,
        **kwargs
    )

Parameters:

src (str, optional): Image URL or asset path
src_base64 (str, optional): Base64-encoded image data
width (float, optional): Image width
height (float, optional): Image height
fit (ImageFit, optional): How image should fit in its container
repeat (ImageRepeat, optional): Image repeat behavior
border_radius (BorderRadiusValue, optional): Border radius
tooltip (str, optional): Tooltip text
color (str, optional): Color overlay
color_blend_mode (BlendMode, optional): Color blending mode

Example:

ft.Image(
    src="https://picsum.photos/200/200?1",
    width=200,
    height=200,
    fit=ft.ImageFit.COVER,
    border_radius=ft.border_radius.all(10)
)

Divider

class Divider(Control):
    """Horizontal divider line."""
    
    def __init__(
        self,
        height: float = None,
        thickness: float = None,
        color: str = None,
        **kwargs
    )

Parameters:

height (float, optional): Divider height including padding
thickness (float, optional): Line thickness
color (str, optional): Divider color

VerticalDivider

class VerticalDivider(Control):
    """Vertical divider line."""
    
    def __init__(
        self,
        width: float = None,
        thickness: float = None,
        color: str = None,
        **kwargs
    )

Parameters:

width (float, optional): Divider width including padding
thickness (float, optional): Line thickness
color (str, optional): Divider color

Input Controls

TextField

class TextField(Control):
    """Text input field."""
    
    def __init__(
        self,
        value: str = None,
        label: str = None,
        hint_text: str = None,
        helper_text: str = None,
        error_text: str = None,
        prefix_text: str = None,
        prefix_icon: str = None,
        suffix_text: str = None,
        suffix_icon: str = None,
        password: bool = None,
        can_reveal_password: bool = None,
        multiline: bool = None,
        min_lines: int = None,
        max_lines: int = None,
        max_length: int = None,
        keyboard_type: KeyboardType = None,
        text_capitalization: TextCapitalization = None,
        input_filter: InputFilter = None,
        filled: bool = None,
        border: InputBorder = None,
        border_radius: BorderRadiusValue = None,
        border_color: str = None,
        border_width: float = None,
        focused_border_color: str = None,
        focused_border_width: float = None,
        color: str = None,
        bgcolor: str = None,
        text_size: float = None,
        text_style: TextStyle = None,
        label_style: TextStyle = None,
        hint_style: TextStyle = None,
        helper_style: TextStyle = None,
        error_style: TextStyle = None,
        prefix_style: TextStyle = None,
        suffix_style: TextStyle = None,
        cursor_color: str = None,
        selection_color: str = None,
        autofocus: bool = None,
        shift_enter: bool = None,
        read_only: bool = None,
        show_cursor: bool = None,
        content_padding: PaddingValue = None,
        dense: bool = None,
        collapsed: bool = None,
        on_change: callable = None,
        on_submit: callable = None,
        on_focus: callable = None,
        on_blur: callable = None,
        **kwargs
    )

Key Parameters:

value (str, optional): Initial text value
label (str, optional): Label text displayed above field
hint_text (str, optional): Placeholder text
helper_text (str, optional): Helper text below field
error_text (str, optional): Error message
password (bool, optional): Whether to obscure text
multiline (bool, optional): Allow multiple lines
keyboard_type (KeyboardType, optional): Virtual keyboard type
on_change (callable, optional): Callback for text changes
on_submit (callable, optional): Callback for form submission

Example:

def handle_change(e):
    print(f"Text changed to: {e.control.value}")

ft.TextField(
    label="Username",
    hint_text="Enter your username",
    prefix_icon=ft.icons.PERSON,
    on_change=handle_change
)

Checkbox

class Checkbox(Control):
    """Checkbox input control."""
    
    def __init__(
        self,
        value: bool = None,
        tristate: bool = None,
        label: str = None,
        check_color: str = None,
        fill_color: str = None,
        overlay_color: str = None,
        splash_radius: float = None,
        active_color: str = None,
        inactive_color: str = None,
        focus_color: str = None,
        hover_color: str = None,
        autofocus: bool = None,
        on_change: callable = None,
        on_focus: callable = None,
        on_blur: callable = None,
        **kwargs
    )

Parameters:

value (bool, optional): Checkbox state (True/False/None for tristate)
tristate (bool, optional): Allow three states (checked/unchecked/null)
label (str, optional): Label text
check_color (str, optional): Checkmark color
fill_color (str, optional): Fill color when checked
on_change (callable, optional): Callback for state changes

Example:

ft.Checkbox(
    label="I agree to the terms",
    value=False,
    on_change=lambda e: print(f"Checkbox changed to {e.control.value}")
)

Radio

class Radio(Control):
    """Radio button control."""
    
    def __init__(
        self,
        value: str = None,
        group_value: str = None,
        label: str = None,
        active_color: str = None,
        inactive_color: str = None,
        fill_color: str = None,
        overlay_color: str = None,
        splash_radius: float = None,
        focus_color: str = None,
        hover_color: str = None,
        autofocus: bool = None,
        toggle_on_label_click: bool = None,
        on_change: callable = None,
        on_focus: callable = None,
        on_blur: callable = None,
        **kwargs
    )

Parameters:

value (str, optional): Radio button value
group_value (str, optional): Currently selected value in group
label (str, optional): Label text
active_color (str, optional): Color when selected
on_change (callable, optional): Callback for selection changes

RadioGroup

class RadioGroup(Control):
    """Radio button group container."""
    
    def __init__(
        self,
        value: str = None,
        content: Control = None,
        on_change: callable = None,
        **kwargs
    )

Example:

ft.RadioGroup(
    content=ft.Column([
        ft.Radio(value="red", label="Red"),
        ft.Radio(value="green", label="Green"),
        ft.Radio(value="blue", label="Blue"),
    ]),
    on_change=lambda e: print(f"Selected: {e.control.value}")
)

Switch

class Switch(Control):
    """Toggle switch control."""
    
    def __init__(
        self,
        value: bool = None,
        label: str = None,
        active_color: str = None,
        active_track_color: str = None,
        inactive_thumb_color: str = None,
        inactive_track_color: str = None,
        focus_color: str = None,
        hover_color: str = None,
        overlay_color: str = None,
        splash_radius: float = None,
        thumb_color: str = None,
        track_color: str = None,
        autofocus: bool = None,
        on_change: callable = None,
        on_focus: callable = None,
        on_blur: callable = None,
        **kwargs
    )

Parameters:

value (bool, optional): Switch state
label (str, optional): Label text
active_color (str, optional): Color when enabled
on_change (callable, optional): Callback for state changes

Slider

class Slider(Control):
    """Value slider control."""
    
    def __init__(
        self,
        value: float = None,
        min: float = None,
        max: float = None,
        divisions: int = None,
        label: str = None,
        active_color: str = None,
        inactive_color: str = None,
        thumb_color: str = None,
        overlay_color: str = None,
        mouse_cursor: MouseCursor = None,
        autofocus: bool = None,
        on_change: callable = None,
        on_change_start: callable = None,
        on_change_end: callable = None,
        **kwargs
    )

Parameters:

value (float, optional): Current slider value
min (float, optional): Minimum value
max (float, optional): Maximum value
divisions (int, optional): Number of discrete divisions
label (str, optional): Value label text
on_change (callable, optional): Callback for value changes

Example:

ft.Slider(
    min=0,
    max=100,
    value=50,
    divisions=10,
    label="Volume: {value}",
    on_change=lambda e: print(f"Slider value: {e.control.value}")
)

Dropdown

class Dropdown(Control):
    """Dropdown selection control."""
    
    def __init__(
        self,
        value: str = None,
        options: List[DropdownOption] = None,
        hint_text: str = None,
        helper_text: str = None,
        error_text: str = None,
        label: str = None,
        icon: str = None,
        border: InputBorder = None,
        border_radius: BorderRadiusValue = None,
        border_color: str = None,
        border_width: float = None,
        focused_border_color: str = None,
        focused_border_width: float = None,
        color: str = None,
        bgcolor: str = None,
        filled: bool = None,
        content_padding: PaddingValue = None,
        dense: bool = None,
        item_height: float = None,
        max_menu_height: float = None,
        enable_feedback: bool = None,
        alignment: Alignment = None,
        autofocus: bool = None,
        on_change: callable = None,
        on_focus: callable = None,
        on_blur: callable = None,
        **kwargs
    )

Parameters:

value (str, optional): Currently selected value
options (List[DropdownOption], optional): List of dropdown options
hint_text (str, optional): Placeholder text
label (str, optional): Label text
on_change (callable, optional): Callback for selection changes

Example:

ft.Dropdown(
    label="Choose a color",
    options=[
        ft.dropdown.Option("red", "Red"),
        ft.dropdown.Option("green", "Green"), 
        ft.dropdown.Option("blue", "Blue"),
    ],
    on_change=lambda e: print(f"Selected: {e.control.value}")
)

Button Controls

Button

class Button(Control):
    """Basic button control."""
    
    def __init__(
        self,
        text: str = None,
        icon: str = None,
        icon_color: str = None,
        tooltip: str = None,
        style: ButtonStyle = None,
        content: Control = None,
        autofocus: bool = None,
        on_click: callable = None,
        on_focus: callable = None,
        on_blur: callable = None,
        on_hover: callable = None,
        **kwargs
    )

Parameters:

text (str, optional): Button text
icon (str, optional): Icon name
tooltip (str, optional): Tooltip text
style (ButtonStyle, optional): Custom button styling
content (Control, optional): Custom button content
on_click (callable, optional): Click event handler

ElevatedButton

class ElevatedButton(Control):
    """Material elevated button."""
    
    def __init__(
        self,
        text: str = None,
        icon: str = None,
        icon_color: str = None,
        tooltip: str = None,
        style: ButtonStyle = None,
        content: Control = None,
        bgcolor: str = None,
        color: str = None,
        elevation: float = None,
        autofocus: bool = None,
        on_click: callable = None,
        on_focus: callable = None,
        on_blur: callable = None,
        on_hover: callable = None,
        **kwargs
    )

IconButton

class IconButton(Control):
    """Icon-only button control."""
    
    def __init__(
        self,
        icon: str = None,
        icon_color: str = None,
        icon_size: float = None,
        tooltip: str = None,
        style: ButtonStyle = None,
        content: Control = None,
        selected: bool = None,
        selected_icon: str = None,
        selected_icon_color: str = None,
        splash_color: str = None,
        splash_radius: float = None,
        hover_color: str = None,
        focus_color: str = None,
        highlight_color: str = None,
        enable_feedback: bool = None,
        mouse_cursor: MouseCursor = None,
        autofocus: bool = None,
        on_click: callable = None,
        on_focus: callable = None,
        on_blur: callable = None,
        on_hover: callable = None,
        **kwargs
    )

Example:

ft.IconButton(
    icon=ft.icons.DELETE,
    icon_color=ft.colors.RED,
    tooltip="Delete item",
    on_click=lambda e: print("Delete clicked")
)

FloatingActionButton

class FloatingActionButton(Control):
    """Floating action button."""
    
    def __init__(
        self,
        text: str = None,
        icon: str = None,
        tooltip: str = None,
        bgcolor: str = None,
        foreground_color: str = None,
        hover_color: str = None,
        focus_color: str = None,
        splash_color: str = None,
        elevation: float = None,
        focus_elevation: float = None,
        hover_elevation: float = None,
        highlight_elevation: float = None,
        disabled_elevation: float = None,
        content: Control = None,
        shape: OutlinedBorder = None,
        mini: bool = None,
        mouse_cursor: MouseCursor = None,
        autofocus: bool = None,
        on_click: callable = None,
        **kwargs
    )

Selection and Picker Controls

DatePicker

class DatePicker(Control):
    """Date selection picker."""
    
    def __init__(
        self,
        first_date: datetime.date = None,
        last_date: datetime.date = None,
        current_date: datetime.date = None,
        value: datetime.date = None,
        help_text: str = None,
        cancel_text: str = None,
        confirm_text: str = None,
        error_format_text: str = None,
        error_invalid_text: str = None,
        field_hint_text: str = None,
        field_label_text: str = None,
        switch_to_calendar_icon: str = None,
        switch_to_input_icon: str = None,
        date_picker_entry_mode: DatePickerEntryMode = None,
        on_change: callable = None,
        on_dismiss: callable = None,
        **kwargs
    )

TimePicker

class TimePicker(Control):
    """Time selection picker."""
    
    def __init__(
        self,
        value: datetime.time = None,
        help_text: str = None,
        cancel_text: str = None,
        confirm_text: str = None,
        error_invalid_text: str = None,
        hour_label_text: str = None,
        minute_label_text: str = None,
        time_picker_entry_mode: TimePickerEntryMode = None,
        on_change: callable = None,
        on_dismiss: callable = None,
        **kwargs
    )

FilePicker

class FilePicker(Control):
    """File selection picker."""
    
    def __init__(
        self,
        on_result: callable = None,
        **kwargs
    )
    
    def pick_files(
        self,
        dialog_title: str = None,
        initial_directory: str = None,
        file_type: FilePickerFileType = FilePickerFileType.ANY,
        allowed_extensions: List[str] = None,
        allow_multiple: bool = False
    ) -> None:
        """Open file picker dialog."""
        
    def get_directory_path(
        self,
        dialog_title: str = None,
        initial_directory: str = None
    ) -> None:
        """Open directory picker dialog."""
        
    def save_file(
        self,
        dialog_title: str = None,
        file_name: str = None,
        initial_directory: str = None,
        file_type: FilePickerFileType = FilePickerFileType.ANY,
        allowed_extensions: List[str] = None
    ) -> None:
        """Open save file dialog."""

Dialog Controls

AlertDialog

class AlertDialog(Control):
    """Alert dialog modal."""
    
    def __init__(
        self,
        title: Control = None,
        title_padding: PaddingValue = None,
        content: Control = None,
        content_padding: PaddingValue = None,
        actions: List[Control] = None,
        actions_padding: PaddingValue = None,
        actions_alignment: MainAxisAlignment = None,
        icon: Control = None,
        semantics_label: str = None,
        bgcolor: str = None,
        shadow_color: str = None,
        surface_tint_color: str = None,
        elevation: float = None,
        shape: OutlinedBorder = None,
        clip_behavior: ClipBehavior = None,
        inset_padding: PaddingValue = None,
        scrollable: bool = None,
        open: bool = None,
        on_dismiss: callable = None,
        **kwargs
    )

Example:

def show_dialog(e):
    page.dialog = ft.AlertDialog(
        title=ft.Text("Confirm Action"),
        content=ft.Text("Are you sure you want to delete this item?"),
        actions=[
            ft.TextButton("Cancel", on_click=close_dialog),
            ft.TextButton("Delete", on_click=confirm_delete)
        ]
    )
    page.dialog.open = True
    page.update()

BottomSheet

class BottomSheet(Control):
    """Bottom sheet modal."""
    
    def __init__(
        self,
        content: Control = None,
        bgcolor: str = None,
        elevation: float = None,
        shape: OutlinedBorder = None,
        clip_behavior: ClipBehavior = None,
        constraints: BoxConstraints = None,
        enable_drag: bool = None,
        show_drag_handle: bool = None,
        use_safe_area: bool = None,
        is_scroll_controlled: bool = None,
        maintain_bottom_view_insets_padding: bool = None,
        open: bool = None,
        on_dismiss: callable = None,
        **kwargs
    )

SnackBar

class SnackBar(Control):
    """Snack bar notification."""
    
    def __init__(
        self,
        content: Control = None,
        action: str = None,
        action_color: str = None,
        action_overflow_threshold: float = None,
        show_close_icon: bool = None,
        close_icon_color: str = None,
        duration: int = None,
        bgcolor: str = None,
        elevation: float = None,
        margin: MarginValue = None,
        padding: PaddingValue = None,
        width: float = None,
        shape: OutlinedBorder = None,
        hit_test_behavior: HitTestBehavior = None,
        behavior: SnackBarBehavior = None,
        dismiss_direction: DismissDirection = None,
        open: bool = None,
        on_action: callable = None,
        on_visible: callable = None,
        **kwargs
    )

Display and Data Controls

Card

class Card(Control):
    """Material design card."""
    
    def __init__(
        self,
        content: Control = None,
        color: str = None,
        shadow_color: str = None,
        surface_tint_color: str = None,
        elevation: float = None,
        shape: OutlinedBorder = None,
        clip_behavior: ClipBehavior = None,
        margin: MarginValue = None,
        variant: CardVariant = None,
        **kwargs
    )

ListTile

class ListTile(Control):
    """List item tile."""
    
    def __init__(
        self,
        leading: Control = None,
        title: Control = None,
        subtitle: Control = None,
        trailing: Control = None,
        is_three_line: bool = None,
        dense: bool = None,
        visual_density: VisualDensity = None,
        shape: OutlinedBorder = None,
        style: ListTileStyle = None,
        selected_color: str = None,
        icon_color: str = None,
        text_color: str = None,
        content_padding: PaddingValue = None,
        selected: bool = None,
        focus_color: str = None,
        hover_color: str = None,
        splash_color: str = None,
        selected_tile_color: str = None,
        tile_color: str = None,
        enable_feedback: bool = None,
        horizontal_title_gap: float = None,
        min_vertical_padding: float = None,
        min_leading_width: float = None,
        mouse_cursor: MouseCursor = None,
        autofocus: bool = None,
        toggle_on_click: bool = None,
        url: str = None,
        url_target: str = None,
        on_click: callable = None,
        on_long_press: callable = None,
        on_focus: callable = None,
        on_blur: callable = None,
        on_hover: callable = None,
        **kwargs
    )

DataTable

class DataTable(Control):
    """Data table display."""
    
    def __init__(
        self,
        columns: List[DataColumn] = None,
        rows: List[DataRow] = None,
        sort_column_index: int = None,
        sort_ascending: bool = True,
        heading_row_color: str = None,
        heading_row_height: float = None,
        data_row_color: str = None,
        data_row_height: float = None,
        border: Border = None,
        border_radius: BorderRadiusValue = None,
        vertical_lines: BorderSide = None,
        horizontal_lines: BorderSide = None,
        divider_thickness: float = None,
        column_spacing: float = None,
        checkbox_horizontal_margin: float = None,
        clip_behavior: ClipBehavior = None,
        show_bottom_border: bool = None,
        **kwargs
    )

Cupertino (iOS-Style) Controls

Flet provides iOS-style variants of many controls for native iOS appearance:

CupertinoTextField - iOS-style text input
CupertinoButton - iOS-style button
CupertinoCheckbox - iOS-style checkbox
CupertinoRadio - iOS-style radio button
CupertinoSwitch - iOS-style toggle switch
CupertinoSlider - iOS-style slider
CupertinoAlertDialog - iOS-style alert dialog
CupertinoBottomSheet - iOS-style bottom sheet
CupertinoListTile - iOS-style list tile
CupertinoNavigationBar - iOS-style navigation bar
CupertinoSegmentedButton - iOS-style segmented control

These controls automatically adapt to the platform or can be used explicitly for consistent iOS appearance across platforms.

Best Practices

Form Handling

def create_form():
    username = ft.TextField(label="Username")
    password = ft.TextField(label="Password", password=True)
    
    def submit(e):
        print(f"Login: {username.value} / {password.value}")
    
    return ft.Column([
        username,
        password,
        ft.ElevatedButton("Login", on_click=submit)
    ])

Validation

def validate_email(e):
    if "@" not in e.control.value:
        e.control.error_text = "Invalid email format"
    else:
        e.control.error_text = None
    page.update()

ft.TextField(
    label="Email",
    on_change=validate_email
)

Responsive Controls

ft.Container(
    content=ft.TextField(label="Search"),
    width=lambda: min(400, page.window_width * 0.8)
)

This covers the essential UI controls in Flet. Each control can be extensively customized through theming, styling, and event handling to create professional, native-looking applications across all platforms.

Install with Tessl CLI

npx tessl i tessl/pypi-flet

docs

advanced-features.md

charts-visualization.md

events-interaction.md

index.md

theming-styling.md

ui-controls.md

utilities-platform.md

tile.json

tessl/pypi-flet

ui-controls.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

UI Controls

Import

Basic Display Controls

Text

Icon

Image

Divider

VerticalDivider

Input Controls

TextField

Checkbox

Radio

RadioGroup

Switch

Slider

Dropdown

Button Controls

Button

ElevatedButton

IconButton

FloatingActionButton

Selection and Picker Controls

DatePicker

TimePicker

FilePicker

Dialog Controls

AlertDialog

BottomSheet

SnackBar

Display and Data Controls

Card

ListTile

DataTable

Cupertino (iOS-Style) Controls

Best Practices

Form Handling

Validation

Responsive Controls

ui-controls.mddocs/