🎛️ Controls phổ biến

Khám phá các UI controls thường dùng nhất trong Flet. ⏱️ 20 phút

🎯 Mục tiêu

Nắm vững các controls: Text, Button, TextField, Image, Checkbox, và các controls khác.

📝 Text - Hiển thị văn bản

ft.Text("Xin chào!")

# Với styling
ft.Text(
    "Tiêu đề",
    size=24,
    weight=ft.FontWeight.BOLD,
    color=ft.Colors.BLUE,
    italic=True,
    text_align=ft.TextAlign.CENTER,
)

Thuộc tính Text hay dùng

Thuộc tính	Mô tả
size	Cỡ chữ (pixels)
weight	Độ đậm: BOLD, NORMAL…
color	Màu chữ
italic	Chữ nghiêng
text_align	Căn chỉnh: LEFT, CENTER, RIGHT

🔘 Button - Các loại nút

flowchart LR
    subgraph "Button Types"
        E["ElevatedButton"]
        F["FilledButton"]
        O["OutlinedButton"]
        T["TextButton"]
        I["IconButton"]
    end
    style E fill:#e3f2fd
    style F fill:#1976d2,color:white
    style O fill:white,stroke:#1976d2
    style T fill:transparent
    style I fill:#f5f5f5

ElevatedButton (nút nổi)

ft.ElevatedButton(
    "Click me",
    on_click=lambda _: print("Clicked!"),
    icon=ft.Icons.ADD,
)

FilledButton (nút đầy)

ft.FilledButton("Submit", on_click=handle_submit)

OutlinedButton (nút viền)

ft.OutlinedButton("Cancel", on_click=handle_cancel)

TextButton (nút text)

ft.TextButton("Learn more", on_click=show_details)

IconButton (nút icon)

ft.IconButton(ft.Icons.FAVORITE, on_click=toggle_favorite)

⌨️ TextField - Nhập liệu

ft.TextField(
    label="Email",
    hint_text="[email protected]",
    prefix_icon=ft.Icons.EMAIL,
    on_change=lambda e: print(e.control.value),
)

Các loại TextField

# Password
ft.TextField(label="Mật khẩu", password=True)

# Multiline
ft.TextField(label="Mô tả", multiline=True, max_lines=5)

# Number only
ft.TextField(label="Tuổi", keyboard_type=ft.KeyboardType.NUMBER)

# Read-only
ft.TextField(value="Không thay đổi được", read_only=True)

🖼️ Image - Hiển thị ảnh

# Từ URL
ft.Image(
    src="https://picsum.photos/200",
    width=200,
    height=200,
    fit=ft.ImageFit.COVER,
    border_radius=ft.border_radius.all(10),
)

# Từ file local (trong thư mục assets)
ft.Image(src="logo.png", width=100)

☑️ Checkbox - Hộp kiểm

ft.Checkbox(
    label="Tôi đồng ý điều khoản",
    value=False,
    on_change=lambda e: print(e.control.value),
)

🔀 Switch - Công tắc

ft.Switch(
    label="Bật thông báo",
    value=True,
    on_change=toggle_notifications,
)

📊 Slider - Thanh kéo

ft.Slider(
    min=0,
    max=100,
    value=50,
    divisions=10,
    label="{value}%",
    on_change=lambda e: print(e.control.value),
)

📻 Radio - Chọn một

ft.RadioGroup(
    content=ft.Column([
        ft.Radio(value="small", label="Nhỏ"),
        ft.Radio(value="medium", label="Vừa"),
        ft.Radio(value="large", label="Lớn"),
    ]),
    on_change=lambda e: print(e.control.value),
)

📋 Dropdown - Danh sách chọn

ft.Dropdown(
    label="Chọn quốc gia",
    width=200,
    options=[
        ft.dropdown.Option("vn", "Việt Nam"),
        ft.dropdown.Option("us", "United States"),
        ft.dropdown.Option("jp", "Japan"),
    ],
    on_change=lambda e: print(e.control.value),
)

🔗 Icon - Biểu tượng

ft.Icon(ft.Icons.FAVORITE, color=ft.Colors.RED, size=40)

[!TIP] Xem danh sách icons tại Material Icons Sử dụng: ft.Icons.ICON_NAME (viết HOA, dấu gạch dưới)

📊 ProgressBar & ProgressRing

# Progress bar
ft.ProgressBar(value=0.7, width=200)

# Progress ring (loading)
ft.ProgressRing()

🎯 Ví dụ: Registration Form (Declarative)

import flet as ft

@ft.component
def RegistrationForm():
    name, set_name = ft.use_state("")
    email, set_email = ft.use_state("")
    password, set_password = ft.use_state("")
    agreed, set_agreed = ft.use_state(False)

    def handle_submit(_):
        if name and email and password and agreed:
            print(f"Registered: {name}, {email}")

    return ft.Column([
        ft.Text("Form đăng ký", size=24, weight=ft.FontWeight.BOLD),
        ft.TextField(
            label="Họ và tên",
            prefix_icon=ft.Icons.PERSON,
            value=name,
            on_change=lambda e: set_name(e.control.value),
        ),
        ft.TextField(
            label="Email",
            prefix_icon=ft.Icons.EMAIL,
            value=email,
            on_change=lambda e: set_email(e.control.value),
        ),
        ft.TextField(
            label="Mật khẩu",
            password=True,
            prefix_icon=ft.Icons.LOCK,
            value=password,
            on_change=lambda e: set_password(e.control.value),
        ),
        ft.Checkbox(
            label="Đồng ý điều khoản",
            value=agreed,
            on_change=lambda _: set_agreed(not agreed),
        ),
        ft.Row([
            ft.FilledButton("Đăng ký", icon=ft.Icons.CHECK, on_click=handle_submit),
            ft.OutlinedButton("Hủy"),
        ]),
    ], spacing=15)

def main(page: ft.Page):
    page.title = "Controls Demo"
    page.padding = 20
    page.add(RegistrationForm())

ft.run(main)

Kết quả:

flowchart TD
    subgraph Form["Registration Form"]
        T["📝 Form đăng ký"]
        I1["👤 Họ và tên"]
        I2["📧 Email"]
        I3["🔒 Mật khẩu"]
        C["☑️ Đồng ý điều khoản"]
        B["[ Đăng ký ] [ Hủy ]"]
    end
    T --> I1 --> I2 --> I3 --> C --> B
    style Form fill:#f5f5f5

⏭️ Bước tiếp theo

Tuyệt! Tiếp tục với Xử lý sự kiện để học cách tương tác với người dùng.