List of items

December 14, 2024 · View on GitHub

logo

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

Enhancements

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()

fluentflet/components/dropdown.py

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("john@example.com", 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
)

fluentflet/components/tooltip.py

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:

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)