Flet controls

Flet앱은 컨트롤(controls)로 구성된다. UI(User interface)의 최상단 컨트롤은 Page이다. 컨트롤은 일반적인 파이썬의 클래스라서 속성매개변수를 생성자에 전달하면서 인스턴스를 만든다.

t = ft.Text(value="Hello, world!", color="green")

컨트롤을 생성하여 page에 추가하고 page를 업데이트하는 방식으로 UI를 만들어 나간다.

import flet as ft

def main(page: ft.Page):
    t = ft.Text(value="Hello, world!", color="green")
    page.controls.append(t)
    page.update()

ft.app(target=main)

업데이트는 컨트롤의 속성을 변경하고, 이를 UI에 반영하기 위해 사용한다.

t = ft.Text()
page.add(t) # it's a shortcut for page.controls.append(t) and then page.update()

for i in range(10):
    t.value = f"Step {i}"
    page.update()
    time.sleep(1)

위에서 Text컨트롤의 value속성을 loop안에서 변경하고 page의 update함수로 변경된 속성을 반영한다.

Page처럼 눈에 보이고 무슨 기능을 하는 게 아니라 다만 다른 컨트롤을 담을 수 있는 컨트롤을 컨테이너라고 하는 데, Row도 컨테이너 컨트롤이다.

page.add(
    ft.Row(controls=[
        ft.Text("A"),
        ft.Text("B"),
        ft.Text("C")
    ])
)

위는 Text컨트롤 3개를 담은 Row컨트롤을 page에 추가하는 것이다.
컨트롤은 사용자의 UI조작에 반응하는 이벤트핸들러를 가질 수 있다.

def button_clicked(e):
    page.add(ft.Text("Clicked!"))

page.add(ft.ElevatedButton(text="Click me", on_click=button_clicked))

위의 예에서 button_clicked()함수를 ElevatedButton컨트롤의 이벤트 핸들러로 지정하는 코드이다.

다음은 이벤트핸들러 관련하여 약간 복잡한 예이다.

import flet as ft

def main(page):
    def add_clicked(e):
        page.add(ft.Checkbox(label=new_task.value))
        new_task.value = ""
        new_task.focus()
        new_task.update()

    new_task = ft.TextField(hint_text="Whats needs to be done?", width=300)
    page.add(ft.Row([new_task, ft.ElevatedButton("Add", on_click=add_clicked)]))

ft.app(target=main)

위의 코드에선 TextField와 ElevatedButton을 Row에 추가하고 ElevatedButton의 이벤트핸들러로서 add_clicked()함수를 지정한다.

Flet는 TextField, Checkbox, Dropdown, ElevatedButton 등 여러 컨트롤을 제공한다.
다음은 사용자로부터 입력을 받고 버튼을 클릭하면 'Hello ***'와 같은 메시지를 만들어 Text컨트롤에 출력하는 예이다.

import flet as ft

def main(page):
    def btn_click(e):
        if not txt_name.value:
            txt_name.error_text = "Please enter your name"
            page.update()
        else:
            name = txt_name.value
            page.clean()
            page.add(ft.Text(f"Hello, {name}!"))

    txt_name = ft.TextField(label="Your name")

    page.add(txt_name, ft.ElevatedButton("Say hello!", on_click=btn_click))

ft.app(target=main)

다음은 Checkbox, Dropdown 사용 예이다.

import flet as ft


def main(page):
    def checkbox_changed(e):
        output_text.value = (
            f"You have learned how to ski :  {todo_check.value}."
        )
        page.update()

    output_text = ft.Text()
    todo_check = ft.Checkbox(label="ToDo: Learn how to use ski", value=False, on_change=checkbox_changed)
    page.add(todo_check, output_text)

ft.app(target=main)

import flet as ft


def main(page: ft.Page):
    def button_clicked(e):
        output_text.value = f"Dropdown value is:  {color_dropdown.value}"
        page.update()

    output_text = ft.Text()
    submit_btn = ft.ElevatedButton(text="Submit", on_click=button_clicked)
    color_dropdown = ft.Dropdown(
        width=100,
        options=[
            ft.dropdown.Option("Red"),
            ft.dropdown.Option("Green"),
            ft.dropdown.Option("Blue"),
        ],
    )
    page.add(color_dropdown, submit_btn, output_text)

ft.app(target=main)