Flet isn't just another GUI library—it's a complete reimagining of how Python developers build user interfaces. Imagine writing a single Python script that instantly becomes a live, interactive web application, a native desktop program, or even a mobile interface—all without touching a single line of HTML, CSS, or JavaScript. That's the magic of Flet. Born from the frustration of fragmented UI development, Flet unifies the entire stack into pure Python, giving you real-time, collaborative, and responsive applications with minimal effort. Whether you're a data scientist wanting to share your model, a backend engineer building an admin panel, or a student creating your first app, Flet removes the frontend barrier and puts the power directly in your hands.
import flet as ft
def main(page: ft.Page):
page.title = "My First Flet App"
page.add(ft.Text("Welcome to the future of Python UI development!", size=24, weight="bold"))
ft.app(target=main)
Run this tiny script, and your default browser opens automatically with a fully functional web application. No build steps, no configuration files, no context switching—just pure Python productivity. This is the essence of Flet: simplicity without sacrifice.
For decades, Python developers faced an impossible choice: stick to command-line tools or dive into the complex world of frontend development with its ever-changing frameworks and toolchains. Flet eliminates this false dichotomy entirely. With Flet, your entire application—business logic, state management, and user interface—lives in one cohesive Python file. You get WebSocket-powered real-time updates, multi-user collaboration, and cross-platform deployment out of the box. It's not just convenient; it's liberating. Suddenly, you can prototype a dashboard in minutes, share it with your team via a URL, and deploy it globally—all without leaving your Python comfort zone. Flet isn't just making UI development easier; it's democratizing it for the entire Python community.
import flet as ft
def main(page: ft.Page):
def update_counter(e):
counter.value = str(int(counter.value) + 1)
page.update()
counter = ft.Text("0", size=40, weight="bold")
page.add(
ft.Text("Real-time Counter Demo", size=22, color=ft.colors.BLUE_800),
counter,
ft.ElevatedButton("Click Me!", on_click=update_counter, icon=ft.icons.ADD)
)
ft.app(target=main)
Notice how the counter updates instantly without page reloads or complex state management libraries. That's Flet
handling all the real-time communication behind the scenes. This level of reactivity used to require extensive
frontend knowledge—now it's as simple as calling page.update().
Getting started with Flet is embarrassingly simple. Open your terminal or command prompt and run a single pip command. That's literally it. Flet has no complex system dependencies, no Node.js requirements, and no build tools to configure. It's pure Python and works seamlessly on Windows, macOS, and Linux.
pip install fletOnce installed, you can verify your installation with a quick Python one-liner:
python -c "import flet; print(f'Flet {flet.__version__} installed successfully!')"You're now ready to build world-class applications. No npm, no webpack, no Babel—just Python. This simplicity is revolutionary in today's over-engineered frontend landscape.
Let's break down the anatomy of a Flet application. Every Flet program starts with a main function
that receives a Page object as its parameter. This Page represents your entire
application window or browser tab—it's your canvas, your stage, your command center. Inside this function, you
configure your page properties (title, size, theme) and add UI controls to it. Finally, you call
ft.app(target=main) to launch your application. The beauty is in its simplicity: everything you need
is right there in your Python code.
import flet as ft
def main(page: ft.Page):
# Configure the page
page.title = "Hello, Flet World!"
page.window_width = 700
page.window_height = 500
page.padding = 30
# Add content to the page
page.add(
ft.Text("This is my very first Flet application!", size=26, weight="bold", color=ft.colors.INDIGO_800),
ft.Text("I built this entirely in Python—no HTML, CSS, or JavaScript required!", size=18)
)
ft.app(target=main)
When you run this script, Flet automatically opens your default browser (or creates a desktop window) with your application. Change any text, rerun the script, and see your changes instantly. This immediate feedback loop accelerates development and makes experimentation joyful.
The Page object is the heart and soul of every Flet application. It's not just a container for your
UI controls—it's the central nervous system that coordinates everything. Through the Page object, you
control the window title, dimensions, theme mode (light/dark), background color, padding, routing, dialogs,
notifications, and much more. Think of it as your application's command center where you orchestrate the entire
user experience. Every visual and behavioral aspect of your app flows through this single object, making it
incredibly powerful yet intuitive to use.
import flet as ft
def main(page: ft.Page):
# Comprehensive page configuration
page.title = "Page Control Mastery"
page.theme_mode = ft.ThemeMode.DARK
page.window_width = 800
page.window_height = 600
page.padding = 40
page.bgcolor = ft.colors.GREY_900
page.scroll = "auto"
page.add(
ft.Text("I have complete control over this page!", size=28, weight="bold", color=ft.colors.AMBER),
ft.Text("Dark theme, custom size, padding, background—all configured via the Page object.", size=18, color=ft.colors.GREY_300)
)
ft.app(target=main)
Mastering the Page object is the first step toward building professional Flet applications. Every
property you set here affects the entire user experience, from visual aesthetics to functional behavior.
Flet provides a rich library of UI controls that map directly to native platform components. From basic elements
like Text, TextField, and Button to complex components like
DataTable, Charts, and WebView, everything is implemented as a Python class
that you instantiate and add to your page. These controls automatically adapt to their platform—web, desktop, or
mobile—providing native look and feel without any extra code from you. The consistency across platforms means you
write once and deploy everywhere, while the richness of controls ensures you can build sophisticated interfaces
without limitations.
import flet as ft
def main(page: ft.Page):
page.add(
ft.Text("Essential Flet Controls", size=24, weight="bold", color=ft.colors.BLUE_800),
ft.Divider(),
ft.TextField(label="Text Input", hint_text="Type something here..."),
ft.Checkbox(label="I agree to the terms and conditions"),
ft.Switch(label="Enable notifications", value=True),
ft.Slider(min=0, max=100, value=50, divisions=10, label="Volume: {value}%"),
ft.Dropdown(
label="Select your country",
options=[
ft.dropdown.Option("United States"),
ft.dropdown.Option("Canada"),
ft.dropdown.Option("United Kingdom"),
ft.dropdown.Option("Germany")
]
),
ft.ElevatedButton("Submit Form", icon=ft.icons.SEND, width=200)
)
ft.app(target=main)Each control is designed with developer experience in mind—sensible defaults, clear property names, and comprehensive documentation. You can customize every aspect of these controls through their properties, making them as simple or as sophisticated as your application requires.
Interactivity is what transforms a static interface into a dynamic application. In Flet, you add interactivity by
attaching Python functions to control events like on_click, on_change,
on_submit, and many others. These event handler functions receive an event object that contains
useful information about what triggered the event, including references to the control that fired it and any
relevant data. The beauty of Flet's event system is its simplicity—you're just writing regular Python functions
that respond to user actions, with no complex callback hell or state management libraries required.
import flet as ft
def main(page: ft.Page):
def greet_user(e):
if name_field.value.strip():
greeting = ft.Text(f"Hello, {name_field.value.strip()}! 👋", size=20, color=ft.colors.GREEN_700)
page.add(greeting)
name_field.value = ""
page.update()
else:
error = ft.Text("Please enter your name!", color=ft.colors.RED_600)
page.add(error)
page.update()
# Remove error message after 2 seconds
page.remove(error)
name_field = ft.TextField(label="Enter your name", on_submit=greet_user)
greet_button = ft.ElevatedButton("Greet Me!", on_click=greet_user)
page.add(
ft.Text("Interactive Greeting App", size=22, weight="bold"),
name_field,
greet_button
)
ft.app(target=main)Notice how the same event handler function works for both the button click and the Enter key press in the text field. This consistency reduces code duplication and makes your applications more maintainable. Event handling in Flet feels natural because it leverages Python's strengths—functions, closures, and straightforward control flow.
Creating well-organized, responsive layouts is crucial for good user experience. Flet provides a powerful yet
intuitive layout system based on three fundamental concepts: Row for horizontal arrangement,
Column for vertical arrangement, and Container for adding padding, margins, borders, and
backgrounds to any control. These layout controls can be nested infinitely, allowing you to create complex
interfaces with clean, readable code. The expand property makes controls fill available space
proportionally, while the alignment and spacing properties give you precise control over
positioning and spacing.
import flet as ft
def main(page: ft.Page):
main_layout = ft.Column(
controls=[
ft.Container(
content=ft.Text("Application Header", size=28, weight="bold", color=ft.colors.WHITE),
padding=20,
bgcolor=ft.colors.INDIGO_700,
alignment=ft.alignment.center
),
ft.Row(
controls=[
ft.Container(
content=ft.Column([
ft.Text("Navigation", weight="bold", size=18),
ft.Text("Home\\nDashboard\\nSettings\\nProfile", color=ft.colors.GREY_700)
], spacing=10),
padding=20,
bgcolor=ft.colors.GREY_100,
width=200
),
ft.Container(
content=ft.Column([
ft.Text("Main Content Area", size=22, weight="bold"),
ft.Text("This area expands to fill the remaining space available in the row.",
color=ft.colors.GREY_600)
], spacing=15),
expand=True,
padding=25,
bgcolor=ft.colors.WHITE,
border=ft.border.all(1, ft.colors.GREY_300)
)
],
expand=True,
spacing=20
)
],
expand=True,
spacing=0
)
page.add(main_layout)
ft.app(target=main)This example demonstrates a classic two-column layout with a fixed-width sidebar and an expanding main content
area. The expand=True property on the main content container ensures it fills all available
horizontal space, creating a responsive design that adapts to different window sizes. Layout management in Flet is
declarative—you describe what you want, and Flet handles the complex positioning calculations automatically.
Visual design matters, and Flet makes it easy to create beautiful, consistent interfaces through comprehensive
theming and styling capabilities. You can define global themes that control colors, typography, and component
styles across your entire application, or apply specific styles to individual controls. Flet uses Material Design
as its foundation but allows extensive customization through the Theme class and control-specific
style properties. This ensures your application looks professional and polished while maintaining brand
consistency.
import flet as ft
def main(page: ft.Page):
# Define a custom theme
page.theme = ft.Theme(
color_scheme=ft.ColorScheme(
primary=ft.colors.PURPLE,
secondary=ft.colors.AMBER,
surface=ft.colors.GREY_100,
background=ft.colors.WHITE
),
font_family="Georgia",
use_material3=True,
visual_density=ft.ThemeVisualDensity.COMFORTABLE
)
page.add(
ft.Text("Custom Themed Application", size=26, weight="bold"),
ft.Text("This entire app uses a custom purple and amber color scheme with Georgia font.", size=16),
ft.ElevatedButton("Primary Action", style=ft.ButtonStyle(
color=ft.colors.WHITE,
bgcolor=ft.colors.PURPLE,
padding=ft.padding.symmetric(horizontal=30, vertical=15)
)),
ft.OutlinedButton("Secondary Action", style=ft.ButtonStyle(
color=ft.colors.PURPLE,
bgcolor=ft.colors.TRANSPARENT,
side=ft.BorderSide(2, ft.colors.PURPLE)
))
)
ft.app(target=main)Theming in Flet ensures visual consistency across all components while allowing for easy customization. You can create multiple themes for different parts of your application or switch between light and dark modes dynamically. The result is applications that look professionally designed without requiring graphic design expertise.
Text is the foundation of most user interfaces, and Flet provides powerful text handling capabilities that go far
beyond simple labels. You can apply rich formatting to text using the TextSpan class, which allows
you to mix different styles, colors, sizes, and weights within a single text block. You can also control
typography through font families, sizes, weights, and alignment. For more complex scenarios, Flet supports
selectable text, auto-sizing, and overflow handling, ensuring your text content always looks its best regardless
of content length or container size.
import flet as ft
def main(page: ft.Page):
rich_text = ft.Text(
size=18,
spans=[
ft.TextSpan("Welcome to ", ft.TextStyle(color=ft.colors.GREY_800)),
ft.TextSpan("Flet", ft.TextStyle(weight="bold", color=ft.colors.BLUE_800, size=20)),
ft.TextSpan(", the ", ft.TextStyle(color=ft.colors.GREY_800)),
ft.TextSpan("ultimate", ft.TextStyle(italic=True, color=ft.colors.PURPLE_700)),
ft.TextSpan(" Python UI framework!", ft.TextStyle(color=ft.colors.GREY_800))
]
)
page.add(
ft.Text("Rich Text Formatting", size=24, weight="bold", color=ft.colors.INDIGO_800),
rich_text,
ft.Text("You can mix styles, colors, weights, and sizes in a single text element.",
italic=True, color=ft.colors.GREY_600)
)
ft.app(target=main)This rich text capability eliminates the need for complex HTML-like markup or multiple text controls. You can create engaging, dynamic text content that guides users' attention and enhances readability—all through clean, Pythonic code.
Collecting user input is fundamental to interactive applications, and Flet provides a comprehensive suite of input controls designed for excellent user experience. From basic text fields with validation and helper text to specialized inputs like date pickers, time pickers, and file uploaders, Flet covers all common input scenarios. Each control includes built-in accessibility features, platform-appropriate styling, and extensive customization options. You can add icons, set keyboard types, enable auto-correction, and implement real-time validation to create forms that are both functional and user-friendly.
import flet as ft
def main(page: ft.Page):
email_field = ft.TextField(
label="Email Address",
hint_text="your.name@company.com",
prefix_icon=ft.icons.EMAIL,
helper_text="We'll never share your email with anyone else.",
keyboard_type=ft.KeyboardType.EMAIL,
autofocus=True,
width=400
)
password_field = ft.TextField(
label="Password",
password=True,
can_reveal_password=True,
prefix_icon=ft.icons.LOCK,
helper_text="Must be at least 8 characters long"
)
page.add(
ft.Text("Advanced Input Controls", size=24, weight="bold"),
email_field,
password_field,
ft.Text("Notice the icons, helper text, and specialized keyboard types!",
color=ft.colors.GREY_600, italic=True)
)
ft.app(target=main)These input controls automatically adapt to their platform—mobile devices show appropriate keyboards, desktop applications provide native styling, and web applications work seamlessly across browsers. This platform intelligence means you don't have to write conditional code for different environments.
Buttons are the primary way users interact with your application, and Flet provides a complete family of button
variants to match different use cases and visual hierarchies. ElevatedButton for primary actions,
OutlinedButton for secondary actions, TextButton for tertiary actions, and
IconButton for icon-only interactions. Each button type follows Material Design guidelines while
allowing extensive customization through the ButtonStyle class. Choosing the right button variant
improves usability by creating clear visual hierarchy and setting appropriate user expectations.
import flet as ft
def main(page: ft.Page):
page.add(
ft.Text("Button Variants and Hierarchy", size=24, weight="bold", color=ft.colors.BLUE_800),
ft.ElevatedButton("Primary Action (Elevated)", icon=ft.icons.ADD, width=300),
ft.OutlinedButton("Secondary Action (Outlined)", icon=ft.icons.EDIT, width=300),
ft.TextButton("Tertiary Action (Text)", icon=ft.icons.INFO, width=300),
ft.Row([
ft.IconButton(ft.icons.FAVORITE, icon_color=ft.colors.RED_400),
ft.IconButton(ft.icons.SHARE, icon_color=ft.colors.BLUE_400),
ft.IconButton(ft.icons.MORE_VERT, icon_color=ft.colors.GREY_600)
], alignment=ft.MainAxisAlignment.CENTER)
)
ft.app(target=main)Using the appropriate button variant for each action creates a more intuitive interface. Primary actions stand out with elevation and color, secondary actions are less prominent but still visible, and tertiary actions blend into the background until needed. This visual hierarchy guides users through your application's workflow naturally.
Displaying collections of data is a common requirement in applications, and Flet provides two powerful controls
for this purpose: ListView for simple lists and DataTable for structured tabular data.
Both controls are optimized for performance with virtualized rendering that only creates UI elements for visible
items, making them suitable for large datasets. DataTable supports sorting, selection, pagination,
and column customization, while ListView provides flexible item arrangement with support for
dividers, headers, and custom item templates.
import flet as ft
def main(page: ft.Page):
data_table = ft.DataTable(
heading_row_color=ft.colors.BLUE_50,
columns=[
ft.DataColumn(ft.Text("Product", weight="bold")),
ft.DataColumn(ft.Text("Category", weight="bold")),
ft.DataColumn(ft.Text("Price", weight="bold"), numeric=True),
ft.DataColumn(ft.Text("Stock", weight="bold"), numeric=True)
],
rows=[
ft.DataRow([
ft.DataCell(ft.Text("Laptop Pro")),
ft.DataCell(ft.Text("Electronics")),
ft.DataCell(ft.Text("$1,299")),
ft.DataCell(ft.Text("24"))
]),
ft.DataRow([
ft.DataCell(ft.Text("Wireless Mouse")),
ft.DataCell(ft.Text("Accessories")),
ft.DataCell(ft.Text("$45")),
ft.DataCell(ft.Text("156"))
]),
ft.DataRow([
ft.DataCell(ft.Text("Mechanical Keyboard")),
ft.DataCell(ft.Text("Accessories")),
ft.DataCell(ft.Text("$120")),
ft.DataCell(ft.Text("89"))
])
]
)
page.add(
ft.Text("Professional Data Table", size=24, weight="bold"),
ft.Container(data_table, padding=10, border=ft.border.all(1, ft.colors.GREY_300), border_radius=8)
)
ft.app(target=main)Data tables in Flet provide enterprise-grade functionality with minimal code. You can easily add sorting by making columns sortable, implement row selection for batch operations, or customize cell appearance based on data values. This makes Flet ideal for admin panels, dashboards, and data-intensive applications.
As your applications grow in complexity, you'll need multiple views or pages. Flet's routing system enables you
to build single-page applications (SPAs) with clean URLs, browser back-button support, and seamless navigation
between views. You define routes as strings (like "/dashboard" or "/settings/profile") and handle route changes
through the on_route_change event. Each route can have its own view with a unique AppBar, content,
and behavior, while sharing common state and logic.
import flet as ft
def main(page: ft.Page):
def route_change(e):
page.views.clear()
if page.route == "/":
page.views.append(
ft.View(
"/",
[
ft.AppBar(title=ft.Text("Home"), bgcolor=ft.colors.SURFACE_VARIANT),
ft.Text("Welcome to the Home page!", size=24, weight="bold"),
ft.ElevatedButton("Go to Dashboard", on_click=lambda _: page.go("/dashboard"))
]
)
)
elif page.route == "/dashboard":
page.views.append(
ft.View(
"/dashboard",
[
ft.AppBar(title=ft.Text("Dashboard"), bgcolor=ft.colors.BLUE),
ft.Text("Dashboard Analytics", size=24, weight="bold", color=ft.colors.BLUE_800),
ft.ElevatedButton("Back to Home", on_click=lambda _: page.go("/"))
]
)
)
page.update()
page.on_route_change = route_change
page.go(page.route if page.route else "/")
ft.app(target=main)This routing system creates a true SPA experience with no page reloads during navigation. The browser's address bar updates automatically, users can bookmark specific views, and the back button works as expected. This is essential for professional web applications while maintaining the simplicity of Python development.
Sometimes you need to interrupt the user's flow to get confirmation, show important information, or collect
additional input. Flet provides several dialog types for these scenarios: AlertDialog for
confirmations and alerts, BottomSheet for mobile-friendly menus, and Dismissible for
swipeable content. Dialogs appear as overlays that dim the background content, creating clear visual hierarchy and
focus. They support custom content, multiple actions, and automatic dismissal, making them perfect for critical
user interactions.
import flet as ft
def main(page: ft.Page):
def show_delete_confirmation(e):
def close_dialog(e):
dlg.open = False
page.update()
def confirm_delete(e):
close_dialog(e)
page.add(ft.Text("Item permanently deleted!", color=ft.colors.RED_600))
dlg = ft.AlertDialog(
modal=True,
title=ft.Text("Delete Item?"),
content=ft.Text("This action cannot be undone. Are you sure you want to delete this item?"),
actions=[
ft.TextButton("Cancel", on_click=close_dialog),
ft.ElevatedButton("Delete", on_click=confirm_delete, bgcolor=ft.colors.RED_600, color=ft.colors.WHITE)
],
actions_alignment=ft.MainAxisAlignment.END
)
page.dialog = dlg
dlg.open = True
page.update()
page.add(
ft.Text("Dialog Examples", size=24, weight="bold"),
ft.ElevatedButton("Delete Item", on_click=show_delete_confirmation, icon=ft.icons.DELETE)
)
ft.app(target=main)Dialogs in Flet prevent accidental destructive actions while providing clear paths forward. The modal behavior ensures users must explicitly acknowledge the dialog before continuing, which is crucial for data integrity and user confidence.
File handling is essential for many applications, and Flet provides a consistent API for file operations across
all platforms. The FilePicker control allows users to select files for upload, choose save locations,
or pick directories. On web platforms, files are handled through browser APIs with appropriate security
restrictions, while desktop applications have full file system access. Flet abstracts away these platform
differences, giving you a unified interface that works everywhere.
import flet as ft
def main(page: ft.Page):
def pick_file_result(e: ft.FilePickerResultEvent):
if e.files:
selected_files.value = f"Selected: {', '.join(f.name for f in e.files)}"
selected_files.color = ft.colors.GREEN_700
else:
selected_files.value = "No files selected"
selected_files.color = ft.colors.GREY_600
page.update()
file_picker = ft.FilePicker(on_result=pick_file_result)
selected_files = ft.Text()
# File picker must be added to page overlay
page.overlay.append(file_picker)
page.add(
ft.Text("File Picker Example", size=24, weight="bold"),
ft.ElevatedButton(
"Pick Files",
icon=ft.icons.UPLOAD_FILE,
on_click=lambda _: file_picker.pick_files(
allow_multiple=True,
file_type=ft.FilePickerFileType.IMAGE
)
),
selected_files
)
ft.app(target=main)This file picker example demonstrates how to select multiple image files with appropriate file type filtering. The same code works identically on web, Windows, macOS, and Linux—Flet handles all the platform-specific implementation details behind the scenes.
Visual content dramatically improves user engagement, and Flet makes it easy to incorporate images and media into
your applications. The Image control supports various sources including URLs, local file paths, and
base64-encoded data. You can control image sizing, cropping, repetition, and loading states with comprehensive
properties. For more advanced scenarios, Flet supports animated GIFs, SVG files, and even video playback through
the Video control (in development).
import flet as ft
def main(page: ft.Page):
page.add(
ft.Text("Image Handling in Flet", size=24, weight="bold", color=ft.colors.INDIGO_800),
ft.Row([
ft.Image(
src="https://picsum.photos/200/150?random=1",
width=200,
height=150,
fit=ft.ImageFit.COVER,
border_radius=10
),
ft.Image(
src="https://picsum.photos/200/150?random=2",
width=200,
height=150,
fit=ft.ImageFit.CONTAIN,
border_radius=10
),
ft.Image(
src="https://picsum.photos/200/150?random=3",
width=200,
height=150,
fit=ft.ImageFit.FILL,
border_radius=10
)
], spacing=20),
ft.Text("Different image fit modes: COVER, CONTAIN, and FILL",
color=ft.colors.GREY_600, italic=True)
)
ft.app(target=main)Image handling in Flet includes automatic loading states, error handling, and responsive sizing. Images adapt to their containers and maintain aspect ratios appropriately, ensuring your visual content always looks professional regardless of source dimensions.
Subtle animations enhance user experience by providing visual feedback and creating a sense of continuity. Flet
makes animation incredibly simple through the animate property, which you can apply to any control
that supports property changes. When you modify a property like width, height, color, or opacity, Flet
automatically animates the transition over a specified duration with your choice of easing curve. This creates
smooth, native-feeling animations without complex animation libraries or timeline management.
import flet as ft
def main(page: ft.Page):
def animate_container(e):
# Toggle between two states
if c.width == 150:
c.width = 300
c.height = 200
c.bgcolor = ft.colors.BLUE_400
c.content = ft.Text("Expanded State", color=ft.colors.WHITE, weight="bold")
else:
c.width = 150
c.height = 100
c.bgcolor = ft.colors.RED_400
c.content = ft.Text("Collapsed", color=ft.colors.WHITE, weight="bold")
# Apply smooth animation
c.animate = ft.animation.Animation(600, ft.AnimationCurve.EASE_IN_OUT)
page.update()
c = ft.Container(
width=150,
height=100,
bgcolor=ft.colors.RED_400,
border_radius=12,
content=ft.Text("Collapsed", color=ft.colors.WHITE, weight="bold"),
alignment=ft.alignment.center
)
page.add(
ft.Text("Smooth Container Animation", size=24, weight="bold"),
ft.ElevatedButton("Toggle Animation", on_click=animate_container),
c
)
ft.app(target=main)Animations in Flet run at 60fps and feel native because they're handled by the underlying platform's animation system. You can animate multiple properties simultaneously, chain animations together, or create complex sequences—all through simple property assignments.
Your applications should look great on phones, tablets, desktops, and everything in between. Flet provides
powerful responsive design capabilities through the ResponsiveRow control and adaptive layout
properties. The ResponsiveRow automatically adjusts the number of columns based on screen size, while
the col property on child controls defines how many columns they should occupy at different
breakpoints. This creates truly responsive layouts that adapt seamlessly to any viewport size.
import flet as ft
def main(page: ft.Page):
responsive_grid = ft.ResponsiveRow(
controls=[
ft.Container(
content=ft.Text("Card 1", weight="bold", size=18),
col={"sm": 6, "md": 4, "xl": 3},
padding=15,
bgcolor=ft.colors.BLUE_50,
border_radius=10
),
ft.Container(
content=ft.Text("Card 2", weight="bold", size=18),
col={"sm": 6, "md": 4, "xl": 3},
padding=15,
bgcolor=ft.colors.GREEN_50,
border_radius=10
),
ft.Container(
content=ft.Text("Card 3", weight="bold", size=18),
col={"sm": 6, "md": 4, "xl": 3},
padding=15,
bgcolor=ft.colors.AMBER_50,
border_radius=10
),
ft.Container(
content=ft.Text("Card 4", weight="bold", size=18),
col={"sm": 6, "md": 4, "xl": 3},
padding=15,
bgcolor=ft.colors.PURPLE_50,
border_radius=10
)
],
run_spacing=15,
column_spacing=15
)
page.add(
ft.Text("Responsive Grid Layout", size=24, weight="bold", color=ft.colors.INDIGO_800),
ft.Text("Resize your browser window to see the layout adapt automatically!",
color=ft.colors.GREY_600, italic=True),
responsive_grid
)
ft.app(target=main)The responsive grid automatically adjusts from 2 columns on small screens to 4 columns on large screens. The
col property uses breakpoint notation: "sm" for small screens (phones), "md" for medium screens
(tablets), and "xl" for extra-large screens (desktops). This approach eliminates the need for complex media
queries or JavaScript-based responsive logic.
As applications grow in complexity, managing state becomes critical. Flet offers multiple state management
patterns to suit different scenarios. For simple cases, you can use local variables within your main function. For
reusable components, the UserControl class encapsulates both UI and state logic. For complex
applications with shared state, you can implement observer patterns, context systems, or integrate with external
state management libraries. The key principle is that state changes should trigger UI updates through the
page.update() method or the control.update() method for individual components.
import flet as ft
class TodoItem(ft.UserControl):
def __init__(self, task_name, delete_callback):
super().__init__()
self.task_name = task_name
self.delete_callback = delete_callback
self.completed = False
def build(self):
self.display_task = ft.Text(self.task_name, size=16)
self.checkbox = ft.Checkbox(
value=False,
on_change=self.toggle_completed
)
self.delete_btn = ft.IconButton(
icon=ft.icons.DELETE_OUTLINE,
on_click=self.delete_clicked
)
return ft.Row([
self.checkbox,
self.display_task,
self.delete_btn
], alignment=ft.MainAxisAlignment.SPACE_BETWEEN)
def toggle_completed(self, e):
self.completed = e.control.value
self.display_task.style = ft.TextStyle(decoration=ft.TextDecoration.LINE_THROUGH) if self.completed else None
self.update()
def delete_clicked(self, e):
self.delete_callback(self)
def main(page: ft.Page):
def add_task(e):
if new_task.value:
todo = TodoItem(new_task.value, delete_task)
tasks.controls.append(todo)
new_task.value = ""
page.update()
def delete_task(task):
tasks.controls.remove(task)
page.update()
new_task = ft.TextField(hint_text="What needs to be done?", expand=True)
tasks = ft.Column()
page.add(
ft.Text("State Management with UserControl", size=24, weight="bold"),
ft.Row([new_task, ft.ElevatedButton("Add", on_click=add_task)]),
tasks
)
ft.app(target=main)This todo list example demonstrates encapsulated state management using UserControl. Each todo item
manages its own completed state and provides a callback for deletion. This pattern promotes code reuse,
maintainability, and separation of concerns—essential for professional application development.
Collecting high-quality user input is crucial for application reliability, and Flet provides straightforward form validation capabilities. You can implement client-side validation by checking input values before processing them, displaying error messages through dedicated controls, and preventing form submission until all requirements are met. For more complex scenarios, you can integrate with server-side validation or use regular expressions for pattern matching. The key is providing immediate, clear feedback to users about what went wrong and how to fix it.
import flet as ft
import re
def main(page: ft.Page):
def validate_and_submit(e):
errors = []
# Validate name
if not name_field.value or len(name_field.value.strip()) < 2:
errors.append("Name must be at least 2 characters long")
# Validate email
email_pattern = r'^[\\w\\.-]+@[\\w\\.-]+\\.\\w+$'
if not email_field.value or not re.match(email_pattern, email_field.value):
errors.append("Please enter a valid email address")
# Validate password
if len(password_field.value) < 8:
errors.append("Password must be at least 8 characters long")
# Display errors or submit
if errors:
error_list.controls.clear()
for error in errors:
error_list.controls.append(ft.Text(f"• {error}", color=ft.colors.RED_600))
error_container.visible = True
else:
error_container.visible = False
page.add(ft.Text("Registration successful!", color=ft.colors.GREEN_700))
page.update()
name_field = ft.TextField(label="Full Name")
email_field = ft.TextField(label="Email Address")
password_field = ft.TextField(label="Password", password=True, can_reveal_password=True)
error_list = ft.Column()
error_container = ft.Container(
content=error_list,
padding=10,
bgcolor=ft.colors.RED_50,
border_radius=5,
visible=False
)
page.add(
ft.Text("Form Validation Example", size=24, weight="bold"),
name_field,
email_field,
password_field,
error_container,
ft.ElevatedButton("Register", on_click=validate_and_submit, width=200)
)
ft.app(target=main)This registration form demonstrates comprehensive client-side validation with clear error messaging. The validation logic is centralized in a single function, making it easy to maintain and extend. Error messages appear in a dedicated container with appropriate styling, guiding users toward successful form completion.
Reaching international audiences requires proper localization, and while Flet doesn't have built-in
internationalization, it integrates seamlessly with Python's standard gettext module. You can
externalize all user-facing text into translation files, support multiple languages simultaneously, and switch
languages dynamically at runtime. This approach ensures your applications are accessible to users worldwide while
maintaining clean, maintainable code structure.
import flet as ft
import gettext
# Simplified i18n setup (in real apps, use proper .po/.mo files)
translations = {
'en': {
'welcome': 'Welcome to our application!',
'greet': 'Hello, {name}!',
'language': 'Language'
},
'es': {
'welcome': '¡Bienvenido a nuestra aplicación!',
'greet': '¡Hola, {name}!',
'language': 'Idioma'
}
}
def main(page: ft.Page):
current_lang = 'en'
def change_language(e):
nonlocal current_lang
current_lang = 'es' if current_lang == 'en' else 'en'
update_ui()
def update_ui():
welcome_text.value = translations[current_lang]['welcome']
lang_button.text = translations[current_lang]['language']
page.update()
welcome_text = ft.Text(translations[current_lang]['welcome'], size=22)
lang_button = ft.ElevatedButton(
translations[current_lang]['language'],
on_click=change_language
)
page.add(welcome_text, lang_button)
ft.app(target=main)While this example uses a simplified dictionary approach, production applications would use proper gettext translation files (.po/.mo) with tools like Poedit for translation management. The key principle is separating user-facing text from code, making localization straightforward and maintainable.
Writing tests is essential for maintaining application quality, and Flet applications can be tested using
standard Python testing frameworks like pytest. You can write unit tests for business logic, integration tests for
component interactions, and end-to-end tests for complete user flows. The key is mocking the Page
object and UI controls to isolate the logic you want to test. Since Flet applications are pure Python code, they
integrate seamlessly with existing testing ecosystems and CI/CD pipelines.
# test_calculator.py
import pytest
from flet import Page, Text, ElevatedButton
def test_calculator_addition():
"""Test that the calculator correctly adds two numbers"""
# Mock page object
class MockPage:
def __init__(self):
self.controls = []
def add(self, *controls):
self.controls.extend(controls)
def update(self):
pass
# Setup
page = MockPage()
result_text = Text("0")
# Calculator logic
def add_numbers(e):
result_text.value = str(5 + 3) # Simulate 5 + 3
page.add(result_text)
# Execute
add_numbers(None)
# Assert
assert result_text.value == "8"
assert len(page.controls) == 1This unit test demonstrates how to test Flet application logic in isolation. By mocking the Page object, you can verify that your event handlers produce the expected results without launching a browser or creating actual UI elements. This approach enables fast, reliable testing that catches regressions early in the development process.
Sharing your Flet application globally is as simple as running a single command. Flet provides a built-in hosting
service that deploys your application to a public URL instantly. Your app becomes available at
https://your-username.flet.app with SSL encryption, automatic scaling, and global CDN
distribution—all without any DevOps knowledge or infrastructure management. This deployment model is perfect for
prototypes, internal tools, and public applications that need to be accessible from anywhere.
# In your terminal, from your project directory
flet publishWhen you run this command, Flet packages your application, uploads it to their hosting infrastructure, and
provides you with a public URL. The entire process takes seconds, and your application is immediately available to
anyone with the link. Updates are just as simple—run flet publish again to deploy a new version. This
frictionless deployment workflow accelerates development cycles and enables rapid iteration.
For applications that need to run offline or be distributed as native desktop software, Flet integrates seamlessly with PyInstaller to create standalone executables. Your Python application gets bundled with a Python interpreter, all dependencies, and a Flet runtime into a single executable file that runs on Windows (.exe), macOS (.app), or Linux. End users don't need to have Python installed—they just double-click your application and it runs immediately.
# Install PyInstaller
pip install pyinstaller
# Create a spec file for better control (optional)
pyi-makespec --onefile --windowed --name "MyFletApp" my_app.py
# Build the executable
pyinstaller my_app.spec
# Or build directly
pyinstaller --onefile --windowed --name "MyFletApp" my_app.pyThe resulting executable contains everything needed to run your application—no installation required. This makes Flet ideal for internal business applications, kiosk software, or any scenario where you need to distribute software to users who aren't technical. The desktop experience feels completely native, with proper window management, system integration, and performance.
While native mobile builds are still in development, Flet applications already work beautifully on mobile devices through progressive web app (PWA) technology. When users visit your Flet web application on their phone or tablet, they can "install" it to their home screen, where it runs in a dedicated window without browser chrome. PWAs support offline functionality, push notifications, and native-like performance, providing an excellent mobile experience today while native mobile support develops.
import flet as ft
def main(page: ft.Page):
# Enable PWA features
page.pwa = True
page.title = "My Mobile App"
page.description = "A beautiful Flet application that works on mobile devices"
page.add(
ft.Text("Mobile-Ready Flet App", size=26, weight="bold"),
ft.Text("Visit this app on your phone and tap 'Add to Home Screen' to install it like a native app!",
size=16, color=ft.colors.GREY_700),
ft.Image(src="https://flet.dev/img/logo.svg", width=200, height=100)
)
ft.app(target=main)By setting page.pwa = True, you enable progressive web app features that make your application
installable on mobile devices. Users get app-like experiences with offline capabilities, while you maintain a
single codebase for all platforms. As Flet's mobile support matures, you'll be able to build truly native iOS and
Android applications from the same Python code.
Performance is critical for user satisfaction, and Flet provides several techniques for optimizing application
speed. The most important principle is minimizing unnecessary UI updates—only call page.update() when
you actually need to refresh the interface. For large lists, use virtualized controls like ListView
that only render visible items. Avoid heavy computations in the main thread by using async/await for I/O
operations or threading for CPU-intensive tasks. Flet's architecture is designed for efficiency, but smart
development practices ensure your applications remain responsive even under heavy loads.
import flet as ft
def main(page: ft.Page):
# Efficient large list with virtualization
large_list = ft.ListView(
controls=[ft.Text(f"Item {i}", size=16) for i in range(10000)],
height=500,
auto_scroll=False,
spacing=5
)
page.add(
ft.Text("Optimized Large List (10,000 items)", size=24, weight="bold"),
ft.Text("Only visible items are rendered—scroll to see smooth performance!",
color=ft.colors.GREY_600, italic=True),
large_list
)
ft.app(target=main)This example demonstrates Flet's virtualized list rendering, which maintains smooth scrolling performance even with 10,000 items. The key insight is that Flet only creates UI elements for items currently visible in the viewport, dramatically reducing memory usage and rendering time. This optimization happens automatically—you don't need to implement complex virtualization logic yourself.
Modern applications rarely exist in isolation—they need to connect to external APIs for data, authentication, and
services. Flet applications can integrate with any REST API using standard Python libraries like
requests or httpx. You can fetch data, send updates, handle authentication tokens, and
manage API errors—all within your Python code. For better user experience, implement loading states, error
handling, and caching strategies to make API interactions feel seamless and reliable.
import flet as ft
import requests
def main(page: ft.Page):
def fetch_weather(e):
city = city_input.value.strip()
if not city:
result.value = "Please enter a city name"
result.color = ft.colors.RED_600
page.update()
return
try:
loading.visible = True
page.update()
# Fetch weather data
api_key = "YOUR_API_KEY" # Get from openweathermap.org
url = f"http://api.openweathermap.org/data/2.5/weather?q={city}&appid={api_key}&units=metric"
response = requests.get(url)
data = response.json()
if response.status_code == 200:
temp = data['main']['temp']
desc = data['weather'][0]['description'].title()
result.value = f"{city}: {temp}°C, {desc}"
result.color = ft.colors.BLUE_800
else:
result.value = f"Error: {data.get('message', 'Unknown error')}"
result.color = ft.colors.RED_600
except Exception as ex:
result.value = f"Network error: {str(ex)}"
result.color = ft.colors.RED_600
finally:
loading.visible = False
page.update()
city_input = ft.TextField(label="Enter city name", width=300)
result = ft.Text(size=18)
loading = ft.ProgressRing(visible=False)
page.add(
ft.Text("Weather API Integration", size=24, weight="bold"),
ft.Row([city_input, ft.ElevatedButton("Get Weather", on_click=fetch_weather)]),
loading,
result
)
ft.app(target=main)This weather app example demonstrates proper API integration with loading states, error handling, and user feedback. The key practices include showing loading indicators during network requests, handling different error scenarios gracefully, and providing clear success messages. Always remember to secure API keys properly in production applications—never hardcode them in client-side code.
Most applications need to store data persistently, and Flet integrates seamlessly with Python's database ecosystem. For local storage, SQLite provides a lightweight, file-based database that requires no server setup. For server-side applications, you can connect to PostgreSQL, MySQL, MongoDB, or any other database using standard Python drivers. The key is keeping database operations asynchronous or in separate threads to prevent blocking the UI thread, ensuring your application remains responsive during data operations.
import flet as ft
import sqlite3
import threading
def main(page: ft.Page):
# Initialize database in a separate thread to avoid blocking
def init_db():
conn = sqlite3.connect("tasks.db")
conn.execute("""
CREATE TABLE IF NOT EXISTS tasks (
id INTEGER PRIMARY KEY AUTOINCREMENT,
description TEXT NOT NULL,
completed BOOLEAN DEFAULT 0
)
""")
conn.commit()
conn.close()
threading.Thread(target=init_db).start()
def load_tasks():
tasks.controls.clear()
try:
conn = sqlite3.connect("tasks.db")
cursor = conn.cursor()
cursor.execute("SELECT id, description, completed FROM tasks ORDER BY id")
for row in cursor.fetchall():
task_id, desc, completed = row
checkbox = ft.Checkbox(
label=desc,
value=bool(completed),
on_change=lambda e, tid=task_id: toggle_task(tid, e.control.value)
)
tasks.controls.append(checkbox)
conn.close()
except Exception as ex:
tasks.controls.append(ft.Text(f"Error loading tasks: {ex}", color=ft.colors.RED))
page.update()
def add_task(e):
if new_task.value.strip():
try:
conn = sqlite3.connect("tasks.db")
conn.execute("INSERT INTO tasks (description) VALUES (?)", (new_task.value.strip(),))
conn.commit()
conn.close()
new_task.value = ""
load_tasks()
except Exception as ex:
page.add(ft.Text(f"Error adding task: {ex}", color=ft.colors.RED))
def toggle_task(task_id, completed):
try:
conn = sqlite3.connect("tasks.db")
conn.execute("UPDATE tasks SET completed = ? WHERE id = ?", (int(completed), task_id))
conn.commit()
conn.close()
except Exception as ex:
print(f"Error updating task: {ex}")
new_task = ft.TextField(label="New task", on_submit=add_task)
tasks = ft.Column()
page.add(
ft.Text("SQLite Database Integration", size=24, weight="bold"),
new_task,
ft.ElevatedButton("Add Task", on_click=add_task),
ft.Divider(),
tasks
)
# Load initial tasks
load_tasks()
ft.app(target=main)This todo list demonstrates SQLite integration with proper error handling and threading considerations. Database operations run in the main thread here for simplicity, but in production applications with heavy database usage, you'd move these operations to background threads to maintain UI responsiveness. The key principle is separating data persistence logic from UI code while ensuring data consistency.
Creating reusable components is essential for maintainable applications, and Flet's UserControl
class makes this straightforward. By subclassing UserControl, you can encapsulate both UI structure
and behavior into self-contained components that can be reused throughout your application. Each custom component
manages its own state, handles its own events, and exposes a clean public interface. This component-based
architecture promotes code reuse, reduces duplication, and makes complex interfaces more manageable.
import flet as ft
class StarRating(ft.UserControl):
def __init__(self, max_stars=5, on_rating_changed=None):
super().__init__()
self.max_stars = max_stars
self.current_rating = 0
self.on_rating_changed = on_rating_changed
self.stars = []
def build(self):
self.stars = []
for i in range(self.max_stars):
star = ft.IconButton(
icon=ft.icons.STAR_BORDER,
icon_color=ft.colors.GREY_400,
data=i + 1,
on_click=self.on_star_click
)
self.stars.append(star)
return ft.Row(self.stars, spacing=2)
def on_star_click(self, e):
rating = e.control.data
self.set_rating(rating)
if self.on_rating_changed:
self.on_rating_changed(rating)
def set_rating(self, rating):
self.current_rating = rating
for i, star in enumerate(self.stars):
if i < rating:
star.icon = ft.icons.STAR
star.icon_color = ft.colors.AMBER
else:
star.icon = ft.icons.STAR_BORDER
star.icon_color = ft.colors.GREY_400
self.update()
def main(page: ft.Page):
def on_rating_changed(rating):
feedback.value = f"You rated this {rating} star{'s' if rating != 1 else ''}!"
page.update()
feedback = ft.Text(size=18, color=ft.colors.BLUE_700)
page.add(
ft.Text("Custom Star Rating Component", size=24, weight="bold"),
StarRating(max_stars=5, on_rating_changed=on_rating_changed),
feedback
)
ft.app(target=main)This star rating component demonstrates encapsulation of both UI and behavior. The component manages its own state (current rating), handles user interactions (star clicks), and provides a clean callback interface for parent components. This pattern can be extended to create complex reusable components like data grids, charts, or custom form controls.
Accessibility ensures your applications can be used by everyone, including people with disabilities. Flet supports accessibility through semantic control properties, keyboard navigation, and screen reader compatibility. You can add descriptive labels, set appropriate roles, and ensure all interactive elements are keyboard accessible. While Flet provides good baseline accessibility automatically, explicit semantic labeling enhances the experience for assistive technologies and creates truly inclusive applications.
import flet as ft
def main(page: ft.Page):
page.add(
ft.Text("Accessibility Best Practices", size=24, weight="bold", color=ft.colors.INDIGO_800),
ft.TextField(
label="Search Products",
hint_text="Enter product name...",
prefix_icon=ft.icons.SEARCH,
autofocus=True,
# Accessibility properties
semantics_label="Search input field for products",
semantics_hint="Type your search query and press Enter to search"
),
ft.ElevatedButton(
"Search",
icon=ft.icons.SEARCH,
# Accessibility
semantics_label="Perform product search",
semantics_hint="Click to search for products matching your query"
),
ft.Text(
"All interactive elements are keyboard accessible and have proper semantic labels",
color=ft.colors.GREY_600,
italic=True
)
)
ft.app(target=main)Accessibility in Flet goes beyond just adding labels—it includes ensuring proper focus management, color contrast ratios, and logical tab order. These practices not only help users with disabilities but also improve the overall user experience for everyone, including mobile users and those in challenging environments.
Security is non-negotiable in modern applications, and Flet applications require the same security considerations as any web application. Always sanitize user input to prevent cross-site scripting (XSS) attacks, validate data on both client and server sides, use HTTPS for all communications, and never expose sensitive information in client-side code. For applications handling authentication, implement proper session management and follow OAuth best practices. Security should be built into your development workflow from the very beginning.
import flet as ft
import html
import re
def main(page: ft.Page):
def display_user_content(e):
user_input = comment_field.value
# Sanitize input to prevent XSS
safe_input = html.escape(user_input)
# Additional validation: remove any remaining script tags
safe_input = re.sub(r'.*?', '', safe_input, flags=re.IGNORECASE)
# Display safely
comment_display.value = safe_input
comment_display.visible = True
page.update()
comment_field = ft.TextField(
label="Leave a comment",
multiline=True,
max_lines=3,
width=500
)
comment_display = ft.Text(visible=False, size=16)
page.add(
ft.Text("Security: Input Sanitization", size=24, weight="bold"),
ft.Text("Try entering HTML or script tags to see them sanitized:", color=ft.colors.GREY_600),
comment_field,
ft.ElevatedButton("Post Comment", on_click=display_user_content),
ft.Divider(),
comment_display
)
ft.app(target=main) This example demonstrates input sanitization to prevent XSS attacks. User input is escaped using Python's
html.escape() function, which converts special characters to their HTML entities. Additional regex
filtering removes any remaining script tags that might slip through. This layered approach ensures user-generated
content is displayed safely without compromising security.
Debugging is an essential skill for developers, and Flet provides several tools to help you troubleshoot issues
efficiently. When running in web mode (view=ft.WEB_BROWSER), you have access to browser developer
tools for inspecting the UI, monitoring network requests, and viewing console logs. You can also use Python's
built-in debugger (pdb), logging module, and exception handling to trace through your code. The key
is understanding Flet's client-server architecture—your Python code runs on the server, while the UI renders in
the client browser.
import flet as ft
import logging
# Configure logging
logging.basicConfig(level=logging.DEBUG)
logger = logging.getLogger("flet_app")
def main(page: ft.Page):
def debug_action(e):
# Log detailed information
logger.debug(f"Button clicked at coordinates: ({e.local_x}, {e.local_y})")
logger.debug(f"Page route: {page.route}")
logger.info(f"Current theme mode: {page.theme_mode}")
# Add debug info to UI
debug_info = ft.Text(
f"Debug: Clicked at ({e.local_x}, {e.local_y})\\n"
f"Route: {page.route}\\n"
f"Theme: {page.theme_mode}",
size=14,
color=ft.colors.GREY_700
)
page.add(debug_info)
page.add(
ft.Text("Debugging Techniques", size=24, weight="bold"),
ft.ElevatedButton("Trigger Debug Action", on_click=debug_action),
ft.Text("Check your terminal/console for debug logs!",
italic=True, color=ft.colors.BLUE_700)
)
ft.app(target=main, view=ft.WEB_BROWSER) # Enables browser dev toolsRunning Flet in web mode provides access to powerful browser developer tools. You can inspect the generated HTML/CSS, monitor WebSocket communications, set breakpoints in the client-side JavaScript, and view console output. Combined with Python logging, this gives you comprehensive visibility into both server-side and client-side behavior.
Flet applications are standard Python projects, making them perfectly suited for version control systems like Git and collaborative development workflows. Since everything is code—no binary assets or complex build artifacts—your repositories stay clean and merge conflicts are minimal. You can use standard Python project structures, virtual environments, and dependency management with requirements.txt or pyproject.toml files. This compatibility with established Python practices makes Flet ideal for team development and professional software engineering.
# .gitignore for Flet projects
__pycache__/
*.pyc
*.pyo
*.pyd
.Python
env/
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
*.egg-info/
.installed.cfg
*.egg
venv/
ENV/
.env
.flet/
fletd.log
assets/ # if assets are generated dynamicallyWith proper version control setup, your team can collaborate effectively on Flet applications using standard Git workflows—feature branches, pull requests, code reviews, and continuous integration. The pure Python nature of Flet applications means they integrate seamlessly with existing Python development ecosystems and CI/CD pipelines.
The Flet community is growing rapidly with excellent resources to accelerate your learning. The official documentation is comprehensive and well-organized, the GitHub repository contains hundreds of examples, and the community discussions provide real-world solutions to common problems. Start with the official tutorials, explore the example gallery, and don't hesitate to ask questions in the community forums. The combination of excellent documentation and active community support makes learning Flet both efficient and enjoyable.
# Essential Flet resources
# Official Documentation: https://flet.dev/docs/
# GitHub Repository: https://github.com/flet-dev/flet
# Example Gallery: https://github.com/flet-dev/examples
# Community Discussions: https://github.com/flet-dev/flet/discussions
# Twitter: https://twitter.com/fletdev
# YouTube Tutorials: https://www.youtube.com/@fletdev
# Installing the latest development version
pip install git+https://github.com/flet-dev/flet.gitEngaging with the Flet community not only helps you solve problems faster but also keeps you informed about new features, best practices, and upcoming developments. Many successful Flet applications have been built by developers who started by studying the official examples and then gradually added their own customizations.
For complex applications with shared state across multiple components, you'll need more sophisticated state management patterns. Flet supports several approaches: the observer pattern for simple cases, context systems for medium complexity, and external state management libraries for enterprise applications. The key principle is maintaining a single source of truth for your application state while providing efficient update mechanisms that minimize unnecessary re-renders.
import flet as ft
class AppState:
"""Global application state with observer pattern"""
def __init__(self):
self.user = None
self.theme_mode = ft.ThemeMode.LIGHT
self.observers = []
def set_user(self, user):
self.user = user
self.notify_observers()
def toggle_theme(self):
self.theme_mode = ft.ThemeMode.DARK if self.theme_mode == ft.ThemeMode.LIGHT else ft.ThemeMode.LIGHT
self.notify_observers()
def add_observer(self, observer):
self.observers.append(observer)
def notify_observers(self):
for observer in self.observers:
observer()
def main(page: ft.Page):
app_state = AppState()
# Header that reacts to state changes
def update_header():
if app_state.user:
user_info.value = f"Hello, {app_state.user}!"
else:
user_info.value = "Not logged in"
page.theme_mode = app_state.theme_mode
page.update()
user_info = ft.Text()
app_state.add_observer(update_header)
def login(e):
app_state.set_user("Alice")
def toggle_theme(e):
app_state.toggle_theme()
page.add(
ft.AppBar(
title=ft.Text("Advanced State Management"),
actions=[
ft.IconButton(ft.icons.BRIGHTNESS_6, on_click=toggle_theme),
ft.TextButton("Login", on_click=login)
]
),
user_info,
ft.Text("Click 'Login' to see state update, or toggle theme!",
color=ft.colors.GREY_600)
)
ft.app(target=main)This example demonstrates a global state management system using the observer pattern. Multiple components can subscribe to state changes and update themselves automatically when the state changes. This pattern scales well for medium-complexity applications and maintains loose coupling between components.
Keeping your user interface responsive during long-running operations is crucial for good user experience. Flet fully supports Python's async/await syntax for non-blocking operations. You can use async functions for network requests, file I/O, database queries, or any other operation that might take time to complete. While the async operation runs in the background, your UI remains fully interactive, and you can show loading indicators or progress bars to keep users informed.
import flet as ft
import asyncio
import aiohttp
async def main(page: ft.Page):
async def fetch_data():
progress.visible = True
status.value = "Fetching data from API..."
page.update()
try:
# Simulate async API call
async with aiohttp.ClientSession() as session:
async with session.get("https://jsonplaceholder.typicode.com/posts/1") as response:
data = await response.json()
await asyncio.sleep(2) # Simulate processing time
result.value = f"Title: {data['title']}\\n\\nBody: {data['body'][:100]}..."
status.value = "Data fetched successfully!"
except Exception as e:
status.value = f"Error: {str(e)}"
finally:
progress.visible = False
page.update()
result = ft.Text(size=16)
status = ft.Text(color=ft.colors.BLUE_700)
progress = ft.ProgressRing(visible=False)
page.add(
ft.Text("Async Programming Example", size=24, weight="bold"),
ft.ElevatedButton("Fetch Async Data", on_click=lambda _: asyncio.create_task(fetch_data())),
progress,
status,
ft.Divider(),
result
)
ft.app(target=main)This example demonstrates proper async programming with loading states and error handling. The key insight is
using asyncio.create_task() to launch the async operation without blocking the UI thread. The
progress indicator provides visual feedback during the operation, and the status message keeps users informed
about what's happening.
For specialized visualizations, diagrams, or custom graphics that go beyond standard UI controls, Flet provides a
powerful Canvas control. The Canvas allows you to draw shapes, paths, text, and images
programmatically using a rich set of drawing commands. You can create charts, flow diagrams, custom icons, or any
other visual element that requires pixel-level control. The Canvas supports transformations, clipping, and
compositing operations, making it suitable for sophisticated graphics applications.
import flet as ft
def main(page: ft.Page):
def draw_diagram(canvas):
canvas.shapes.clear()
# Draw coordinate system
canvas.shapes.append(
ft.CanvasShape(
ft.Path([
ft.Path.MoveTo(50, 300),
ft.Path.LineTo(550, 300), # X-axis
ft.Path.MoveTo(50, 50),
ft.Path.LineTo(50, 300) # Y-axis
], paint=ft.Paint(stroke_width=2, color=ft.colors.GREY_500))
)
)
# Draw data points
points = [(100, 250), (200, 200), (300, 150), (400, 180), (500, 120)]
for x, y in points:
canvas.shapes.append(
ft.CanvasShape(
ft.Circle(x, y, 6, paint=ft.Paint(color=ft.colors.BLUE))
)
)
# Draw connecting lines
path = ft.Path([ft.Path.MoveTo(*points[0])])
for point in points[1:]:
path.elements.append(ft.Path.LineTo(*point))
canvas.shapes.append(
ft.CanvasShape(path, paint=ft.Paint(stroke_width=3, color=ft.colors.RED))
)
canvas.update()
canvas = ft.Canvas(width=600, height=350)
draw_diagram(canvas)
page.add(
ft.Text("Custom Canvas Drawing", size=24, weight="bold", color=ft.colors.INDIGO_800),
ft.Text("Programmatically drawn chart with axes, points, and connecting lines",
color=ft.colors.GREY_600, italic=True),
canvas
)
ft.app(target=main)The Canvas control provides low-level graphics capabilities while maintaining Flet's declarative programming model. You define what you want to draw, and Flet handles the rendering efficiently. This makes it perfect for data visualization, custom UI elements, or any scenario requiring precise graphical control.
One of Flet's greatest strengths is its ability to leverage the entire Python ecosystem. You can integrate data science libraries like pandas and NumPy, visualization tools like matplotlib and Plotly, machine learning frameworks like scikit-learn and TensorFlow, or any other Python package. This integration capability transforms Flet from a simple UI framework into a complete application development platform for Python developers across all domains.
import flet as ft
import pandas as pd
import matplotlib.pyplot as plt
import io
import base64
def main(page: ft.Page):
def generate_analysis():
# Create sample data with pandas
df = pd.DataFrame({
'Month': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
'Sales': [120, 135, 148, 162, 175, 190],
'Expenses': [80, 85, 92, 98, 105, 112]
})
# Create matplotlib chart
plt.figure(figsize=(10, 6))
plt.plot(df['Month'], df['Sales'], marker='o', linewidth=3, label='Sales')
plt.plot(df['Month'], df['Expenses'], marker='s', linewidth=3, label='Expenses')
plt.title('Monthly Sales vs Expenses', fontsize=16, fontweight='bold')
plt.xlabel('Month', fontsize=12)
plt.ylabel('Amount ($)', fontsize=12)
plt.legend()
plt.grid(True, alpha=0.3)
# Convert to base64 for Flet Image
buf = io.BytesIO()
plt.savefig(buf, format='png', dpi=150, bbox_inches='tight')
buf.seek(0)
img_base64 = base64.b64encode(buf.read()).decode('utf-8')
plt.close()
# Display in Flet
chart_img.src_base64 = img_base64
page.update()
chart_img = ft.Image(width=600, height=400)
page.add(
ft.Text("Python Ecosystem Integration", size=24, weight="bold"),
ft.Text("Combining pandas, matplotlib, and Flet for data analysis applications",
color=ft.colors.GREY_600, italic=True),
ft.ElevatedButton("Generate Sales Analysis", on_click=lambda _: generate_analysis()),
chart_img
)
ft.app(target=main)This example demonstrates the power of Python ecosystem integration. Pandas handles data manipulation, matplotlib creates professional charts, and Flet provides the interactive interface. This combination enables data scientists and analysts to create sophisticated applications without leaving Python, bridging the gap between analysis and presentation.
You've now explored the comprehensive landscape of Flet development—from basic concepts to advanced patterns, from simple scripts to complex applications. Flet represents more than just a UI framework; it's a paradigm shift that empowers Python developers to build modern, cross-platform applications without the traditional frontend learning curve. The future of Python UI development is here, and it's written entirely in Python. As you continue your Flet journey, remember that every great application starts with a single line of code. Your revolution begins now.
import flet as ft
def main(page: ft.Page):
page.add(
ft.Text("The Future of Python UI is Here", size=32, weight="bold", color=ft.colors.BLUE_800),
ft.Text("You have the power to build anything—web, desktop, or mobile—with pure Python.",
size=20, italic=True, color=ft.colors.INDIGO_700),
ft.Image(src="https://flet.dev/img/logo.svg", width=250, height=125),
ft.Divider(height=40),
ft.Text("Go forth and create something amazing! 🚀", size=22, color=ft.colors.GREEN_700)
)
ft.app(target=main)Remember: Flet isn't just about making development easier—it's about expanding what's possible for Python developers. With Flet, you're not limited by your frontend knowledge; you're empowered by your Python expertise. The applications you build today could become the tools that transform industries tomorrow. So start building, keep learning, and join the growing community of developers who are redefining what Python can do.