Flet

Flet lets you build Flutter apps using Python!

Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.

Creating Basic App

Below is a simple Flet application that renders text on the page.

main.py

python

from flet import *

def main(page: Page):
    page.add(Text("Welcome"))

app(target=main)

If you name your app main.py you can run it using flet run otherwise you can use python3 app.py

To run the app:

bash

flet run

Live update:

flet -r filename.py

Layout

The main controls you will use are the Container(), Column(), Row() and Stack().

Anything inside of a column goes from top to bottom. Anything inside of a Row goes left to right. Anything in a Stack goes back to front. And all of these (Column, Row, Stack) should be put inside of a container if you want to add padding, borders, margins etc.

python

Column([
  Text("Hello"),
  Text("There"),
  Text("How are you?")
])

python

Row([
  Text("Hello"),
  Text("There"),
  Text("How are you?")
])

python

Stack([
  Text("Hello"),
  Text("There"),
  Text("How are you?")
])

python

Container(content=Column([
  Text("Container Text")
]),padding=padding.all(20),bgcolor="red")

You can align Row and Column controls using MainAxisAlignment to align items in the same direction of the Row or Column and CrossAxisAlignment to align controls on the opposite axis. You can flex the controls using the expand property on the controls within a Row or container

python

Row([
  Text("Hello", expand=1),
  Text("There", expand=1)),
  Text("How are you?", expand=1))
],alignment=MainAxisAlignment.SPACE_BETWEEN)

Buttons & Events

python

def doSomething(e):
  print(e.control.data)
  print("Done")

page.add(ElevatedButton("Press Me",on_click=doSomething,data=['one','two','three']))

Creating a Form

Flet has a number of controls.

python

from flet import app, Text,TextField,Column,ElevatedButton

def main(page):

    first_name = TextField(label="First name", autofocus=True)
    last_name = TextField(label="Last name")
    greetings = Column()

    def btn_click(e):
        greetings.controls.append(Text(f"Hello, {first_name.value} {last_name.value}!"))
        first_name.value = ""
        last_name.value = ""
        page.update()
        first_name.focus()

    page.add(
        first_name,
        last_name,
        ElevatedButton("Say hello!", on_click=btn_click),
        greetings,
    )

app(target=main)