flet Documentation

1. Project Overview & Quickstart (flet-dev/flet) Copy Chapter

File: README.md Copy Chapter

Flet is a framework that allows building mobile, desktop and web applications
in Python only without prior experience in frontend development.

   Single code base for any device Copy Section

Your app will equally look great on iOS, Android, Windows, Linux, macOS and web.

   Build an entire app in Python Copy Section

Build a cross-platform app without knowledge of Dart, Swift, Kotlin, HTML or JavaScript - only Python!

   150+ built-in controls and services Copy Section

Beautiful UI widgets with Material and Cupertino design: layout, navigation, dialogs, charts - Flet uses Flutter to render UI.

   50+ Python packages for iOS and Android Copy Section

Numpy, pandas, pydantic, cryptography, opencv, pillow and other popular libraries.

   Full web support Copy Section

Flet apps run natively in modern browsers using WebAssembly and Pyodide, with no server required. Prefer server-side? Deploy as a Python web app with real-time UI updates.

   Built-in packaging Copy Section

Build standalone executables or bundles for iOS, Android, Windows, Linux, macOS and web. Instantly deploy to App Store and Google Play.

   Test on iOS and Android Copy Section

Test your project on your own mobile device with Flet App. See your app updates as you make changes.

   Extensible Copy Section

Easily wrap any of thousands of Flutter packages to use with Flet or build new controls in pure Python using built-in UI primitives.

   Accessible Copy Section

Flet is built with Flutter which has solid accessibility foundations on Android, iOS, web, and desktop.

Flet app example Copy Chapter

Below is a simple "Counter" app, with a text field and two buttons to increment and decrement the counter value:

import flet as ft

def main(page: ft.Page):
    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    input = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

    def minus_click(e):
        input.value = str(int(input.value) - 1)

    def plus_click(e):
        input.value = str(int(input.value) + 1)

    page.add(
        ft.Row(
            alignment=ft.MainAxisAlignment.CENTER,
            controls=[
                ft.IconButton(ft.Icons.REMOVE, on_click=minus_click),
                input,
                ft.IconButton(ft.Icons.ADD, on_click=plus_click),
            ],
        )
    )

ft.run(main)

To run the app, install flet:

pip install 'flet[all]'

then launch the app:

flet run counter.py

This will open the app in a native OS window - what a nice alternative to Electron! 🙂

To run the same app as a web app use --web option with flet run command:

flet run --web counter.py

Learn more Copy Chapter

• Website
• Documentation
• Roadmap
• Apps Gallery

Community Copy Chapter

• Discussions
• Discord
• X (Twitter)
• Bluesky
• Email us

Contributing Copy Chapter

Want to help improve Flet? Check out the contribution guide.

File: client/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md Copy Chapter

Launch Screen Assets

You can customize the launch screen with your own desired assets by replacing the image files in this directory.

You can also do it by opening your Flutter project's Xcode project with open ios/Runner.xcworkspace, selecting Runner/Assets.xcassets in the Project Navigator and dropping in the desired images.

File: client/README.md Copy Chapter

flet_view

A new Flutter project.

Getting Started Copy Chapter

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

• Lab: Write your first Flutter app
• Cookbook: Useful Flutter samples

For help getting started with Flutter, view our
online documentation, which offers tutorials,
samples, guidance on mobile development, and a full API reference.

TODO Copy Chapter

• Close connection on application exit:
  • https://docs.flutter.dev/cookbook/networking/web-sockets
  • https://stackoverflow.com/questions/52074265/flutter-detect-killing-off-the-app
  • https://stackoverflow.com/questions/60184497/how-to-execute-code-before-app-exit-flutter
• Change base.href for non-root apps:
  • https://docs.flutter.dev/development/ui/navigation/url-strategies#hosting-a-flutter-app-at-a-non-root-location

File: packages/flet/README.md Copy Chapter

Flet

Flet is a framework that allows building mobile, desktop and web applications
in Python only without prior experience in frontend development.

   Single code base for any device Copy Section

