Flet

Flet is a rich User Interface (UI) framework to quickly build interactive web, desktop and mobile apps in Python without prior knowledge of web technologies. Built on Flutter's widget system, it provides an imperative programming model that simplifies UI development while maintaining professional-grade aesthetics and performance across all platforms.

Installation

pip install flet

Package Information

• Package: flet
• Version: 0.28.3
• License: Apache-2.0
• Repository: github.com/flet-dev/flet
• Documentation: flet.dev/docs

Basic Usage

Create a simple "Hello, World!" application:

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)

Architecture Overview

Flet follows a page-based, event-driven architecture:

• Page: The root container for your application
• Controls: UI widgets that make up your interface
• Events: User interactions and system notifications
• Theming: Comprehensive styling and customization system

Core Application Functions

Application Entry Points

def app(
    target: callable,
    name: str = "",
    host: str = None,
    port: int = 0,
    view: Optional[AppView] = AppView.FLET_APP,
    assets_dir: str = "assets",
    upload_dir: str = None,
    web_renderer: WebRenderer = WebRenderer.CANVAS_KIT,
    use_color_emoji: bool = False,
    route_url_strategy: str = "path",
    export_asgi_app: bool = False
) -> None

Main synchronous application entry point.

Parameters:

• target (callable): The main function to run
• name (str, optional): App name
• host (str, optional): Server host
• port (int, optional): Server port
• view (AppView, optional): App view type (FLET_APP, WEB_BROWSER, etc.)
• assets_dir (str, optional): Assets directory path
• upload_dir (str, optional): Upload directory path
• web_renderer (WebRenderer, optional): Web renderer type
• use_color_emoji (bool, optional): Enable color emoji
• route_url_strategy (str, optional): URL routing strategy
• export_asgi_app (bool, optional): Export as ASGI app

async def app_async(
    target: callable,
    name: str = "",
    host: str = None,
    port: int = 0,
    view: Optional[AppView] = AppView.FLET_APP,
    assets_dir: str = "assets",
    upload_dir: str = None,
    web_renderer: WebRenderer = WebRenderer.CANVAS_KIT,
    use_color_emoji: bool = False,
    route_url_strategy: str = "path"
) -> None

Main asynchronous application entry point with the same parameters as app() except export_asgi_app.

Core Capabilities

Flet provides comprehensive capabilities across multiple areas:

UI Controls and Layout

• 50+ UI Controls: Buttons, text fields, containers, lists, and more
• Layout Systems: Flexible row/column layouts, stack overlays, responsive grids
• Platform-Specific: Material Design and Cupertino (iOS) variants

Key Controls:

• Layout: Column, Row, Container, Stack, GridView, ListView
• Input: TextField, Checkbox, Radio, Switch, Slider, Dropdown
• Buttons: Button, ElevatedButton, IconButton, FloatingActionButton
• Display: Text, Icon, Image, Card, ListTile, DataTable

→ Complete UI Controls Reference

Navigation and Structure

• App Bars: Standard and Cupertino app bars with customizable actions
• Navigation: Bottom navigation bars, side rails, drawer menus
• Tabs: Tabbed interfaces with custom styling
• Routing: Template-based routing with URL strategies

Key Navigation Controls:

• AppBar, CupertinoAppBar, BottomAppBar
• NavigationBar, NavigationRail, NavigationDrawer
• Tabs, Tab, MenuBar

→ Layout and Navigation Reference

Charts and Visualization

• Built-in Charts: Bar charts, line charts, pie charts with customizable styling
• Third-party Integration: Matplotlib and Plotly chart support
• Interactive Features: Hover effects, selection, zoom, and pan

Chart Types:

• BarChart, LineChart, PieChart
• MatplotlibChart, PlotlyChart

→ Charts and Visualization Reference

Theming and Styling

• Complete Theme System: Material Design and Cupertino themes
• Component Themes: Individual theming for every control type
• Custom Styling: Colors, fonts, gradients, shadows, and effects
• Responsive Design: Adaptive layouts and responsive breakpoints

Core Theming:

• Theme, ColorScheme, TextTheme
• Colors, CupertinoColors
• Component-specific themes for all controls

→ Theming and Styling Reference

Advanced Features

Flet includes advanced capabilities for professional applications:

2D Graphics and Canvas:

• Custom drawing with shapes, paths, and effects
• Canvas-based graphics with full control over rendering

