Giới thiệu Flet

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

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!