Your app will equally look great on iOS, Android, Windows, Linux, macOS and web.

   Build an entire app in Python Copy Section

Build a cross-platform app without knowledge of Dart, Swift, Kotlin, HTML or JavaScript - only Python!

   150+ built-in controls and services Copy Section

Beautiful UI widgets with Material and Cupertino design: layout, navigation, dialogs, charts - Flet uses Flutter to render UI.

   50+ Python packages for iOS and Android Copy Section

Numpy, pandas, pydantic, cryptography, opencv, pillow and other popular libraries.

   Full web support Copy Section

Flet apps run natively in modern browsers using WebAssembly and Pyodide, with no server required. Prefer server-side? Deploy as a Python web app with real-time UI updates.

   Built-in packaging Copy Section

Build standalone executables or bundles for iOS, Android, Windows, Linux, macOS and web. Instantly deploy to App Store and Google Play.

   Test on iOS and Android Copy Section

Test your project on your own mobile device with Flet App. See your app updates as you make changes.

   Extensible Copy Section

Easily wrap any of thousands of Flutter packages to use with Flet or build new controls in pure Python using built-in UI primitives.

   Accessible Copy Section

Flet is built with Flutter which has solid accessibility foundations on Android, iOS, web, and desktop.

Flet app example Copy Chapter

Below is a simple "Counter" app, with a text field and two buttons to increment and decrement the counter value:

import flet as ft

def main(page: ft.Page):
    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    input = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

    def minus_click(e):
        input.value = str(int(input.value) - 1)

    def plus_click(e):
        input.value = str(int(input.value) + 1)

    page.add(
        ft.Row(
            alignment=ft.MainAxisAlignment.CENTER,
            controls=[
                ft.IconButton(ft.Icons.REMOVE, on_click=minus_click),
                input,
                ft.IconButton(ft.Icons.ADD, on_click=plus_click),
            ],
        )
    )

ft.run(main)

To run the app, install flet:

pip install 'flet[all]'

then launch the app:

flet run counter.py

This will open the app in a native OS window - what a nice alternative to Electron! 🙂

To run the same app as a web app use --web option with flet run command:

flet run --web counter.py

Learn more Copy Chapter

• Website
• Documentation
• Roadmap
• Apps Gallery

Community Copy Chapter

• Discussions
• Discord
• X (Twitter)
• Bluesky
• Email us

Contributing Copy Chapter

Want to help improve Flet? Check out the contribution guide.

File: sdk/python/packages/flet-web/src/flet_web/fastapi/README.md Copy Chapter

Flet - a better UI for FastAPI

Flet for FastAPI allows adding interactive real-time dashboards to your FastAPI app as well as host any Flet web app inside FastAPI with production-grade reliability.

Installation Copy Chapter

pip install flet-fastapi

First app Copy Chapter

Create counter.py with the following content:

import flet as ft
import flet_fastapi

async def main(page: ft.Page):
    counter = ft.Text("0", size=50, data=0)

    async def add_click(e):
        counter.data += 1
        counter.value = str(counter.data)
        counter.update()

    page.floating_action_button = ft.FloatingActionButton(
        icon=ft.icons.ADD, on_click=add_click
    )
    page.add(
        ft.Container(counter, alignment=ft.Alignment.CENTER, expand=True)
    )

app = flet_fastapi.app(main)

That's a simple app displaying a counter and a button at the right bottom to increment that counter.

flet_fastapi.app() configures a single Flet app at the root of FastAPI app with main() sessions handler and the following endpoints:

/ws (WS) - WebSocket handler for the Flet app.

/upload (PUT) - file uploads handler.

/oauth_callback (GET) - OAuth flow callback handler.

/ (GET) - Flet app static files with SPA catch-all handler.

Running the app locally Copy Chapter

Install Uvicorn web server:

pip install uvicorn

Start uvicorn with:

uvicorn counter:app

