Flet Cheatsheet
Install / Upgrade Flet via pip
pip3 install flet
# upgrade
pip3 install flet --upgrade
Hot reload
# watch all files in directory
flet main.py -d
# watch current and sub-directories
flet main.py -r
Quick Boilerplate - Essential Imports
# Essential imports
import flet
from flet import Page, Column, Row, Container, Text, Stack, TextField, Image, ElevatedButton
from flet import icons, dropdown, colors, padding, alignment, border_radius, theme
def main(page: Page):
page.title = "My Awesome Flet Appname"
page.add (Text ("Hello Fletizen!"))
page.update()
flet.app(target=main, assets_dir="assets")
# flet.app(target=main, view=flet.WEB_BROWSER)
# option to provide host/port
# flet.app(target=main, assets_dir="assets", host="0.0.0.0", port=777)
Buttons
import flet
from flet import Page, ElevatedButton
def main (page:Page):
def on_click_btn (e):
print ("i was clicked!")
def on_hover_btn (e):
print ("why you hovering on me!")
def on_longpress_btn (e):
print ("you pressed me so long!")
btn = ElevatedButton (
text="Click Me",
on_click = on_click_btn,
on_hover = on_hover_btn,
on_long_press = on_longpress_btn
)
page.add (btn)
flet.app (target=main)
Multiline Textfield
textfield = TextField (
value = "Look at me!\n\nI am a multiline Textfield!",
min_lines = 3,
max_lines = 3,
multiline = True,
border_width= 2,
color = "white",
text_size = 15 )
page.add (textfield)
Images
import flet
from flet import Page, Image, border_radius
# load local image inside assets folder
def main(page: Page):
page.add (Image( src="photo.jpg"))
flet.app( target=main, assets_dir="assets")
# load remote image
img = Image(
src=f"https://picsum.photos/200/200",
width=200,
height=200,
fit="none", # none, contain, cover, fill, fitHeight, fitWidth, scaleDown
repeat="noRepeat", # noRepeat, repeat, repeatX, repeatY
border_radius=border_radius.all(10),
tooltip= "text displayed on hover image")
page.add (img)
# cache buster
import time
img = Image(src=f"https://picsum.photos/200/200?ts={time.time()}")
page.add (img)
# display Base-64 encoded image
page.add(Image(src_base64 = "iVBORw..."))
Logging
import logging
logging.basicConfig(level=logging.DEBUG)
Keyboard
import flet
from flet import Page, KeyboardEvent
def main (page:Page):
def on_keyboard (e: KeyboardEvent):
keypressed = f"Key: {e.key}, Shift: {e.shift}, Control: {e.ctrl}, Alt: {e.alt}, Meta: {e.meta}"
print (keypressed)
page.on_keyboard_event = on_keyboard
page.update()
flet.app (target=main)
Page
# scroll page as items added
page.scroll = "auto"
page.auto_scroll = True
# open url in browser
page.launch_url (url)
# go to route
page.go (route)
# set clipboard
page.set_clipboard ("This paste comes from flet!")
# runtime environment
page.web # True/False if running in web browser
page.platform # OS system running on ios, android, macos, linux, windows
page.pwa # True/False if running as Progressive Web App (PWA)
# window resize handler
def page_on_resize(e):
print (f"Resize {page.window_width},{page.window_height}")
page.on_resize = page_on_resize
Layout
padding
# left indent
padding = padding.only (left=43)
# top and left indent
padding=padding.only (left=8, right=8),
# no spacing between children
control.spacing = 0
page vertical/horizontal
# start (left), end (right), center, spaceBetween, spaceAround, spaceEvenly
page.vertical_alignment = "center"
page.horizontal_alignment = "center"
expand
# expand = True will expand item to fill available space in its parent layout control
col = Column ([Text ("Im at top", expand=True), Text ("Im at bottom")], expand=True)
row = Row ([Text ("Im at left", expand=True), Text ("Im at right")], expand=True)
User Control
import flet
from flet import Page, Text, UserControl
class HelloWorld (UserControl):
def __init__(self, text='Hello Fletizen!'):
super().__init__()
self.text = Text(value=text)
def build(self):
return self.text
def main(page: Page):
page.add (HelloWorld())
page.add (HelloWorld("What good shall I Flet today?"))
page.update()
flet.app (target=main)
App Window methods
# center window
page.window_center()
# close window
page.window_close()
# window_destroy()
page.window_destroy()
# window resize handler
def page_on_resize(e):
print (f"Resize {page.window_width},{page.window_height}")
page.on_resize = page_on_resize
# window event listener
# close, focus, blur,
# maximize, unmaximize, minimize,
# restore, resize
# resized (macOS and Windows only)
# move, moved (macOS and Windows only)
# enterFullScreen, leaveFullScreen
def win_on_event (e):
print (f"win_event: {e.data}")
page.add (Text (e.data))
page.update()
page.on_window_event = win_on_event
App Window Properties
# title
page.title = "Flet Rocks!" # set app window title (desktop and web)
# show window
page.window_opacity = 1.0
page.update()
# hide window
page.window_opacity = 0.0
page.update()
# window position on desktop
page.window_top = 0
page.window_left = 0
# window size
page.window_width = 500
page.window_height = 500
# locking in place and always on top
page.window_always_on_top = True
page.window_movable = True
# window min and max resize
page.window_resizable = True # False prevents resizing
page.window_min_width = 200 # resizing window limit
page.window_min_height = 200
page.window_max_width = 500 # resizing window max
page.window_max_height = 500
# minimize or maximize window
page.window_minimized = False # True = minimizes, False = restores
page.window_maximized = True # False = unmaximize
# customize window chrome
page.window_frameless = True
page.window_opacity = 0.5 # 0.0 (fully transparent) 1.0 (fully opaque)
page.window_title_bar_hidden = True # see also WindowDragArea
page.window_title_bar_buttons_hidden = True # macOS only
page.window_minimizable = True # show or hide minimize button
# showing / hiding window
page.window_visible = True # True = show app window. False = hide
flet.app(target=main, view=flet.FLET_APP_HIDDEN) # start app hidden
# misc
page.window_full_screen = True # switch to fullscreen mode
page.window_focused = True
page.window_title_bar_hidden = True
page.window_skip_task_bar = True # hide app from the Task Bar / Dock
page.window_progress_bar = 0.5 # show half a proress bar on Task Bar / Dock
page.window_prevent_close = True #