fluentflet 0.2.2a1

Fluent Design System components for Flet

Fluent Flet

A fluent design widgets library based on Flet

Documentation

istallation

[!IMPORTANT] fluentflet is still in alpha version. this means that there could be bugs and unexpected behaviours

• from PyPi

pip install fluentflet

• from source

git clone https://github.com/Bbalduzz/fluentflet.git

cd fluentflet

py setup.py install

documentation overview

Table of Contents

Components

• Button
  • ButtonVariant
  • Button
• Checkbox
  • CheckState
  • Checkbox
• Dialog
  • Dialog
• Dropdown
  • Dropdown
• Expander
  • Expander
• ListItem
  • ListItem
• ProgressRing
  • ProgressRing
• Radio
  • Radio
  • RadioGroup
• Slider
  • SliderOrientation
  • Slider
• TextBox
  • TextBox
• Toggle
  • Toggle
• Tooltip
  • Tooltip
• TreeView
  • TreeItemData
  • TreeViewAbstractModel
  • DictTreeViewModel
  • JSONTreeViewModel
  • TreeView
• Toast
  • Enums
    • ToastPosition
    • ToastVariant
    • ToastSeverity
    • ToastActionType
  • Toast
  • Toaster

Enhancements

• Page Monkey Patches
• FluentWindow
  • FluentState
  • FluentWindow

Button Component

fluentflet/components/button.py

ButtonVariant (Enum)

class ButtonVariant(Enum):
    DEFAULT = "default"     # Standard button styling
    ACCENT = "accent"       # Primary action/emphasized styling
    HYPERLINK = "hyperlink" # Text-like button styling 
    TOGGLE = "toggle"       # Toggleable state button

Button

Purpose: Implements Fluent Design System button control with multiple variants and styles. Inherits from: ft.TextButton

Attributes:

• is_toggled: bool = False. Current toggle state for toggle variant buttons
• _variant: ButtonVariant. Current button style variant
• design_system: FluentDesignSystem. Reference to design system for styling
• theme: Theme. Current theme settings

Constructor Parameters:

• content: Union[str, ft.Control] = None. Button content (text or control like icon)
  • If string: Creates Text control automatically
  • If control: Uses directly
• variant: ButtonVariant = ButtonVariant.DEFAULT. Button style variant
• height: int = 35. Button height in pixels
• custom_color: Optional[str] = None. Optional color override
• design_system: FluentDesignSystem = None. Design system instance
• is_dark_mode: bool = True. Theme mode selection
• **kwargs. Additional Flet button properties

Example Usage:

from fluentflet.components import Button, ButtonVariant
from fluentflet.utils import FluentIcon, FluentIcons

# Text button
basic_button = Button(
    "Click Me", 
    variant=ButtonVariant.DEFAULT,
    on_click=lambda e: print("Clicked!")
)

# Icon button with accent
icon_button = Button(
    content=FluentIcon(FluentIcons.ADD), 
    variant=ButtonVariant.ACCENT
)

# Toggle button
toggle = Button(
    "Toggle Me",
    variant=ButtonVariant.TOGGLE,
    on_click=lambda e: print(f"Toggled: {toggle.is_toggled}")
)

Checkbox Component

Path: fluentflet/components/checkbox.py

CheckState (Enum)

class CheckState(Enum):
    UNCHECKED = "unchecked"       # Box is empty
    CHECKED = "checked"           # Box has checkmark
    INDETERMINATE = "indeterminate" # Box has dash (mixed state)

Checkbox

Purpose: Implements tri-state checkbox control with Fluent Design styling. Inherits from: ft.Container

Attributes:

• state: CheckState. Current checkbox state
• _disabled: bool. Disabled state tracking
• size: int. Size of the checkbox in pixels
• three_state: bool. Whether indeterminate state is allowed

Constructor Parameters:

