Ứng dụng Flet đầu tiên

Hãy tạo ứng dụng Flet đầu tiên trong 15 phút! 🚀

🎯 Mục tiêu

Xây dựng ứng dụng “Hello World” với:

• Text hiển thị lời chào
• Button thay đổi nội dung

📝 Bước 1: Tạo dự án trong PyCharm

1.1 Mở PyCharm và tạo dự án mới

1. Mở PyCharm
2. Chọn File → New Project
3. Cấu hình:
   • Location: Chọn thư mục, ví dụ ~/Projects/my-flet-app
   • Python Interpreter: Chọn New environment using Virtualenv
   • Base interpreter: Python 3.10 trở lên
4. Click Create

1.2 Cài đặt Flet

Mở Terminal trong PyCharm (View → Tool Windows → Terminal) và chạy:

pip install 'flet[all]'

Chờ cài đặt hoàn tất.

1.3 Tạo file main.py

1. Click chuột phải vào thư mục dự án trong panel Project
2. Chọn New → Python File
3. Đặt tên: main
4. Nhấn Enter

📝 Bước 2: Viết code Hello World

Trong file main.py, nhập code sau:

import flet as ft
 
def main(page: ft.Page):
    page.title = "Ứng dụng đầu tiên"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    
    page.add(
        ft.Text("Xin chào, Flet! 👋", size=30, weight=ft.FontWeight.BOLD)
    )
 
ft.run(main)

▶️ Bước 3: Chạy ứng dụng

Cách 1: Chạy từ PyCharm

1. Click chuột phải vào file main.py
2. Chọn Run ‘main’

Hoặc nhấn Shift + F10 (Windows/Linux) hoặc Ctrl + R (macOS).

Cách 2: Chạy từ Terminal

flet run main.py

Kết quả: Cửa sổ ứng dụng với dòng chữ “Xin chào, Flet! 👋” ở giữa màn hình.

🔧 Bước 4: Thêm tương tác với Declarative UI

Thay thế nội dung main.py với code sử dụng Component và use_state:

import flet as ft
 
@ft.component
def Greeting():
    # State: lời chào hiện tại
    message, set_message = ft.use_state("Xin chào! 👋")
    
    def change_greeting(_):
        set_message("Chào mừng đến với Flet! 🎉")
    
    return ft.Column([
        ft.Text(message, size=30, weight=ft.FontWeight.BOLD),
        ft.ElevatedButton("Nhấn vào đây!", on_click=change_greeting),
    ], horizontal_alignment=ft.CrossAxisAlignment.CENTER, spacing=20)
 
def main(page: ft.Page):
    page.title = "Ứng dụng đầu tiên"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.add(Greeting())
 
ft.run(main)

Lưu file (Ctrl+S) và chạy lại. Thử click button!

Kết quả sau khi click:

[!TIP] Declarative UI với @ft.component và ft.use_state():

• Không cần gọi page.update() thủ công
• UI tự động cập nhật khi state thay đổi

🌐 Bước 5: Chạy trên Web

Trong Terminal của PyCharm:

flet run --web main.py

Trình duyệt tự động mở tại http://localhost:8000 - cùng code, chạy trên web!

🔍 Giải thích code

🎯 Thử thách

Trong PyCharm, thử tự mình:

1. Thêm màu cho text: ft.Text(..., color=ft.Colors.BLUE)
2. Thêm nhiều button với message khác nhau
3. Thêm counter (mỗi lần click tăng số)

Gợi ý counter:

@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), size=30),
        ft.IconButton(ft.Icons.ADD, on_click=lambda _: set_count(count + 1)),
    ], alignment=ft.MainAxisAlignment.CENTER)

⏭️ Bước tiếp theo

Tuyệt vời! Tiếp tục với Cấu trúc ứng dụng Flet để hiểu sâu hơn.