Cài đặt môi trường Flet

Hãy thiết lập môi trường để bắt đầu lập trình với Flet. Chỉ mất khoảng 5-10 phút!

📋 Yêu cầu

• Python 3.10 trở lên
• pip hoặc uv (package manager)
• IDE: VS Code, PyCharm hoặc Antigravity

1️⃣ Kiểm tra Python

Mở Terminal/Command Prompt và kiểm tra phiên bản Python:

python --version
# hoặc trên macOS/Linux:
python3 --version

Kết quả cần hiển thị Python 3.10 trở lên.

[!NOTE] Chưa có Python? Tải tại python.org/downloads 

2️⃣ Tạo thư mục dự án

mkdir my-flet-app
cd my-flet-app

3️⃣ Tạo Virtual Environment

Cách 1: Dùng uv (khuyên dùng) ⚡

uv  là package manager cực nhanh cho Python.

Cài đặt uv:

# macOS/Linux
curl -LsSf https://astral.sh/uv/install.sh | sh
 
# Windows (PowerShell)
powershell -c "irm https://astral.sh/uv/install.ps1 | iex"

Tạo môi trường:

uv init --python='>=3.10'
uv venv
source .venv/bin/activate  # macOS/Linux
# hoặc: .venv\Scripts\activate  # Windows

Cách 2: Dùng venv (Python built-in)

python -m venv .venv
source .venv/bin/activate  # macOS/Linux
# hoặc: .venv\Scripts\activate  # Windows

4️⃣ Cài đặt Flet

Với uv:

uv add 'flet[all]'

Với pip:

pip install 'flet[all]'

[!TIP] flet[all] cài đặt đầy đủ các phụ thuộc cho desktop, web và packaging.

5️⃣ Kiểm tra cài đặt

Tạo file main.py:

import flet as ft
 
def main(page: ft.Page):
    page.add(ft.Text("Flet đã sẵn sàng! 🎉", size=30))
 
ft.run(main)

Chạy ứng dụng:

flet run main.py

Một cửa sổ ứng dụng sẽ xuất hiện với dòng chữ “Flet đã sẵn sàng! 🎉”

🌐 Chạy như Web App

Thêm --web để chạy trong trình duyệt:

flet run --web main.py

Trình duyệt sẽ mở tại http://localhost:8000.

📝 Cấu trúc dự án

Sau khi hoàn thành, thư mục dự án của bạn:

my-flet-app/
├── .venv/           # Virtual environment
├── main.py          # Code ứng dụng
└── pyproject.toml   # (nếu dùng uv)

🛠️ Thiết lập IDE (tùy chọn)

VS Code

1. Cài extension Python (by Microsoft)
2. Mở thư mục dự án: File > Open Folder
3. Chọn Python interpreter: Ctrl+Shift+P → “Python: Select Interpreter” → chọn .venv

PyCharm

1. Mở PyCharm, chọn Open và chọn thư mục dự án
2. PyCharm tự động detect virtual environment trong .venv
3. Cấu hình Python interpreter nếu cần: Settings > Project > Python Interpreter

Antigravity

1. Mở thư mục dự án với Antigravity
2. Antigravity tự động detect môi trường Python
3. Sử dụng các tính năng AI để hỗ trợ viết code Flet

⏭️ Bước tiếp theo

Môi trường đã sẵn sàng! Tiếp tục với Ứng dụng đầu tiên để viết app đầu tiên.