Interactive Maps:

• Tile-based maps with multiple layer support
• Markers, overlays, and interactive features

Media and System Integration:

• Audio/video playback and recording
• Camera and microphone access
• GPS location services
• Device haptic feedback and flashlight control
• System permissions management

→ Advanced Features Reference

Events and Interaction

• Rich Event System: Comprehensive event handling for all user interactions
• Gesture Recognition: Tap, drag, scale, hover, and multi-touch gestures
• Custom Events: Page events, window events, and control-specific events
• Real-time Communication: PubSub system for real-time updates

→ Events and Interaction Reference

Platform Integration and Utilities

• Cross-Platform Detection: Utilities for platform-specific behavior
• File Operations: File pickers, directory utilities, and path management
• Network Utilities: TCP port detection, IP address resolution
• Authentication: OAuth integration and user management
• Storage: Client-side and session storage

→ Utilities and Platform Reference

Page Management

class Page:
    """Main page container for Flet applications."""
    
    title: str
    route: str
    horizontal_alignment: CrossAxisAlignment
    vertical_alignment: MainAxisAlignment
    theme_mode: ThemeMode
    theme: Theme
    bgcolor: str
    width: float
    height: float
    window_width: float
    window_height: float
    window_resizable: bool
    window_maximizable: bool
    window_minimizable: bool
    
    def add(self, *controls: Control) -> None:
        """Add controls to the page."""
        
    def update(self) -> None:
        """Update the page and all its controls."""
        
    def go(self, route: str) -> None:
        """Navigate to a specific route."""
        
    def show_dialog(self, dialog: AlertDialog) -> None:
        """Show a modal dialog."""
        
    def show_snack_bar(self, snack_bar: SnackBar) -> None:
        """Show a snack bar notification."""

Key Enums and Types

class AppView(Enum):
    """Application view types."""
    FLET_APP = "flet_app"
    WEB_BROWSER = "web_browser"
    FLET_APP_HIDDEN = "flet_app_hidden"

class WebRenderer(Enum):
    """Web renderer options."""
    AUTO = "auto"
    HTML = "html"
    CANVAS_KIT = "canvaskit"

class ThemeMode(Enum):
    """Theme mode options."""
    SYSTEM = "system"
    LIGHT = "light" 
    DARK = "dark"

class MainAxisAlignment(Enum):
    """Main axis alignment options."""
    START = "start"
    END = "end"
    CENTER = "center"
    SPACE_BETWEEN = "spaceBetween"
    SPACE_AROUND = "spaceAround"
    SPACE_EVENLY = "spaceEvenly"

class CrossAxisAlignment(Enum):
    """Cross axis alignment options."""
    START = "start"
    END = "end"
    CENTER = "center"
    STRETCH = "stretch"
    BASELINE = "baseline"

Common Patterns

Responsive Design

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.ResponsiveRow([
            ft.Container(
                ft.Text("Column 1"),
                col={"sm": 6, "md": 4, "xl": 2}
            ),
            ft.Container(
                ft.Text("Column 2"), 
                col={"sm": 6, "md": 8, "xl": 10}
            )
        ])
    )

Event Handling

import flet as ft

def main(page: ft.Page):
    def button_clicked(e):
        page.add(ft.Text("Button clicked!"))
        page.update()
    
    page.add(
        ft.ElevatedButton("Click me!", on_click=button_clicked)
    )

Theming

import flet as ft

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.theme = ft.Theme(
        color_scheme_seed=ft.colors.GREEN
    )
    page.update()

Documentation Structure

This documentation is organized into specialized sections due to Flet's extensive API surface (450+ symbols):

• UI Controls - Complete reference for all UI controls
• Layout and Navigation - Layout systems and navigation patterns
• Charts and Visualization - Data visualization capabilities
• Theming and Styling - Visual customization and theming
• Advanced Features - Canvas, maps, media, and system integration
• Events and Interaction - Event handling and user interaction
• Utilities and Platform - Platform detection and utility functions

Getting Started

1. Install Flet: pip install flet
2. Create your first app using the basic example above
3. Explore the controls in the UI Controls reference
4. Add navigation using the Layout and Navigation guide
5. Customize appearance with the Theming system
6. Add interactivity using Events and Interaction

Flet enables rapid development of professional cross-platform applications with Python, eliminating the need for separate frontend technologies while providing native-looking results on all platforms.