Open the browser and navigate to http://127.0.0.1:8000 to see the app running.

Hosting multiple Flet apps under the same domain Copy Chapter

import flet as ft
import flet_fastapi


async def root_main(page: ft.Page):
    page.add(ft.Text("This is root app!"))


async def sub_main(page: ft.Page):
    page.add(ft.Text("This is sub app!"))


app = flet_fastapi.FastAPI()


app.mount("/sub-app", flet_fastapi.app(sub_main))
app.mount("/", flet_fastapi.app(root_main))

Sub-apps must be mapped before the root Flet app as it configures catch-all index.html for SPA.

Run the app with uvicorn and visit http://127.0.0.1:8000 and then http://127.0.0.1:8000/sub-app/ to see both Flet apps running. Notice the trailing slash in /sub-app/ URL - without the slash the request will be routed to a root app.

Adding Flet to the existing FastAPI app Copy Chapter

from contextlib import asynccontextmanager

import flet as ft
import flet_fastapi
from fastapi import FastAPI

@asynccontextmanager
async def lifespan(app: FastAPI):
    await flet_fastapi.app_manager.start()
    yield
    await flet_fastapi.app_manager.shutdown()

app = FastAPI(lifespan=lifespan)

async def main(page: ft.Page):
    page.add(ft.Text("Hello, Flet!"))

app.mount("/flet-app", flet_fastapi.app(main))

When adding Flet app to the existing FastAPI app you need to call flet_fastapi.app_manager.start() on app start and flet_fastapi.app_manager.shutdown() on shutdown. Use the way that best suites you: lifespan (in the example above) or app events.

app_manager.start() method starts background tasks cleaning up expired sessions and OAuth flow states.

app_manager.shutdown() method removes any temporary files created by a Flet app.

Running the app in production Copy Chapter

It is recommended to run FastAPI in production with Hypercorn which is ASGI web server, but it is also possible to run FastAPI apps with Gunicorn which is a WSGI server, but has more features, like passing proxy headers.

To install Gunicorn:

pip install gunicorn

Start gunicorn with:

gunicorn -k uvicorn.workers.UvicornWorker counter:app

Reference Copy Chapter

Environment variables Copy Section

FLET_SECRET_KEY - secret key to sign upload requests. Must be set if upload directory is configured.

FLET_SESSION_TIMEOUT - the number of seconds to keep session alive after user has disconnected. Default is 3,600 seconds.

FLET_OAUTH_STATE_TIMEOUT - OAuth state lifetime, in seconds, which is a maximum allowed time between starting OAuth flow and redirecting to OAuth callback URL. Default is 600 seconds.

FLET_MAX_UPLOAD_SIZE - max allowed size of an uploaded file, bytes.

File: sdk/python/packages/flet-web/README.md Copy Chapter

Flet Web client in Flutter

This package contains a compiled Flutter Flet web client.

File: sdk/python/packages/flet-desktop/README.md Copy Chapter

Flet Desktop client in Flutter

This package contains a compiled Flutter Flet desktop client.

File: sdk/python/packages/flet-cli/README.md Copy Chapter

Flet CLI

Flet CLI is a command-line interface tool for Flet, a framework for building interactive multi-platform applications using Python.

Features Copy Chapter

• Create new Flet projects
• Run Flet applications
• Package and deploy Flet apps

Basic Usage Copy Chapter

To create a new Flet project:

flet create myapp

2. Official Technical Reference & Guides (flet-dev/website) Copy Chapter

Website

THIS REPOSITORY HAS BEEN ARCHIVED. Website is now part of Flet monorepo. Read this announcement for more info.

This website is built using Docusaurus 2, a modern static website generator.

View the live site at https://flet.dev.

Installation Copy Section

$ yarn

Local Development Copy Section

$ yarn start

This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.

Build Copy Section

$ yarn build

This command generates static content into the build directory and can be served using any static contents hosting service.

Deployment Copy Section

$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the gh-pages branch.