Flet + Python: Build Desktop & Mobile Apps in 1 Hour Without Learning Frontend

I’ve seen too many frustrating moments for Python beginners:

• “I learned Python and wanted to make a small tool, then found out I need to learn HTML, CSS, JS… just memorizing tags gives me a headache.”
• “Finally wrote some code and want to make an interface, but tutorials are all ‘first set up the Vue framework’, ‘then configure the backend API’… I’m instantly lost.”
• “Wanted to use my script on the phone, but ended up needing to install a bunch of SDKs, and it still throws errors.”

Until I discovered Flet – this magical tool that lets Python beginners “skip the frontend”: Without writing a single line of HTML/CSS/JS, using pure Python code, you can build proper apps that run on desktop (Windows/macOS/Linux), mobile (iOS/Android), and the web.

Today, I’ll guide absolute beginners step-by-step to build their first “clickable, usable” small tool within an hour. You’ll be able to get started immediately after reading!

First, Understand: What exactly is Flet? What is it good for?

In one sentence: Flet is a Python library that “saves you from frontend work.”
It uses Flutter under the hood (which is known for beautiful UIs, like many big company apps), but replaces the complex Flutter code with Python syntax that beginners can understand.

Simply put: You write Python code to define interface elements like “buttons, input fields, tables,” and Flet turns them into nice-looking apps, automatically adapting to different devices.

It’s especially suitable for beginners to do these things:

• Small tools for personal use (e.g., data entry forms, to-do lists)
• Internal tools for a team (e.g., simple report dashboards)
• Quickly build a prototype (e.g., to demo an idea to a product manager)
• Kiosk interfaces (e.g., query screens in malls)

What Beginners Care About Most: What problems does it solve for me?

1. No need to learn frontend! Python all the way.
No need to remember tags like <div> <span>, no need to fuss with CSS styling, you don’t even need to understand “frontend-backend separation” – all logic is written in Python. For example, “add 1 to the number when a button is clicked” or “save content to a file after input,” it’s no different from writing a normal Python script.

2. Installation is super simple, just pip it.
No need to install Node.js, npm, webpack, or other frontend tools, nor configure complex dev environments. As long as your computer has Python (3.8+), open the command line and type one command to install Flet.

3. Write once, run everywhere.
The same code can pop up a native window on your desktop (like WeChat, QQ), open in a browser (becoming a web version), and also be packaged into a mobile app (submitting to app stores takes extra steps, but for personal use it’s super simple).

4. No need to build your own server.
Want to make a “tool for multiple people to use together” (like a team-shared to-do list)? Flet has a built-in web server and real-time update functionality – you don’t need to write WebSocket yourself or configure databases. Add a few lines in your code, and others can open a link to sync data with you in real-time.

Hands-on Tutorial: Build Your First App (Counter) in 10 Minutes

Let’s go step-by-step, from installation to running. Every step is explained clearly – just follow along.

Step 1: Prepare Python Environment (Skip to Step 2 if already installed)

If your computer doesn’t have Python yet, go to the official Python website to download (choose version 3.8 or above, 3.10 or 3.11 is recommended for stability and ease of use).
During installation, remember to check “Add Python to PATH” (otherwise, the command line won’t find Python later), then click “Install Now” and proceed.

Step 2: Install Flet (One command)

Open your computer’s Command Prompt/PowerShell (Windows: Win+R, type cmd; Mac: Command+Space, type Terminal). Paste the command below and press Enter:

bash

pip install 'flet[all]'

Wait 1-2 minutes (longer if your internet is slow). When you see “Successfully installed flet…” it means it’s ready.

Step 3: Write the Code (Super Simple Counter)

Open Notepad (or PyCharm, VS Code – Notepad works for beginners too), copy the code below, and save it as counter.py (Note: The file extension must be .py. “My Counter.py” won’t work; it must be counter.py).

python

# Import the Flet library, give it an alias 'ft' for convenience
import flet as ft

# Define the main function of the APP. 'page' is our "canvas" where all UI elements go.
def main(page: ft.Page):
    # Give the APP a title (window title/webpage title)
    page.title = "My First Flet App"
    # Center the content (otherwise buttons will be left-aligned)
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    # Create a text field to display the number. Initial value "0", text right-aligned, width 100.
    num_input = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

    # Define the click event for the "minus" button: Click once, number minus 1.
    def minus_click(e):
        num_input.value = str(int(num_input.value) - 1)  # Convert text to int, subtract 1, convert back to string
        page.update()  # Update the page to display the new number

    # Define the click event for the "plus" button: Click once, number plus 1.
    def plus_click(e):
        num_input.value = str(int(num_input.value) + 1)
        page.update()

    # Place buttons and text field on the page: Use Row to arrange them in a line, centered.
    page.add(
        ft.Row(
            alignment=ft.alignment.center,  # Center the content of this row
            controls=[  # Elements to place: Minus button, text field, plus button
                ft.IconButton(ft.Icons.REMOVE, on_click=minus_click),  # Minus icon button, triggers minus_click
                num_input,  # Text field displaying the number
                ft.IconButton(ft.Icons.ADD, on_click=plus_click),  # Plus icon button, triggers plus_click
            ],
        )
    )

# Run the APP
if __name__ == "__main__":
    ft.run(main)

Step 4: Run the App (Try both ways!)

Method 1: As a Desktop App (Like a WeChat window)

1. Find your saved counter.py file (e.g., on the Desktop).
2. Open Command Prompt, first navigate to the file’s folder (e.g., if it’s on Desktop, type cd Desktop and press Enter).
3. Type the following command and press Enter: flet run counter.py

If all goes well, a small window will pop up – a minus button on the left, the number 0 in the middle, and a plus button on the right. Click the buttons, and the number changes! This is your first desktop app!

Method 2: As a Web App (Open in browser)
No need to change the code! Just add --web to the command to turn the same app into a web version:

bash

flet run --web counter.py

After the command runs, it will show “Web app available at http://localhost:8550“. Copy this link and open it in your browser – the same interface as the desktop version! It also works if you open it in your phone’s browser!

Going Further: Build a “Simple To-Do List” in 30 Minutes

Not satisfied with just a counter? Let’s level up with a practical small tool – a to-do list app where you can add and delete items. The code is still simple.

python

import flet as ft

def main(page: ft.Page):
    page.title = "My To-Do List"
    page.width = 400  # Set a fixed width for tidier look
    page.vertical_alignment = ft.MainAxisAlignment.START

    # To-do list: Use ListView to store items, supports scrolling.
    todo_list = ft.ListView(spacing=10, expand=True)

    # Function to add a new to-do item
    def add_todo(e):
        if new_todo.value.strip():  # Only add if not empty/whitespace
            # Each to-do item: Text on the left, delete button on the right.
            todo_item = ft.Row(
                [
                    ft.Text(new_todo.value, size=14),
                    ft.IconButton(
                        ft.Icons.DELETE,
                        on_click=lambda e, item=todo_item: todo_list.controls.remove(item) or page.update()
                    )
                ],
                alignment=ft.MainAxisAlignment.SPACE_BETWEEN  # Text left, button right
            )
            todo_list.controls.append(todo_item)  # Add to the list
            new_todo.value = ""  # Clear the input field
            page.update()

    # Input field + Add button
    new_todo = ft.TextField(hint_text="Enter a to-do, press Enter or click button to add", expand=True)
    add_btn = ft.ElevatedButton("Add To-Do", on_click=add_todo)

    # Place "input area" and "to-do list" on the page
    page.add(
        ft.Row([new_todo, add_btn]),  # Input field and button in a row
        todo_list  # The to-do list
    )

ft.run(main)

Run it the same way as before. Both desktop and web versions allow you to:

1. Write a to-do in the input field (e.g., “Buy milk”).
2. Click “Add To-Do” or press Enter, and the item gets added to the list below.
3. Click the delete button next to a to-do item to remove it.

See? Less than 30 lines of code, and you have a usable tool – that’s the joy Flet brings to beginners!

Beginners Must Read: Flet’s Strengths and Minor Limitations

Strengths (Beginner’s Perspective):

1. Extremely low learning curve: As long as you know Python basics (variables, functions, if/loops), you can get started. No need to learn a new language.
2. Fast development: Making a small tool takes 1-2 hours max. No need to set up frameworks or tweak styles.
3. Interfaces aren’t ugly: Built-in components look decent. You don’t write CSS, and beginners can still create presentable UIs.
4. Easy packaging: Want to share the app? Flet can package the desktop version into a .exe file (Windows) or .app file (Mac). Others can double-click to run it, no Python installation needed.

Minor Limitations (Don’t be scared):

1. Good for small tools, not complex apps: For example, building a social app like WeChat might be pushing it. But for personal tools or internal team tools, it’s perfectly fine.
2. Mobile packaging takes a few extra steps: To install on a phone (not web version), you need Android Studio or Xcode. Beginners might need to follow tutorials, but the web version works fine for personal use.
3. Community resources are less abundant: Compared to other Python libraries, Flet is relatively new. When you encounter problems, prioritize checking the official docs (available in Chinese) – they usually have the solution.

Finally: Where to Find Resources? How to Continue Learning?

1. Official Repository: https://github.com/flet-dev/flet – Has the latest features, sample code, and many questions/answers from beginners.
2. Official Documentation: https://flet.dev/docs/ – Available in Chinese! From basic components to packaging tutorials, very detailed. Just follow along.
3. Practice Ideas: Start with “Calculator → To-Do List → Weather Query (calling weather API) → Simple Data Dashboard (use Pandas to read Excel, display table with Flet)”. Level up step-by-step for a sense of accomplishment.

Actually, the best thing about Flet is that it lets beginners “start building without having to learn everything first” – what you learned today is enough to make 3-5 small tools for personal use.

Don’t just read. Open your command line right now, install Flet, write the code, and run your first app. You’ll discover: making apps is actually this simple!