Python Flet

Tutorial 60 of 65 · pythondeck.com Python course

Flet wraps Flutter to deliver cross-platform GUI apps in pure Python - desktop, mobile and web from a single codebase. Use a Flet GUI Designer for fast visual layout.

Flet lets you build Flutter UIs in Python—web, desktop, and mobile from one codebase with Material/Cupertino controls without writing Dart.

Strong fit for internal dashboards, MVPs, and teams that know Python but want modern UI faster than raw Qt.

You still think in Flutter layout rules—expanded children, scroll views, and responsive breakpoints—not absolute pixel placement like old desktop toolkits.

Page — root control; routing between views.

Controls — Column, Row, TextField, DataTable, FilePicker.

State — update() after mutating control properties.

Events — on_click handlers; async page.run_task for I/O.

Deployment — desktop exe, static web, or hosted Flet app.

Theming — ThemeMode, colors aligned to brand.

Flet wraps Flutter—layout is constraint-based like Flutter, not pixel-perfect absolute coords. Async handlers prevent UI jank. Share state via page.session or external DB for multi-user apps. Compare hosting cost vs self-hosted FastAPI + React when scaling.

When you hit Flutter limits, export or embed custom controls—know escape hatches before committing.

Navigation patterns mirror mobile apps: push routes, drawers, and tabs. Store user preferences in client storage only when non-sensitive; auth tokens belong on the server.

Responsive layouts use expand and scroll together; test on narrow web viewports before shipping internal tools.

Mutating controls without page.update(), UI appears stale.

Synchronous requests blocking UI thread in event handlers.

Monolithic 2000-line files instead of user controls/components.

Expecting pixel-perfect parity with native iOS Human Interface Guidelines.

Factor reusable UserControl classes per screen section.

Use async for HTTP and DB; show progress indicators.

Version-pin flet in requirements; test packaged builds CI.

Secure API keys server-side; Flet client is not a secret store.

Host internal apps behind SSO; Flet web mode inherits browser cookie policies.

Re-read the examples below with these ideas in mind; change variable names and inputs to match your own project.

The program below demonstrates hello flet. Read the comments on each line, run the code, then change names or values to see how the output shifts.

# Example: Hello Flet
# Run in the REPL or save as a .py file and execute with python.
import flet as ft

def main(page: ft.Page):
    page.title = "PythonDeck"
    page.add(ft.Text("Hello Flet", size=24))

ft.app(target=main)

This sample walks through counter in a small, runnable script. Paste it into the REPL or save it as a .py file before you continue to the next block.

# Example: Counter
# Run in the REPL or save as a .py file and execute with python.
import flet as ft

def main(page):
    txt = ft.Text("0", size=40)
    def add(_):
        txt.value = str(int(txt.value) + 1)
        page.update()
    page.add(txt, ft.ElevatedButton("+1", on_click=add))

ft.app(target=main)

Here is a hands-on illustration of form. Follow the inline comments first; only then execute the snippet and compare the result with what you expected.

# Example: Form
# Run in the REPL or save as a .py file and execute with python.
import flet as ft

def main(page):
    name = ft.TextField(label="Name")
    out  = ft.Text()
    def ok(_):
        out.value = f"Hi {name.value}!"
        page.update()
    page.add(name, ft.ElevatedButton("OK", on_click=ok), out)

ft.app(target=main)

The program below demonstrates counter page. Read the comments on each line, run the code, then change names or values to see how the output shifts.

# Flet builds Flutter UIs in pure Python
import flet as ft  # flet UI

def main(page: ft.Page):  # entry receives Page
    page.title = "Counter"  # window title
    label = ft.Text("0", size=32)  # big numeric label
    def add(_):  # button handler
        label.value = str(int(label.value) + 1)  # increment text
        page.update()  # push UI changes
    page.add(label, ft.ElevatedButton("+1", on_click=add))  # layout

# ft.app(target=main)  # launch desktop/web UI
print("flet page configured")  # headless note

This sample walks through textfield event in a small, runnable script. Paste it into the REPL or save it as a .py file before you continue to the next block.

# Controls expose on_change/on_submit callbacks
import flet as ft  # flet

def main(page: ft.Page):  # page callback
    out = ft.Text()  # output label
    def on_change(e):  # TextField change
        out.value = f"typing: {e.control.value}"  # mirror input
        page.update()  # refresh
    field = ft.TextField(label="Name", on_change=on_change)  # input
    page.add(field, out)  # stack controls

print("handlers attached")  # confirmation

Continue with these focused follow-up lessons on Python Flet:

« Python Kivy All tutorials Python Testing »