Introduction to Flet

Flet is a framework that allows you to build interactive multi-platform apps in Python based on Flutter by Google.

Your first Flet app

Here is a simple example of a counter application built with Flet:

import flet as ft

def main(page: ft.Page):
    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

    def minus_click(e):
        txt_number.value = str(int(txt_number.value) - 1)
        page.update()

    def plus_click(e):
        txt_number.value = str(int(txt_number.value) + 1)
        page.update()

    page.add(
        ft.Row(
            [
                ft.IconButton(ft.icons.REMOVE, on_click=minus_click),
                txt_number,
                ft.IconButton(ft.icons.ADD, on_click=plus_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )

ft.app(target=main)

Key Features

Real-time updates without page refreshes.
Extensive set of Flutter controls.
Deploy as a web, desktop, or mobile app.
Built-in support for light/dark modes.

All-in-one Documentation

Download or copy the entire Flet documentation as a single minified file.

# FLET COMPACT DOCUMENTATION
# Version: 1.0 (Minified)

## INTRODUCTION
Flet builds Flutter apps in Python. No HTML/JS required.

## APP STRUCTURE
import flet as ft
def main(page: ft.Page): pass
ft.app(target=main)

## CORE CONTROLS
- Page: Container for other controls.
- Row/Column: Layout containers.
- Text: Displays text.
- TextField: Input field.
- ElevatedButton/IconButton: Action buttons.
- ListView/GridView: Large collections.
- Tabs/Sidebar: Navigation.

## EVENT HANDLING
Buttons have `on_click`. TextFields have `on_change`, `on_submit`.

## DEPLOYMENT
- Web: `ft.app(target=main, view=ft.AppView.WEB_BROWSER)`
- Desktop/Mobile: Standard `ft.app(target=main)`

... [Rest of the documentation continues below in minified format for AI context efficiency] ...

MCP Server Access

Expose these documentation modules directly to your AI agents (Claude Desktop, Cursor, etc.) via the Model Context Protocol.

Add to your config

{
  "mcpServers": {
    "smoldoc": {
      "command": "npx",
      "args": ["@smoldoc/mcp-server", "--docs", "flet"]
    }
  }
}

This allows your agent to perform semantic search across the entire library and pull in exactly the context it needs to write Flet code for you.

Documentation Index

Module	Description	Size
Core	Basic page and app lifecycle	4.2kb
Controls	All visual building blocks	8.1kb
Events	Input and system events	2.4kb