• state: CheckState = CheckState.UNCHECKED. Initial state
• label: str = "". Optional label text
• size: int = 20. Size in pixels
• on_change: Callable[[CheckState], None] = None. State change callback
• disabled: bool = False. Initial disabled state
• three_state: bool = False. Enable tri-state behavior
• design_system: FluentDesignSystem = None. Design system instance
• is_dark_mode: bool = True. Theme mode
• **kwargs. Additional container properties

Example Usage:

from fluentflet.components import Checkbox, CheckState

# Basic checkbox
checkbox = Checkbox(
    label="Enable feature",
    on_change=lambda state: print(f"State: {state}")
)

# Tri-state checkbox
tristate = Checkbox(
    label="Select files",
    three_state=True,
    state=CheckState.INDETERMINATE
)

# Disabled checkbox 
disabled = Checkbox(
    label="Unavailable option",
    disabled=True,
    state=CheckState.CHECKED
)

Dialog Component

fluentflet/components/dialog.py

Dialog

Purpose: Implements a modal dialog overlay with Fluent Design styling. Inherits from: ft.Container

Attributes:

• dialog_width: int = 400. Width of dialog in pixels
• title_text: str. Dialog title
• _content: ft.Control. Main dialog content
• actions: List[Button]. Action buttons for dialog

Constructor Parameters:

• title: str = "Dialog Title". Dialog header text
• content: Optional[ft.Control] = None. Main content area
  • Defaults to simple text if not provided
  • Can be any Flet control
• actions: Optional[List[Button]] = None. Bottom action buttons
  • Defaults to ["Action", "Close"] buttons if not provided
  • Close button automatically included

Methods:

• show(): Display the dialog

  Returns:
  - None: Updates page overlay
  

• close_dialog(e: Optional[ft.ControlEvent] = None): Hide and remove dialog

  Returns:
  - None: Removes from page overlay
  

Example Usage:

from fluentflet.components import Dialog, Button, ButtonVariant

# Simple dialog
dialog = Dialog(
    title="Confirm Action",
    content=ft.Text("Are you sure you want to proceed?")
)

# Custom dialog with multiple actions
custom_dialog = Dialog(
    title="Save Changes",
    content=ft.Column([
        ft.Text("Save current changes?"),
        ft.TextField(label="Comment")
    ]),
    actions=[
        Button("Save", variant=ButtonVariant.ACCENT),
        Button("Don't Save"),
        Button("Cancel")
    ]
)

# Show dialog
page.overlay.append(dialog)
dialog.show()

Dropdown Component

fluentflet/components/dropdown.py

Dropdown

Purpose: Implements a dropdown select control with Fluent Design styling. Inherits from: ft.Container

Attributes:

• options: List[Union[str, ft.Control]]. Available options
• max_width: int. Maximum width of dropdown
• selected_value: str. Currently selected option
• is_open: bool. Dropdown expanded state

Constructor Parameters:

• options: List[Union[str, ft.Control]]. List of dropdown options
  • Can be strings or Flet controls
  • Must not be empty
• max_width: int = 150. Maximum width in pixels
• theme_mode: ft.ThemeMode = ft.ThemeMode.DARK. Theme selection
• on_select: Optional[Callable] = None. Selection change callback
• animated: bool = True. Enable animations
• initial_value: Optional[str] = None. Initially selected item
• **kwargs. Additional container properties

Example Usage:

from fluentflet.components import Dropdown

# Simple string options
dropdown = Dropdown(
    options=["Option 1", "Option 2", "Option 3"],
    on_select=lambda value: print(f"Selected: {value}")
)

# Custom control options
dropdown_with_icons = Dropdown(
    options=[
        ft.Row([
            ft.Icon(ft.icons.SETTINGS),
            ft.Text("Settings")
        ]),
        ft.Row([
            ft.Icon(ft.icons.PERSON),
            ft.Text("Profile")
        ])
    ],
    max_width=200
)

Expander Component

fluentflet/components/expander.py

Expander

Purpose: Implements collapsible/expandable section with Fluent Design styling. Inherits from: ft.Container

Attributes:

• _expanded: bool. Current expansion state
• _width: int. Width of expander
• _header: ft.Control. Header content
• _content: ft.Control. Main content
• _content_height: Optional[int]. Cached content height for animation

Constructor Parameters:

• header: Union[str, ft.Control]. Content shown in always-visible header
  • If string: Creates text control
  • If control: Uses directly
• content: ft.Control. Content shown when expanded
• expand: bool = False. Initial expanded state
• width: int = 600. Expander width in pixels
• is_dark_mode: bool = True. Theme mode
• **kwargs. Additional container properties

Properties:

• expanded: bool. Get/set expanded state

Example Usage:

from fluentflet.components import Expander

# Simple text expander
expander = Expander(
    header="Click to Expand",
    content=ft.Text("Expanded content here"),
    expand=False
)

# Complex expander with custom header
expander = Expander(
    header=ft.Row([
        ft.Icon(ft.icons.SETTINGS),
        ft.Text("Advanced Settings")
    ]),
    content=ft.Column([
        ft.TextField(label="Setting 1"),
        ft.TextField(label="Setting 2")
    ])
)

ListItem Component

fluentflet/components/listitem.py

ListItem

Purpose: Implements selectable list item with Fluent Design styling. Inherits from: ft.GestureDetector

Class Attributes:

• instances: List[ListItem]. All created instances for selection management

Instance Attributes:

• item_content: ft.Control. Item's content
• is_hovered: bool. Hover state
• is_pressed: bool. Press state
• _is_selected: bool. Selection state

Constructor Parameters:

• content: ft.Control. Item content
• on_click: Optional[Callable] = None. Click handler
• is_dark_mode: bool = True. Theme mode
• selected: bool = False. Initial selection state
• **kwargs. Additional gesture detector properties

Properties:

• selected: bool. Get/set selection state

Example Usage:

from fluentflet.components import ListItem

# Simple list item
item = ListItem(
    content=ft.Text("List Item 1"),
    on_click=lambda _: print("Clicked")
)

# Complex list item
item = ListItem(
    content=ft.Row([
        ft.Icon(ft.icons.PERSON),
        ft.Column([
            ft.Text("John Doe"),
            ft.Text("[e-mail]", size=12)
        ])
    ]),
    selected=True
)

# List of items
items_list = ft.ListView(
    controls=[
        ListItem(content=ft.Text(f"Item {i}"))
        for i in range(5)
    ]
)

ProgressRing Component

fluentflet/components/progressring.py

ProgressRing

Purpose: Implements circular progress indicator with Fluent Design styling. Inherits from: ft.ProgressRing

Constructor Parameters:

• stroke_width: int = 3. Width of the ring stroke
• value: Optional[float] = None. Progress value (0.0-1.0 for determinate, None for indeterminate)
• **kwargs. Additional progress ring properties

Example Usage:

from fluentflet.components import ProgressRing

# Indeterminate progress
loading = ProgressRing()

# Determinate progress
progress = ProgressRing(value=0.75)

# Custom styled progress
custom = ProgressRing(
    value=0.5,
    stroke_width=5,
    width=100,
    height=100
)

Radio Component

fluentflet/components/radio.py

Radio

Purpose: Implements individual radio button control. Inherits from: ft.Container

Attributes:

• value: Any. Value associated with radio button
• _selected: bool. Current selection state
• _disabled: bool. Disabled state
• is_hovered: bool. Hover state
• is_pressed: bool. Press state
• _radio_group: Optional[RadioGroup]. Parent radio group

Constructor Parameters:

• value: Any = None. Value for this radio option
• label: str = "". Label text
• selected: bool = False. Initial selection
• disabled: bool = False. Disabled state
• design_system: FluentDesignSystem = None. Design system instance
• is_dark_mode: bool = True. Theme mode
• **kwargs. Additional container properties

RadioGroup

Purpose: Container for managing a group of related radio buttons.

Inherits from: ft.Container

