Building Multi-platform Apps with Flet: Bringing Flutter UI to the Python World

Python tutorial - IT technology blog
Python tutorial - IT technology blog

Why Flet is a “lifesaver” for Python developers

If you’re tired of struggling with HTML/CSS just to create a UI for your Python scripts, Flet was made for you. In the past, I often had to settle for Tkinter‘s “ancient” look or the complexity of PyQt. Flet changes the game by bringing the entire Flutter UI library to Python. You get a beautiful app immediately without knowing a single line of Dart or JavaScript.

In practice, Flet is extremely efficient for data dashboards or internal apps. Instead of spending 3 days coding a web UI, it only took me about 2 hours to complete a real-time interactive application. Its biggest strength is the centralized state management, allowing Python code to control the UI very smoothly.

Set up your environment in 30 seconds

To get started, you just need Python 3.8 or higher. Type the following command in your terminal to install the latest version:

pip install flet

Want to update to use the latest components? Add the upgrade parameter:

pip install flet --upgrade

Pro tip: You should use a virtual environment (venv). This helps isolate libraries and prevents version conflict errors when deploying later.

Building your first app: Standard code template

The structure of Flet is very easy to understand. Everything starts with the main function and the Page object. Think of Page as a blank canvas where you can freely arrange components (Controls).

Real-world code structure

import flet as ft

def main(page: ft.Page):
    page.title = "ItFromZero Demo"
    page.theme_mode = ft.ThemeMode.LIGHT
    # Center components on the screen
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    lbl_hello = ft.Text(value="Welcome to ItFromZero!", size=25)

    def btn_click(e):
        lbl_hello.value = "Flet is really fast!"
        # Update the UI immediately
        page.update() 

    page.add(
        lbl_hello,
        ft.ElevatedButton("Click now", on_click=btn_click)
    )

ft.app(target=main)

Layout secrets without CSS

In Flet, Row and Column are the two main tools for UI layout. Don’t worry about complex Flexbox. You just need to nest them like Lego bricks.

  • Container: Used for rounded corners, background colors, or adding padding. It’s as flexible as a div tag but easier to configure.
  • ResponsiveRow: This is the key to making your app run well on both iPhones and 4K monitors. You can specify how many of the 12 columns a component occupies based on the screen size.

If you are handling user input via TextField and need to validate formats (email, phone number), try the regex tool at toolcraft.app. It helps you quickly test patterns before putting them into your Python code, saving significant debugging time.

State Management: The Golden Rule

The most common mistake is forgetting the page.update() command. Flet does not automatically redraw the screen to save resources. Every time you change the value of a Text or Slider, call update so the user can see the change.

Deploying your app

Flet supports multiple running modes. You can view the app as a desktop software window or run it directly in the browser.

Turning it into a Web App

Just by changing a small parameter in the last line, your application becomes a website:

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

Open localhost:8550 and you will see the app in action. This is very useful for testing the UI on the browser’s mobile emulator.

Packaging into .exe or .app files

Once your product is finished, you can package it to send to others without requiring them to install Python:

flet pack main.py --icon icon.ico --name "MySoftware"

From my experience: A simple exe file is usually around 25-30MB. Try removing unused libraries from your venv before compressing to reduce the output file size to the minimum.

3 tips for more professional Flet code

  1. Modularize Components: Don’t write everything in one file. Separate the UI into distinct classes for easier management.
  2. Use Async: Always use async def main if the app calls an API. This prevents the UI from freezing while waiting for data from the server.
  3. Assets: Place images and fonts in an assets folder so Flet automatically recognizes them when packaging.

Flet is changing how we build UIs with Python. You don’t need to learn too much; just by mastering Python logic, you can create modern and professional applications.

Share: