Controls phổ biến trong Flet

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

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),
)


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ả:

⏭️ 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.