0
# Flet
1

2
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.
3

4
## Installation
5

6
```bash
7
pip install flet
8
```
9

10
## Package Information
11

12
- **Package**: flet
13
- **Version**: 0.28.3
14
- **License**: Apache-2.0
15
- **Repository**: [github.com/flet-dev/flet](https://github.com/flet-dev/flet)
16
- **Documentation**: [flet.dev/docs](https://flet.dev/docs)
17

18
## Basic Usage
19

20
Create a simple "Hello, World!" application:
21

22
```python
23
import flet as ft
24

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

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

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

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

39
    page.add(
40
        ft.Row(
41
            [
42
                ft.IconButton(ft.icons.REMOVE, on_click=minus_click),
43
                txt_number,
44
                ft.IconButton(ft.icons.ADD, on_click=plus_click),
45
            ],
46
            alignment=ft.MainAxisAlignment.CENTER,
47
        )
48
    )
49

50
ft.app(target=main)
51
```
52

53
## Architecture Overview
54

55
Flet follows a **page-based, event-driven architecture**:
56

57
- **Page**: The root container for your application
58
- **Controls**: UI widgets that make up your interface  
59
- **Events**: User interactions and system notifications
60
- **Theming**: Comprehensive styling and customization system
61

62
## Core Application Functions
63

64
### Application Entry Points
65

66
```python { .api }
67
def app(
68
    target: callable,
69
    name: str = "",
70
    host: str = None,
71
    port: int = 0,
72
    view: Optional[AppView] = AppView.FLET_APP,
73
    assets_dir: str = "assets",
74
    upload_dir: str = None,
75
    web_renderer: WebRenderer = WebRenderer.CANVAS_KIT,
76
    use_color_emoji: bool = False,
77
    route_url_strategy: str = "path",
78
    export_asgi_app: bool = False
79
) -> None
80
```
81

82
Main synchronous application entry point.
83

84
**Parameters:**
85
- `target` (callable): The main function to run
86
- `name` (str, optional): App name
87
- `host` (str, optional): Server host
88
- `port` (int, optional): Server port  
89
- `view` (AppView, optional): App view type (FLET_APP, WEB_BROWSER, etc.)
90
- `assets_dir` (str, optional): Assets directory path
91
- `upload_dir` (str, optional): Upload directory path
92
- `web_renderer` (WebRenderer, optional): Web renderer type
93
- `use_color_emoji` (bool, optional): Enable color emoji
94
- `route_url_strategy` (str, optional): URL routing strategy
95
- `export_asgi_app` (bool, optional): Export as ASGI app
96

97
```python { .api }
98
async def app_async(
99
    target: callable,
100
    name: str = "",
101
    host: str = None,
102
    port: int = 0,
103
    view: Optional[AppView] = AppView.FLET_APP,
104
    assets_dir: str = "assets",
105
    upload_dir: str = None,
106
    web_renderer: WebRenderer = WebRenderer.CANVAS_KIT,
107
    use_color_emoji: bool = False,
108
    route_url_strategy: str = "path"
109
) -> None
110
```
111

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

114
## Core Capabilities
115

116
Flet provides comprehensive capabilities across multiple areas:
117

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

123
**Key Controls:**
124
- Layout: `Column`, `Row`, `Container`, `Stack`, `GridView`, `ListView`
125
- Input: `TextField`, `Checkbox`, `Radio`, `Switch`, `Slider`, `Dropdown`
126
- Buttons: `Button`, `ElevatedButton`, `IconButton`, `FloatingActionButton`
127
- Display: `Text`, `Icon`, `Image`, `Card`, `ListTile`, `DataTable`
128

129
→ [Complete UI Controls Reference](./ui-controls.md)
130

131
### Navigation and Structure
132
- **App Bars**: Standard and Cupertino app bars with customizable actions
133
- **Navigation**: Bottom navigation bars, side rails, drawer menus
134
- **Tabs**: Tabbed interfaces with custom styling
135
- **Routing**: Template-based routing with URL strategies
136

137
**Key Navigation Controls:**
138
- `AppBar`, `CupertinoAppBar`, `BottomAppBar`
139
- `NavigationBar`, `NavigationRail`, `NavigationDrawer`
140
- `Tabs`, `Tab`, `MenuBar`
141

142
→ [Layout and Navigation Reference](./layout-navigation.md)
143

144
### Charts and Visualization
145
- **Built-in Charts**: Bar charts, line charts, pie charts with customizable styling
146
- **Third-party Integration**: Matplotlib and Plotly chart support
147
- **Interactive Features**: Hover effects, selection, zoom, and pan
148

149
**Chart Types:**
150
- `BarChart`, `LineChart`, `PieChart`
151
- `MatplotlibChart`, `PlotlyChart`
152

153
→ [Charts and Visualization Reference](./charts-visualization.md)
154

155
### Theming and Styling
156
- **Complete Theme System**: Material Design and Cupertino themes
157
- **Component Themes**: Individual theming for every control type
158
- **Custom Styling**: Colors, fonts, gradients, shadows, and effects
159
- **Responsive Design**: Adaptive layouts and responsive breakpoints
160

161
**Core Theming:**
162
- `Theme`, `ColorScheme`, `TextTheme`
163
- `Colors`, `CupertinoColors`
164
- Component-specific themes for all controls
165

166
→ [Theming and Styling Reference](./theming-styling.md)
167

168
### Advanced Features
169
Flet includes advanced capabilities for professional applications:
170

171
**2D Graphics and Canvas:**
172
- Custom drawing with shapes, paths, and effects
173
- Canvas-based graphics with full control over rendering
174

175
**Interactive Maps:**
176
- Tile-based maps with multiple layer support
177
- Markers, overlays, and interactive features
178

179
**Media and System Integration:**
180
- Audio/video playback and recording
181
- Camera and microphone access
182
- GPS location services
183
- Device haptic feedback and flashlight control
184
- System permissions management
185

186
→ [Advanced Features Reference](./advanced-features.md)
187

188
### Events and Interaction
189
- **Rich Event System**: Comprehensive event handling for all user interactions
190
- **Gesture Recognition**: Tap, drag, scale, hover, and multi-touch gestures
191
- **Custom Events**: Page events, window events, and control-specific events
192
- **Real-time Communication**: PubSub system for real-time updates
193

194
→ [Events and Interaction Reference](./events-interaction.md)
195

196
### Platform Integration and Utilities
197
- **Cross-Platform Detection**: Utilities for platform-specific behavior
198
- **File Operations**: File pickers, directory utilities, and path management
199
- **Network Utilities**: TCP port detection, IP address resolution
200
- **Authentication**: OAuth integration and user management
201
- **Storage**: Client-side and session storage
202

203
→ [Utilities and Platform Reference](./utilities-platform.md)
204

205
## Page Management
206

207
```python { .api }
208
class Page:
209
    """Main page container for Flet applications."""
210
    
211
    title: str
212
    route: str
213
    horizontal_alignment: CrossAxisAlignment
214
    vertical_alignment: MainAxisAlignment
215
    theme_mode: ThemeMode
216
    theme: Theme
217
    bgcolor: str
218
    width: float
219
    height: float
220
    window_width: float
221
    window_height: float
222
    window_resizable: bool
223
    window_maximizable: bool
224
    window_minimizable: bool
225
    
226
    def add(self, *controls: Control) -> None:
227
        """Add controls to the page."""
228
        
229
    def update(self) -> None:
230
        """Update the page and all its controls."""
231
        
232
    def go(self, route: str) -> None:
233
        """Navigate to a specific route."""
234
        
235
    def show_dialog(self, dialog: AlertDialog) -> None:
236
        """Show a modal dialog."""
237
        
238
    def show_snack_bar(self, snack_bar: SnackBar) -> None:
239
        """Show a snack bar notification."""
240
```
241

242
## Key Enums and Types
243

244
```python { .api }
245
class AppView(Enum):
246
    """Application view types."""
247
    FLET_APP = "flet_app"
248
    WEB_BROWSER = "web_browser"
249
    FLET_APP_HIDDEN = "flet_app_hidden"
250

251
class WebRenderer(Enum):
252
    """Web renderer options."""
253
    AUTO = "auto"
254
    HTML = "html"
255
    CANVAS_KIT = "canvaskit"
256

257
class ThemeMode(Enum):
258
    """Theme mode options."""
259
    SYSTEM = "system"
260
    LIGHT = "light" 
261
    DARK = "dark"
262

263
class MainAxisAlignment(Enum):
264
    """Main axis alignment options."""
265
    START = "start"
266
    END = "end"
267
    CENTER = "center"
268
    SPACE_BETWEEN = "spaceBetween"
269
    SPACE_AROUND = "spaceAround"
270
    SPACE_EVENLY = "spaceEvenly"
271

272
class CrossAxisAlignment(Enum):
273
    """Cross axis alignment options."""
274
    START = "start"
275
    END = "end"
276
    CENTER = "center"
277
    STRETCH = "stretch"
278
    BASELINE = "baseline"
279
```
280

281
## Common Patterns
282

283
### Responsive Design
284
```python
285
import flet as ft
286

287
def main(page: ft.Page):
288
    page.add(
289
        ft.ResponsiveRow([
290
            ft.Container(
291
                ft.Text("Column 1"),
292
                col={"sm": 6, "md": 4, "xl": 2}
293
            ),
294
            ft.Container(
295
                ft.Text("Column 2"), 
296
                col={"sm": 6, "md": 8, "xl": 10}
297
            )
298
        ])
299
    )
300
```
301

302
### Event Handling
303
```python
304
import flet as ft
305

306
def main(page: ft.Page):
307
    def button_clicked(e):
308
        page.add(ft.Text("Button clicked!"))
309
        page.update()
310
    
311
    page.add(
312
        ft.ElevatedButton("Click me!", on_click=button_clicked)
313
    )
314
```
315

316
### Theming
317
```python
318
import flet as ft
319

320
def main(page: ft.Page):
321
    page.theme_mode = ft.ThemeMode.DARK
322
    page.theme = ft.Theme(
323
        color_scheme_seed=ft.colors.GREEN
324
    )
325
    page.update()
326
```
327

328
## Documentation Structure
329

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

332
- **[UI Controls](./ui-controls.md)** - Complete reference for all UI controls
333
- **[Layout and Navigation](./layout-navigation.md)** - Layout systems and navigation patterns  
334
- **[Charts and Visualization](./charts-visualization.md)** - Data visualization capabilities
335
- **[Theming and Styling](./theming-styling.md)** - Visual customization and theming
336
- **[Advanced Features](./advanced-features.md)** - Canvas, maps, media, and system integration
337
- **[Events and Interaction](./events-interaction.md)** - Event handling and user interaction
338
- **[Utilities and Platform](./utilities-platform.md)** - Platform detection and utility functions
339

340
## Getting Started
341

342
1. **Install Flet**: `pip install flet`
343
2. **Create your first app** using the basic example above
344
3. **Explore the controls** in the [UI Controls reference](./ui-controls.md)
345
4. **Add navigation** using the [Layout and Navigation guide](./layout-navigation.md)
346
5. **Customize appearance** with the [Theming system](./theming-styling.md)
347
6. **Add interactivity** using [Events and Interaction](./events-interaction.md)
348

349
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.