Skip to main content
Flet provides a comprehensive set of UI controls to build beautiful, cross-platform applications. Controls are the building blocks of your Flet app’s user interface.

​
What are Controls?

Controls in Flet are Python objects that represent visual elements in your application. Each control can be configured with properties and can respond to user interactions through event handlers. 
import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Text("Hello, Flet!", size=24, weight=ft.FontWeight.BOLD)
    )

ft.app(target=main)

​
Material vs Cupertino

Flet supports two major design systems:

Material Design

Google’s Material Design language - provides a modern, clean aesthetic used in Android and web applications.

Cupertino

Apple’s iOS design language - delivers a native iOS look and feel for iPhone and iPad apps.

​
Material Design

Material Design controls follow Google’s design principles, featuring:
  • Elevation and shadows for depth perception
  • Material ripple effects for interactive feedback
  • Bold colors and high contrast
  • Rounded corners and smooth animations
ft.ElevatedButton(
    "Material Button",
    icon=ft.Icons.ADD,
    on_click=lambda e: print("Clicked!")
)

​
Cupertino (iOS-style)

Cupertino controls match Apple’s Human Interface Guidelines:
  • Flat design with minimal shadows
  • Subtle animations and transitions
  • iOS-native colors and typography
  • Characteristic iOS interactions like swipe gestures
ft.CupertinoButton(
    "iOS Button",
    icon=ft.cupertino_icons.ADD,
    on_click=lambda e: print("Clicked!")
)

​
Adaptive Controls

Many Flet controls support adaptive mode, automatically selecting Material or Cupertino styling based on the platform: 
ft.Button(
    "Adaptive Button",
    adaptive=True  # Material on Android/Web, Cupertino on iOS
)

​
Control Categories

Flet controls are organized into several categories:

Layout

Arrange and position other controls - Row, Column, Stack, Container

Navigation

Help users navigate your app - AppBar, NavigationBar, Drawer

Input

Collect user input - TextField, Button, Checkbox, Slider

Dialogs

Display overlays and modal content - AlertDialog, BottomSheet

​
Common Control Properties

All Flet controls share common properties:
PropertyTypeDescription
visibleboolWhether the control is visible
disabledboolWhether the control is disabled
widthNumberFixed width in pixels
heightNumberFixed height in pixels
expandbool/intWhether to expand to fill available space
tooltipstrTooltip text shown on hover
dataanyCustom data associated with the control
ft.Container(
    content=ft.Text("Expanded Container"),
    expand=True,
    bgcolor=ft.Colors.BLUE_100,
    tooltip="This container fills available space"
)

​
Event Handling

Controls can respond to user interactions through event handlers: 
def button_clicked(e):
    print(f"Button clicked: {e.control.text}")
    e.page.add(ft.Text("You clicked the button!"))

ft.ElevatedButton(
    "Click Me",
    on_click=button_clicked
)
Common events include:
  • on_click - User clicks the control
  • on_change - Control value changes
  • on_focus - Control receives focus
  • on_blur - Control loses focus
  • on_hover - Mouse enters/exits control

​
Next Steps

Explore specific control categories:

​
API Reference

For detailed API documentation of all controls, see the Controls API Reference.

Build docs developers (and LLMs) love

Get started for freeTalk to us