Posted inPython

Xây dựng App đa nền tảng với Flet: Mang giao diện Flutter vào thế giới Python

Python tutorial - IT technology blog
Python tutorial - IT technology blog

Tại sao Flet lại là “cứu cánh” cho dân làm Python?

Nếu bạn đã chán ngấy việc phải vật lộn với HTML/CSS chỉ để làm một cái giao diện cho script Python, Flet sinh ra là để dành cho bạn. Trước đây, mình thường phải chấp nhận giao diện “cổ lỗ sĩ” của Tkinter hay sự phức tạp của PyQt. Flet thay đổi cuộc chơi bằng cách mang toàn bộ thư viện UI của Flutter vào Python. Bạn sẽ có ngay một ứng dụng đẹp mắt mà không cần biết một dòng code Dart hay JavaScript nào.

Thực tế cho thấy, Flet cực kỳ hiệu quả cho các dashboard dữ liệu hoặc app nội bộ. Thay vì tốn 3 ngày để code giao diện web, mình chỉ mất khoảng 2 giờ để hoàn thiện một ứng dụng tương tác thời gian thực. Điểm mạnh nhất là cơ chế xử lý trạng thái (state) tập trung, giúp code Python điều khiển UI cực kỳ mượt mà.

Cài đặt môi trường trong 30 giây

Để bắt đầu, bạn chỉ cần Python 3.8 trở lên. Gõ lệnh sau vào terminal để cài đặt phiên bản mới nhất:

pip install flet

Muốn cập nhật để dùng các component mới nhất? Hãy thêm tham số upgrade:

pip install flet --upgrade

Lưu ý nhỏ: Bạn nên dùng môi trường ảo (venv). Điều này giúp cô lập thư viện và tránh lỗi xung đột phiên bản khi deploy sau này.

Xây dựng ứng dụng đầu tiên: Code mẫu chuẩn

Cấu trúc Flet rất dễ hiểu. Mọi thứ bắt đầu từ hàm main và đối tượng Page. Hãy coi Page như một khung tranh trắng để bạn tự do sắp xếp các linh kiện (Controls).

Cấu trúc code thực tế

import flet as ft

def main(page: ft.Page):
    page.title = "ItFromZero Demo"
    page.theme_mode = ft.ThemeMode.LIGHT
    # Canh giữa các thành phần trên màn hình
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    lbl_hello = ft.Text(value="Chào mừng bạn đến với ItFromZero!", size=25)

    def btn_click(e):
        lbl_hello.value = "Flet thực sự rất nhanh!"
        # Cập nhật giao diện ngay lập tức
        page.update() 

    page.add(
        lbl_hello,
        ft.ElevatedButton("Click ngay", on_click=btn_click)
    )

ft.app(target=main)

Bí kíp bố cục (Layout) không cần CSS

Trong Flet, Row và Column là hai công cụ chính để sắp xếp UI. Đừng lo lắng về Flexbox phức tạp. Bạn chỉ cần lồng ghép chúng như xếp gạch Lego.

  • Container: Dùng để bo góc, tạo màu nền hoặc thêm padding. Nó linh hoạt như thẻ div nhưng dễ cấu hình hơn.
  • ResponsiveRow: Đây là chìa khóa để app chạy tốt trên cả iPhone lẫn màn hình 4K. Bạn có thể quy định một component chiếm bao nhiêu trong 12 cột tùy theo kích thước màn hình.

Nếu bạn đang xử lý input người dùng qua TextField và cần kiểm tra định dạng (email, số điện thoại), hãy thử công cụ regex tại toolcraft.app. Nó giúp bạn test nhanh các pattern trước khi đưa vào code Python, tiết kiệm đáng kể thời gian debug.

Quản lý State: Quy tắc vàng

Lỗi phổ biến nhất là quên lệnh page.update(). Flet không tự động vẽ lại màn hình để tiết kiệm tài nguyên. Mỗi khi bạn thay đổi giá trị của một Text hay Slider, hãy gọi update để người dùng thấy được sự thay đổi.

Đưa ứng dụng ra thực tế

Flet hỗ trợ nhiều chế độ chạy khác nhau. Bạn có thể xem app dưới dạng cửa sổ phần mềm máy tính hoặc chạy trực tiếp trên trình duyệt.

Biến thành Web App

Chỉ cần thay đổi một tham số nhỏ ở dòng cuối cùng, ứng dụng của bạn sẽ trở thành một trang web:

ft.app(target=main, view=ft.AppView.WEB_BROWSER, port=8550)

Mở localhost:8550 và bạn sẽ thấy app hoạt động. Cách này rất tiện để test giao diện trên mobile giả lập của trình duyệt.

Đóng gói thành file .exe hoặc .app

Khi sản phẩm đã hoàn thiện, bạn có thể đóng gói để gửi cho người khác dùng mà không cần họ cài Python:

flet pack main.py --icon icon.ico --name "PhanMemCuaToi"

Kinh nghiệm của mình: Một file exe đơn giản thường nặng khoảng 25-30MB. Hãy xóa bớt các thư viện không dùng tới trong venv trước khi nén để giảm dung lượng file output xuống mức thấp nhất.

3 lời khuyên để code Flet chuyên nghiệp hơn

  1. Chia nhỏ Component: Đừng viết tất cả vào một file. Hãy tách giao diện thành các class riêng biệt để dễ quản lý.
  2. Sử dụng Async: Luôn dùng async def main nếu app có gọi API. Điều này giúp giao diện không bị treo (freeze) khi đang chờ dữ liệu từ server.
  3. Assets: Đặt ảnh và font vào thư mục assets để Flet tự động nhận diện khi đóng gói.

Flet đang thay đổi cách chúng ta làm UI với Python. Không cần học quá nhiều, chỉ cần nắm vững logic Python, bạn đã có thể tạo ra những ứng dụng hiện đại và chuyên nghiệp.

Share:
Tags: