Skill Development Program

Cross-Platform Development With Flet Python

Easily build realtime web, mobile and desktop apps in pure Python. No frontend experience required.

What iS Flet?

Flet is a Python framework for building cross-platform (web, desktop, mobile) applications using Google's Flutter technology, allowing developers to create modern, reactive UIs with pure Python, eliminating the need for HTML, CSS, or JavaScript.

It simplifies Flutter's complex widget system by offering pre-built, high-level "controls" and a server-driven architecture, enabling rapid development of sophisticated, visually appealing applications from a single Python codebase.

Resources

Prerequisites

Before starting, make sure you have:

Python 3.9 or later installed
Python added to PATH

Internet connection

Verify Python installation:
> python –version

Create Project

Download Git & Run this command in your terminal.
> flet create app

Setup Virtual Environment

Using a virtual environment keeps dependencies isolated and avoids conflicts.

>python -m venv venv & venv\Scripts\activate

Write Your First Program

🐍

main.py

#Install Flet : pip install flet[all] --upgrade
#Check Installed Version : flet --version
#Run App : flet run src/main.py -r -d

import flet as ft

def main(page: ft.Page):
    page.title = "My First Flet App"
    page.add(ft.Text("Hello, Flet!"))

ft.run(main)

Imperative Programming in Flet

Imperative UI is when you tell the framework exactly how to build and update the interface step by step. You manipulate the UI directly — create controls, change their properties, insert or remove them in response to user actions.

🐍

main.py

#Imperative Style Code

import flet as ft

def main(page: ft.Page):
    page.title = "My First Flet App"
    page.add(ft.Text("Hello, Flet!"))

ft.run(main)

Declarative Programming In Flet

The declarative approach means you describe what the UI should look like for a given state, not how to build or update it. Instead of manually creating, changing, or removing controls, you write a function that returns the UI structure based on current data — and the framework figures out the minimal updates needed to make it real. In other words, your UI becomes a pure expression of state: whenever the state changes, the framework re-renders the view so it always stays consistent.

🐍

main.py

#Declarative Style Code

import flet as ft

@ft.component
def App():
    count, set_count = ft.use_state(0)

    return ft.Row(
        controls=[
            ft.Text(value=f"{count}"),
            ft.Button("Add", on_click=lambda: set_count(count + 1)),
        ],
    )

ft.run(lambda page: page.render(App))