Attributes:

• radios: List[Radio]. Child radio buttons
• _value: Any. Currently selected value
• _on_change: Optional[Callable]. Value change callback

Constructor Parameters:

• content: ft.Control = None. Container content
• value: Any = None. Initial selected value
• on_change: Optional[Callable] = None. Value change handler
• design_system: FluentDesignSystem = None. Design system instance
• is_dark_mode: bool = True. Theme mode
• **kwargs. Additional container properties

Example Usage:

from fluentflet.components import Radio, RadioGroup

# Single radio button
radio = Radio(
    value="option1",
    label="Option 1",
    disabled=False
)

# Radio group
radio_group = RadioGroup(
    content=ft.Column([
        Radio(value="small", label="Small"),
        Radio(value="medium", label="Medium"),
        Radio(value="large", label="Large")
    ]),
    value="medium",
    on_change=lambda value: print(f"Selected: {value}")
)

Slider Component

fluentflet/components/slider.py

SliderOrientation (Enum)

class SliderOrientation(Enum):
    HORIZONTAL = "horizontal"
    VERTICAL = "vertical"

Slider

Purpose: Implements a draggable slider control with Fluent Design styling. Inherits from: ft.Container

Attributes:

• current_value: float. Current slider value
• min: float. Minimum value
• max: float. Maximum value
• dragging: bool. Current drag state
• thumb_size: int. Size of slider thumb
• is_hovered: bool. Hover state
• is_pressed: bool. Press state

Constructor Parameters:

• value: float = 0. Initial value
  • Must be between min and max
• min: float = 0. Minimum value
• max: float = 100. Maximum value
• on_change: Optional[Callable[[float], None]] = None. Value change callback
• size: int = 200. Slider length in pixels
• disabled: bool = False. Disabled state
• orientation: SliderOrientation = SliderOrientation.HORIZONTAL. Slider orientation
• is_dark_mode: bool = True. Theme mode
• **kwargs. Additional container properties

Example Usage:

from fluentflet.components import Slider, SliderOrientation

# Horizontal slider
slider = Slider(
    value=50,
    min=0,
    max=100,
    on_change=lambda e: print(f"Value: {e.current_value}")
)

# Vertical slider
vertical_slider = Slider(
    value=0.5,
    min=0,
    max=1,
    orientation=SliderOrientation.VERTICAL,
    size=150
)

# Custom range slider
custom = Slider(
    value=-50,
    min=-100,
    max=100,
    disabled=False
)

TextBox Component

fluentflet/components/textbox.py

TextBox

Purpose: Implements text input control with Fluent Design styling. Inherits from: ft.Container

Attributes:

• textfield: ft.TextField. Core text input control
• bottom_border: ft.Container. Bottom border with animation
• actions_row: ft.Row. Container for action buttons
• default_bgcolor: str. Default background color

Constructor Parameters:

• design_system: FluentDesignSystem = FluentDesignSystem(). Design system instance
• placeholder: str = "TextBox". Placeholder text
• prefix: str = None: Optional text to display before the input area
• suffix: str = None: Optional text to display after the input area
• width: int = 200. Control width
• text_size: int = 14. Font size
• height: int = 32. Control height
• password: bool = False. Password input mode
• actions_visible: bool = True. Show/hide action buttons
• **kwargs. Additional container properties

Methods:

• add_action(icon: FluentIcons, on_click=None, tooltip: str = None) -> Button
  • Adds action button to textbox
  • Returns the created button

Example Usage:

from fluentflet.components import TextBox
from fluentflet.utils import FluentIcons

# Basic textbox
textbox = TextBox(
    placeholder="Enter text",
    width=300
)

# Password textbox
password = TextBox(
    placeholder="Password",
    password=True
)

# TextBox with prefix and suffix
url_input = TextBox(
    placeholder="Enter domain name",
    prefix="https://",
    suffix=".com",
    width=300
)

