flet-desktop

Files (1)

• SKILL.md

SKILL.md (first lines)

# Flet Desktop

## 1. Project Setup

```bash
pip install flet
# For desktop packaging
pip install pyinstaller
```

```python
# main.py
import flet as ft

def main(page: ft.Page):
    page.title = "My Flet App"
    page.theme_mode = ft.ThemeMode.LIGHT
    page.padding = 20

    def on_click(e):
        page.add(ft.Text(f"Hello, {name_field.value}!"))

    name_field = ft.TextField(label="Your name", width=300)
    submit_btn = ft.ElevatedButton("Greet", on_click=on_click)

    page.add(
        ft.Column([
            ft.Text("Welcome", size=30, weight=ft.FontWeight.BOLD),
            name_field,
            submit_btn,
        ])
    )

ft.app(target=main)
```

## 2. Layout Widgets

| Widget | Purpose |
|--------|---------|
| `Row` | Horizontal layout |
| `Column` | Vertical layout |
| `Container` | Box with padding, margin, border |
| `Card` | Material card with elevation |
| `Tabs` | Tabbed navigation |
| `NavigationBar` | Bottom navigation |
| `ResponsiveRow` | Grid-based responsive layout |

```python
ft.ResponsiveRow([
    ft.Column([ft.Text("Sidebar")], col={"sm": 12, "md": 3}),
    ft.Column([ft.Text("Main")], col={"sm": 12, "md": 9}),
])
```

## 3. State Management

### Simple State (page-level)

```python
def main(page: ft.Page):
    counter = ft.Text("0", size=40)

    def increment(e):
        counter.value = str(int(counter.value) + 1)
        page.update()

    page.add(counter, ft.ElevatedButton("+", on_click=increment))
```

### Complex State (separate class)

```python
class AppState:
    def __init__(self):
        self.users = []
        self.selected_user = None

    def add_user(self, name: str):
        self.users.append({"id": len(self.users) + 1, "name": name})
```

## 4. Navigation

```python
from flet import Page, View, AppBar, ElevatedButton, Text

def main(page: Page):
    def route_change(e):
        page.views.clear()
        page.views.append(
            View(
                "/",
                [AppBar(title=Text("Home")),
                 ElevatedButton("Go to settings", on_click=lambda _: page.go("/settings"))]
            )
        )
        if page.route == "/settings":
            page.views.append(
                View(
                    "/settings",
                    [AppBar(title=Text("Settings")),
                     ElevatedButton("Back", on_click=lambda _: page.go("/"))]
                )
            )
        page.update()

    page.on_route_change = route_change
    page.go("/")

ft.app(target=main)
```

## 5. File Handling

### File Picker

```python
import flet as ft

From MathiasPaulenko/ai-toolkit, MIT.

More from MathiasPaulenko/ai-toolkit