Getting started with Flet

GUI app development with Python & Flet

🕑 This lesson will take about 15 minutes

Flet is a UI framework that allows app developers to build interactive multi-user desktop, mobile and web-based applications using Python and other programming languages. Felt is powered by Flutter, an open-source UI software development kit (SDK) created by Google. Flutter is used to develop cross-platform apps from a single codebase for Android, iOS, Linux, macOS, Windows, Fuchsia, and any web browser.

Install Flet

To get started, you’ll first need to install Flet. Use the following terminal command to install Python using pip:

pip install flet

Or, if you’re using Python3, you might need to run the following command instead:

pip3 install flet

Create a project folder/directory

Make sure you have a folder/directory to store the code for your Flet app. Create a new folder and then open it using your code editor. Create a new Python file (eg. app.py )

For example, in Visual Studio Code, click File > Open Folder and then select the folder where you will save your code. Then click File > New Text File. Before adding any code, save the file as a Python file. For example, name it app.py .

A basic Flet app has the following code structure:

When creating a flet app, you first must import Flet using the import statement, for example: import flet as ft . The function main() is an entry point in a Flet application. This function is called on a new thread for every user session with a Page instance passed into it. A Page is like a "canvas" specific to a user. You add and remove controls to a page (and update their properties) in order to build an application’s UI. Controls include text, buttons, etc. The example code above just shows a blank page in a window.

The code for a Flet app typically ends with a the function call flet.app() . This will start the app which can then be opened in a native UI window, or in a web browser.

Test the code

Run the above code (eg. by running the command python3 app.py in your Terminal or directly from Visual Studio Code) and the app will open in a native browser window, as shown in the screenshot below. If your app is not working, scroll down for some troubleshooting tips.

Screenshot of a native UI window. The UI window has close, minimise and maximise window buttons but no content within the window.

Is your Flet app not working?

If your Flet app isn’t working, try some of the following troubleshooting tips:

  • If you can’t install Flet, make sure you have pip (or pip3) installed on your computer.

  • Make sure you haven’t given your Python file the same name as an existing package or module (eg. don’t call the file "flet.py". Instead, call it something like "app.py".

  • Try installing Flet from your OS’s terminal (eg. Command Prompt on Windows or Terminal on Mac). Then restart Visual Studio Code.

  • Make sure you have opened your project folder in Visual Studio by clicking File > Open Folder before running the code stored in that folder.

  • Make sure you’re running the latest recommended version of Python. If using Visual Studio Code, down the bottom right-hand corner of the screen, select the Python version number. Then select the latest/recommended version of Python from the list that appears (eg. Python 3.10.8 64-bit). Otherwise, try running your Flet app from your OS’s terminal (Eg. Command Prompt on Windows or Terminal on Mac) by navigating to your project folder using the cd command and then running the script eg. by using the command python3 app.py ).

Running your app as a web app

Flet apps can run in a native OS window or in a web browser. When running Flet app in the browser, a new user session is started for every opened tab or page. However, when running as a desktop app, there is only one session created.

The code for a Flet app typically ends with a the function call flet.app() . By default, Flet app starts in a native window, however, you can open it in a new browser window by modifying the call to flet.app() as follows:

ft.app(target=main, view=ft.AppView.WEB_BROWSER)

Every Flet app is actually a web app and even if they’re opened in a native OS window, a built-in web server is still started and running in the background. By default, the Flet web server is listening on a random TCP port but you can specify a custom TCP port and then open your app in a browser along with the desktop view using the following code, for example:

flet.app(port=8550, target=main)

Using the example above, you can run the app in a native OS window as well as going to http://localhost:<port> in your browser (replace <port> with the port number specified in your code) to see a web app version of your Flet app.

In the next lesson, we’ll look at how to add controls such as text and buttons to a Flet app.

Next lesson: Adding Controls to a Flet app