# Textbox with actions
textbox_with_actions = TextBox(
    placeholder="Search",
    width=400
)
textbox_with_actions.add_action(
    icon=FluentIcons.SEARCH,
    on_click=lambda _: print("Search clicked"),
    tooltip="Search"
)
textbox_with_actions.add_action(
    icon=FluentIcons.DISMISS,
    on_click=lambda _: setattr(textbox_with_actions, 'value', ''),
    tooltip="Clear"
)

Toggle Component

fluentflet/components/toggle.py

Toggle

Purpose: Implements a toggle switch with Fluent Design styling. Inherits from: ft.Container

Attributes:

• value: bool. Current toggle state
• on_content: str. Label text for ON state
• off_content: str. Label text for OFF state
• _label: str. Current label text
• _handle_size: int. Size of toggle handle
• _handle_expanded_width: int. Width when handle is pressed

Constructor Parameters:

• value: bool = False. Initial state
• label: Union[str, dict] = None. Label text or dict with on/off states
  • If string: Same label for both states
  • If dict: Must have "on_content" and "off_content" keys
• label_position: ft.LabelPosition = ft.LabelPosition.RIGHT. Label placement
• on_change: Optional[Callable[[bool], None]] = None. State change callback
• label_style: Optional[Dict] = None. Label text styling
• disabled: bool = False. Disabled state
• width: int = 40. Toggle width
• height: int = 20. Toggle height
• **kwargs. Additional container properties

Example Usage:

from fluentflet.components import Toggle

# Simple toggle
toggle = Toggle(
    value=False,
    label="Enable feature",
    on_change=lambda state: print(f"Toggled: {state}")
)

# Toggle with different labels
toggle = Toggle(
    value=True,
    label={
        "on_content": "Enabled",
        "off_content": "Disabled"
    }
)

# Custom styled toggle
toggle = Toggle(
    label="Custom toggle",
    label_style={
        "size": 16,
        "weight": "bold"
    },
    width=50,
    height=25
)

Tooltip Component

fluentflet/components/tooltip.py

ToolTip

Purpose: Implements hover tooltip with Fluent Design styling. Inherits from: ft.Tooltip

Constructor Parameters:

• padding: int = 6. Tooltip padding
• border_radius: int = 4. Corner radius
• text_style: ft.TextStyle. Tooltip text styling
• bgcolor: str = "#2d2d2d". Background color
• border: ft.Border. Border style
• prefer_below: bool = False. Show below target when possible
• wait_duration: int = 300. Delay before showing (ms)
• **kwargs. Additional tooltip properties

Example Usage:

from fluentflet.components import ToolTip, Button

# Basic tooltip
button = Button("Hover me")
tooltip = ToolTip(
    message="This is a tooltip",
    content=button
)

# Custom styled tooltip
tooltip = ToolTip(
    message="Custom tooltip",
    content=ft.Text("Hover for info"),
    text_style=ft.TextStyle(
        size=14,
        weight=ft.FontWeight.BOLD
    ),
    bgcolor="#333333",
    border_radius=8
)

TreeView Components

fluentflet/components/treeview.py

TreeItemData

Purpose: Base data structure for tree items.

Attributes:

• id: str. Unique identifier for the item
• label: str. Display text
• value: Optional[Any] = None. Associated value
• parent_id: Optional[str] = None. ID of parent item
• children: List[TreeItemData] = None. Child items
• metadata: Dict[str, Any] = None. Additional item data

Example Usage:

item = TreeItemData(
    id="root",
    label="Root Item",
    children=[
        TreeItemData(id="child1", label="Child 1"),
        TreeItemData(id="child2", label="Child 2")
    ]
)

TreeViewAbstractModel

Purpose: Abstract base class for tree data models. Generic Type: T - Type of raw data

Attributes:

• items: List[TreeItemData]. Processed tree items
• _raw_data: Optional[T]. Source data

Abstract Methods:

• process_data(): Convert raw data to TreeItemData objects

Common Methods:

