Flet Cheatsheet - snippets to boost productivity

If you find this cheatsheet useful, you can support it for free by clicking ⭐ Star repo.

Essential daily links

Getting started guide	Controls Reference
Flet Github Repo	Flet issues
Flet Examples Repo	Flet Utils

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)

Deep work mode: Import *

# 'bad practice' https://www.geeksforgeeks.org/why-import-star-in-python-is-a-bad-idea/

import flet
from flet import *
from flet import icons, dropdown, colors, padding, alignment, border_radius, theme

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

# https://flet.dev/docs/guides/python/keyboard-shortcuts
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) 

Absolute position

see:Absolute positioning inside Stack

Colors

see:Flet colors.py source code

see:Material color palette shades

User Control

see: User control docs

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 # intercept native close signal 

Memes

Sponsors