👋 Giới thiệu

Flet là framework Python cho phép bạn xây dựng ứng dụng web, desktop và mobile mà không cần kinh nghiệm frontend. Chỉ với Python!

🤔 Tại sao chọn Flet?

Bạn muốn tạo ứng dụng có giao diện đồ họa nhưng:

• Không muốn học thêm JavaScript, HTML, CSS?
• Muốn ứng dụng chạy được trên nhiều nền tảng?
• Đã biết Python và muốn tận dụng kiến thức Python sẵn có?

Flet là framework giúp bạn làm được những điều đó! 🎉

⚡ Một ứng dụng, nhiều nền tảng

flowchart TD
    P["🐍 Python Code"] --> F["🎯 Flet Framework"]
    F --> W["🌐 Web App"]
    F --> D["💻 Desktop<br/>(Win, Mac, Linux)"]
    F --> M["📱 Mobile<br/>(iOS, Android)"]

    style P fill:#3776ab,color:white
    style F fill:#0175C2,color:white

Viết code một lần, chạy mọi nơi:

• Web: Chạy trong trình duyệt (WebAssembly)
• Desktop: Windows, macOS, Linux
• Mobile: iOS, Android

🔄 Flet 0.28 vs 0.80: Imperative vs Declarative

Flet có 2 cách viết UI:

Imperative UI (cách cũ - Flet 0.28.x)

Bạn trực tiếp thay đổi UI controls và gọi page.update():

# Imperative: thay đổi control trực tiếp
def minus_click(e):
    counter.value = str(int(counter.value) - 1)
    page.update()  # 👈 Phải gọi update thủ công

counter = ft.TextField(value="0")
page.add(counter)

Declarative UI (cách mới - Flet 0.80.x) ✅

Bạn mô tả UI dựa trên state, Flet tự động cập nhật:

# Declarative: UI = f(state)
@ft.component
def Counter():
    count, set_count = ft.use_state(0)

    return ft.Row([
        ft.IconButton(ft.Icons.REMOVE, on_click=lambda _: set_count(count - 1)),
        ft.Text(str(count)),  # 👈 Tự động cập nhật khi count thay đổi
        ft.IconButton(ft.Icons.ADD, on_click=lambda _: set_count(count + 1)),
    ])

[!TIP] Declarative UI giúp code dễ đọc, dễ maintain hơn. Tất cả bài học trong series này sử dụng Flet 0.80.x với Declarative UI.

🧱 Các khái niệm chính trong Flet 0.80

Khái niệm	Mô tả
Component	Hàm Python trả về UI, đánh dấu bằng @ft.component
Observable	Class lưu trữ state, tự động trigger re-render
Hook	ft.use_state() - quản lý state local trong component

📦 Flet có gì?

• 150+ UI Controls: Button, TextField, DataTable, Charts…
• Layouts: Row, Column, Stack, GridView…
• Navigation: AppBar, NavigationRail, Tabs…
• 50+ Python packages: NumPy, Pandas trên mobile!
• Built-in packaging: Đóng gói thành .exe, .app, .apk, .ipa

🎯 Flet phù hợp cho

• ✅ Dashboard và công cụ nội bộ
• ✅ Ứng dụng CRUD
• ✅ Prototype nhanh
• ✅ Ứng dụng cá nhân
• ✅ Học lập trình GUI

⏭️ Bước tiếp theo

Đã sẵn sàng? Tiếp tục với Cài đặt môi trường để bắt đầu!