• get_item_by_id(item_id: str) -> Optional[TreeItemData]
• get_root_items() -> List[TreeItemData]
• get_children(parent_id: str) -> List[TreeItemData]

DictTreeViewModel

Purpose: Tree model for dictionary data. Inherits from: TreeViewAbstractModel[Dict]

Example Usage:

data = {
    "Root": {
        "Child1": {
            "GrandChild1": 1.1,
            "GrandChild2": 1.2
        },
        "Child2": 2.0
    }
}

model = DictTreeViewModel()
model.raw_data = data

JSONTreeViewModel

Purpose: Tree model for JSON array/object data. Inherits from: TreeViewAbstractModel[List[Dict]]

Constructor Parameters:

• field_mapping: Optional[Dict[str, str]] = None. Custom field name mapping
  • Default maps: id, label, value, children

Example Usage:

data = [
    {
        "id": "1",
        "label": "Item 1",
        "children": [
            {
                "id": "1.1",
                "label": "Subitem 1.1"
            }
        ]
    }
]

model = JSONTreeViewModel()
model.raw_data = data

TreeView

Purpose: Main tree view component with drag-drop support. Inherits from: ft.Column

Constructor Parameters:

• data: dict. Source data
• model: Optional[TreeViewAbstractModel] = DictTreeViewModel(). Data model
• on_right_click: Optional[Callable] = None. Right-click handler
• is_dark_mode: bool = True. Theme mode

Methods:

• handle_item_drop(src_id: str, target_id: str): Handle item reordering

Example Usage:

from fluentflet.components import TreeView, DictTreeViewModel

# Basic tree
data = {
    "Root": {
        "Item1": 1.0,
        "Item2": {
            "SubItem1": 2.1,
            "SubItem2": 2.2
        }
    }
}

tree = TreeView(
    data=data,
    model=DictTreeViewModel(),
    on_right_click=lambda item: print(f"Right clicked: {item.label}")
)

# Custom model tree
class MyModel(TreeViewAbstractModel[List[Dict]]):
    def process_data(self):
        for item in self.raw_data:
            self.items.append(TreeItemData(
                id=str(item["id"]),
                label=item["name"],
                value=item["data"]
            ))

tree = TreeView(
    data=my_data,
    model=MyModel()
)

Toast Component

fluentflet/components/toast.py

Enums

ToastPosition

class ToastPosition(Enum):
    TOP_LEFT = "top-left"
    TOP_RIGHT = "top-right"
    TOP_CENTER = "top-center"
    BOTTOM_LEFT = "bottom-left"
    BOTTOM_RIGHT = "bottom-right"
    BOTTOM_CENTER = "bottom-center"

ToastVariant

class ToastVariant(Enum):
    SINGLE_LINE = "single-line"  # Compact single line toast
    MULTI_LINE = "multi-line"    # Expanded multi-line toast

ToastSeverity

class ToastSeverity(Enum):
    INFORMATIONAL = "informational"  # Blue info style
    SUCCESS = "success"              # Green success style
    WARNING = "warning"              # Yellow warning style
    CRITICAL = "critical"            # Red error style

ToastActionType

class ToastActionType(Enum):
    NONE = "none"          # No action button
    HYPERLINK = "hyperlink"  # Link style action
    DEFAULT = "default"      # Button style action

Toast

Purpose: Individual toast notification with Fluent Design styling. Inherits from: ft.Container

Constructor Parameters:

• title: Optional[str] = None. Toast title text
• message: Optional[str] = None. Toast message text
• severity: ToastSeverity | str = ToastSeverity.INFORMATIONAL. Toast style
• variant: ToastVariant | str = ToastVariant.SINGLE_LINE. Layout style
• action_type: ToastActionType | str = ToastActionType.NONE. Action button type
• action_text: Optional[str] = None. Action button text
• action_url: Optional[str] = None. URL for hyperlink action
• on_action: Optional[Callable] = None. Action click handler
• position: ToastPosition | str = ToastPosition.TOP_RIGHT. Toast position
• **kwargs. Additional container properties

Toaster

Purpose: Toast notification manager for showing/hiding toasts.

Constructor Parameters:

• page: ft.Page. Flet page instance
• expand: bool = False. Auto-expand toasts on hover
• position: ToastPosition | str = ToastPosition.TOP_RIGHT. Default position
• theme: str = "dark". Theme mode
• default_toast_duration: int = 3. Default show duration in seconds
• default_offset: int = 20. Spacing from window edge

Methods:

show_toast

def show_toast(
    self,
    title: Optional[str] = None,
    message: Optional[str] = None,
    severity: ToastSeverity | str = ToastSeverity.INFORMATIONAL,
    variant: ToastVariant | str = ToastVariant.SINGLE_LINE,
    action_type: ToastActionType | str = ToastActionType.NONE,
    action_text: Optional[str] = None,
    action_url: Optional[str] = None,
    on_action: Optional[Callable] = None,
    position: Optional[ToastPosition | str] = None,
    duration: int = 3,
    toast: Optional[Toast] = None,
    **kwargs
) -> None

Example Usage:

from fluentflet.components import Toast, Toaster, ToastSeverity

def main(page: ft.Page):
    # Create toaster
    toaster = Toaster(
        page=page,
        position="top-right",
        default_toast_duration=5
    )

    # Show simple toast
    toaster.show_toast(
        title="Success!",
        message="Operation completed",
        severity=ToastSeverity.SUCCESS
    )

    # Show toast with action
    toaster.show_toast(
        title="Warning",
        message="Connection lost",
        severity=ToastSeverity.WARNING,
        action_type="default",
        action_text="Retry",
        on_action=lambda: print("Retrying...")
    )

    # Show custom toast
    custom_toast = Toast(
        title="Custom Toast",
        message="With custom styling",
        severity=ToastSeverity.INFORMATIONAL,
        variant=ToastVariant.MULTI_LINE,
        action_type=ToastActionType.HYPERLINK,
        action_text="Learn More",
        action_url="https://example.com"
    )
    toaster.show_toast(toast=custom_toast)

ft.app(target=main)

The Toast system provides:

• Multiple severity levels with appropriate styling
• Single and multi-line variants
• Custom action buttons/links
• Flexible positioning
• Automatic stacking and animation
• Hover expansion
• Duration control

---

Enhancements

Page Monkey Patches

fluentflet/utils/__init__.py

Purpose: Extends Flet's Page class with additional functionality for blur effects and drag-drop support.

Added Page Properties

page.blur_effect

@property
def blur_effect(self) -> bool:
    """Controls window blur effect on Windows"""
    return self._blur

@blur_effect.setter
def blur_effect(self, value: bool):
    # Only available on Windows
    # Enables/disables acrylic blur effect

page.accepts_drops

@property
def accepts_drops(self) -> bool:
    """Controls file drop acceptance"""
    return self._accepts_drops

@accepts_drops.setter
def accepts_drops(self, value: bool):
    # Enables/disables file drop handling

Added Page Methods

enable_drag_and_drop

def enable_drag_and_drop(
    files_callback: Optional[Callable[[List[str]], None]] = None,
    drag_enter_callback: Optional[Callable[[Tuple[int, int]], None]] = None,
    drag_over_callback: Optional[Callable[[Tuple[int, int]], None]] = None,
    drag_leave_callback: Optional[Callable[[], None]] = None
):
    """Enable file drag-drop functionality
    
    Parameters:
    - files_callback: Called with list of dropped file paths
    - drag_enter_callback: Called with (x,y) when drag enters window
    - drag_over_callback: Called with (x,y) while dragging over window
    - drag_leave_callback: Called when drag leaves window
    """

Example Usage:

def on_files_dropped(files):
    print("Files dropped:", files)

def on_drag_enter(point):
    print(f"Drag entered at {point}")

page.accepts_drops = True
page.enable_drag_and_drop(
    files_callback=on_files_dropped,
    drag_enter_callback=on_drag_enter
)

FluentWindow

fluentflet/window/fluent_window.py

Purpose: Implements a window manager with navigation, routing and state management following Fluent Design.

NavigationType (Enum)

enum for controlling navigation layout:

class NavigationType(Enum):
    STANDARD = auto()  # Original layout that pushes content
    OVERLAY = auto()   # Navigation overlays the content

Example Usage:

from fluentflet import FluentWindow, NavigationType

window = FluentWindow(
    page=page,
    nav_type=NavigationType.OVERLAY,
    navigation_items=[
        {"icon": FluentIcons.HOME, "label": "Home", "route": "/home"},
        {"icon": FluentIcons.SETTINGS, "label": "Settings", "route": "/settings"}
    ]
)

Classes

FluentState

Purpose: State management for FluentWindow applications

class FluentState:
    """Manages persistent and ephemeral application state"""
    
    def set(self, key: str, value: any, persist: bool = False):
        """Set state value
        
        Parameters:
        - key: State key
        - value: State value
        - persist: If True, saves to session storage
        """
        
    def get(self, key: str, default=None) -> any:
        """Get state value"""
        
    def subscribe(self, key: str, callback: callable):
        """Subscribe to state changes"""

Example Usage:

class AppState(FluentState):
    def _load_initial_state(self):
        self._state = {
            "theme": "light",
            "selected_user": None
        }
    
    def set_theme(self, theme: str):
        self.set("theme", theme, persist=True)

window.state = AppState()
window.state.subscribe("theme", lambda t: print(f"Theme changed: {t}"))

FluentWindow

Purpose: Main window manager implementing navigation and routing

Constructor Parameters:

• page: ft.Page. Flet page instance
• navigation_items: Optional[List[Dict]]. Navigation menu items

  [
      {
          "icon": FluentIcons.HOME,  # Icon enum
          "label": "Home",           # Display text 
          "route": "/",              # Optional route
      }
  ]
  

• nav_type: NavigationType = NavigationType.STANDARD. Side navigation rail type
• bottom_navigation_items: Optional[List[Dict]]. Bottom nav items
• selected_index: int = 0. Initial selected nav item
• window_titlebar: Union[str, Titlebar]. Window title or titlebar component
• colors: Optional[Dict]. Color overrides

  {
      "nav_bg": "#1F1F1F",
      "content_bg": "#282828",
      "title_bar_bg": "#1F1F1F",
      "icon_color": "white",
      "text_color": "white" 
  }
  

• nav_width_collapsed: int = 50. Navigation width when collapsed
• nav_width_expanded: int = 200. Navigation width when expanded
• animation_duration: int = 100. Animation duration in ms
• show_back_button: bool = True. Show navigation back button
• state_manager: Type[FluentState] = FluentState. State manager class

Methods:

Navigation

def navigate(self, route: str, **params):
    """Navigate to route with optional parameters
    
    Parameters:
    - route: Route path
    - **params: Route parameters
    """

@route("/path")
def view_builder():
    """Route decorator for registering views"""
    return ft.Column([...])

def add_route(self, route: str, view_builder: Callable[..., ft.Control], 
              is_template: bool = False):
    """Register route manually"""

Example Usage:

def main(page: ft.Page):
    window = FluentWindow(
        page,
        navigation_items=[
            {"icon": FluentIcons.HOME, "label": "Home", "route": "/"},
            {"icon": FluentIcons.PEOPLE, "label": "Users", "route": "/users"}
        ]
    )

    @window.route("/")
    def home_view():
        return ft.Column([
            ft.Text("Welcome!", size=32),
            Button("View Users", 
                  on_click=lambda _: window.navigate("/users"))
        ])

    @window.route("/users/:user_id", is_template=True)
    def user_profile(user_id: str):
        return ft.Column([
            ft.Text(f"User Profile: {user_id}")
        ])

    window.navigate("/")

ft.app(target=main)