Flet의 기본 구조 와 개발 가이드

Python for Beginners

Flet의 기본 구조 와 개발 가이드

Andrew's Akashic Records 2024. 10. 24. 13:22

728x90

Flet의 기본 구조는 Flutter와 유사하며, 위젯 기반으로 설계되어 있습니다. 이를 통해 사용자는 간단하게 UI 요소를 조합하고 애플리케이션을 만들 수 있습니다. Flet 애플리케이션은 주로 Page 객체를 중심으로 구성되며, 그 위에 다양한 위젯들을 추가하여 사용자 인터페이스를 구성합니다.

Flet의 기본 구조는 매우 직관적이며, 모든 것이 위젯과 이벤트 중심으로 이루어져 있습니다. 이를 통해 Python을 사용하여 복잡한 웹 애플리케이션을 쉽고 빠르게 개발할 수 있습니다. Page 객체는 앱의 전체 구조를 담당하며, 그 위에 다양한 UI 요소들을 추가하는 방식으로 애플리케이션이 구성됩니다.

다음은 Flet 애플리케이션의 기본 구조에 대해 설명한 예제입니다.

Flet 기본 구조 예제

import flet as ft

# 메인 애플리케이션 함수
def main(page: ft.Page):
    # 페이지 설정
    page.title = "Flet 기본 구조 예제"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    # 버튼 클릭 시 실행될 함수
    def button_clicked(e):
        page.add(ft.Text("버튼이 클릭되었습니다!"))

    # 버튼 위젯 생성
    button = ft.ElevatedButton("클릭하세요", on_click=button_clicked)

    # 페이지에 버튼 추가
    page.add(button)

# Flet 앱 실행
ft.app(target=main)

구조 설명

main 함수: 모든 Flet 애플리케이션은 기본적으로 하나의 메인 함수로 구성됩니다. 이 함수는 Flet의 Page 객체를 인자로 받으며, 페이지의 UI를 정의하는 역할을 합니다.
- page: 애플리케이션의 UI가 렌더링될 페이지를 나타냅니다. 이 객체에 위젯들을 추가하여 화면에 표시할 수 있습니다.
페이지 설정: page.title과 같은 속성을 설정하여 페이지의 제목을 변경하거나, vertical_alignment를 통해 페이지의 레이아웃을 설정할 수 있습니다. 여기서는 중앙 정렬이 설정되었습니다.
이벤트 핸들러: Flet은 사용자 상호작용을 쉽게 처리할 수 있는 이벤트 핸들링 시스템을 제공합니다. 예제에서는 버튼 클릭 시 실행될 함수를 정의한 후, 버튼의 on_click 이벤트에 연결했습니다.
위젯: Flet의 핵심은 위젯입니다. 위젯은 사용자가 볼 수 있는 요소(버튼, 텍스트 등)를 나타냅니다. 예제에서 ElevatedButton 위젯을 사용하여 버튼을 생성하고, page.add()를 통해 페이지에 추가했습니다.
Flet 앱 실행: ft.app(target=main)을 통해 Flet 애플리케이션을 실행합니다. 이 명령은 Flet의 웹 서버를 시작하고 main 함수를 호출하여 페이지를 렌더링합니다.

주요 구성 요소

Page 객체:
- Page는 Flet 애플리케이션의 기본 컨테이너입니다. 모든 UI 요소는 이 Page에 추가되며, 페이지 타이틀, 테마, 정렬 등을 설정할 수 있습니다.
위젯 (Widgets):
- Flet에서의 모든 UI 요소는 위젯입니다. 텍스트, 버튼, 이미지, 리스트 등 모든 화면 구성 요소는 위젯으로 표현되며, 이를 page.add()를 통해 페이지에 추가합니다.
- 예를 들어 ft.Text(), ft.ElevatedButton(), ft.Row()와 같은 다양한 위젯이 제공됩니다.
이벤트 (Event):
- 위젯은 사용자와의 상호작용을 위해 이벤트를 지원합니다. Flet의 이벤트 시스템을 통해 버튼 클릭, 텍스트 입력 등과 같은 상호작용에 응답할 수 있습니다. 이벤트 핸들러는 해당 위젯의 이벤트가 발생했을 때 실행되는 콜백 함수입니다.
레이아웃:
- Flet은 위젯을 배치하는 다양한 레이아웃을 제공합니다. Row, Column, Stack 등의 위젯을 사용하여 UI 요소들을 가로, 세로로 배치하거나, 겹치게 할 수 있습니다.
예를 들어, 여러 위젯을 세로로 배치하려면 Column을 사용할 수 있습니다.
page.add( ft.Column([ ft.Text("첫 번째 텍스트"), ft.Text("두 번째 텍스트") ]) )

Flet 애플리케이션의 주요 흐름

앱 초기화: ft.app() 함수가 호출되면 애플리케이션이 시작되고, 메인 함수(예: main)가 실행됩니다.
UI 구성: Page 객체에 다양한 위젯을 추가하여 화면 구성이 이루어집니다.
이벤트 처리: 버튼 클릭, 텍스트 입력 등 사용자 상호작용이 발생할 때마다 미리 정의한 이벤트 핸들러가 호출됩니다.
UI 업데이트: Flet은 UI 업데이트를 실시간으로 처리합니다. 예를 들어, 버튼 클릭 이벤트가 발생하면 새로운 위젯이 페이지에 추가됩니다.

728x90

Flet 용어

Flet을 사용하여 개발할 때 자주 사용하는 용어들이 있습니다. 이 용어들은 Flet의 작동 방식과 구조를 이해하는 데 중요한 개념들입니다. 여기서는 Flet 개발 시 사용하는 핵심 용어들을 정리하여 설명하겠습니다.

1. Page (페이지)

Page는 Flet 애플리케이션의 기본 컨테이너입니다. 모든 UI 요소(위젯)는 Page에 추가되며, 페이지 속성을 통해 전체 애플리케이션의 동작과 레이아웃을 설정할 수 있습니다. 예를 들어, 페이지 제목, 배경색, 정렬 방식 등을 Page에서 설정할 수 있습니다.

예시:

def main(page: ft.Page):
    page.title = "My Flet App"

2. Widget (위젯)

Widget은 Flet 애플리케이션의 사용자 인터페이스(UI)를 구성하는 기본 요소입니다. Flet에서 모든 UI 구성 요소는 위젯으로 표현되며, 버튼, 텍스트, 이미지, 리스트, 입력 필드 등 다양한 위젯이 제공됩니다. 위젯은 페이지나 레이아웃 컨테이너에 추가됩니다.

주요 위젯:
- Text: 텍스트 표시
- ElevatedButton: 버튼
- TextField: 입력 필드
- Image: 이미지
예시:page.add(ft.Text("Hello, Flet!"))

3. Event (이벤트)

Event는 사용자가 위젯과 상호작용할 때 발생하는 동작을 의미합니다. 버튼을 클릭하거나, 텍스트를 입력하는 등의 동작을 처리할 수 있으며, 이러한 상호작용을 처리하기 위해 이벤트 핸들러를 설정할 수 있습니다.

주요 이벤트:
- on_click: 버튼 클릭 이벤트
- on_change: 텍스트 입력 변경 이벤트
- on_submit: 폼 제출 이벤트

예시:

def button_clicked(e): 
    page.add(ft.Text("버튼이 클릭되었습니다!")) 
    button = ft.ElevatedButton("클릭하세요", on_click=button_clicked) 
    page.add(button)

4. Container (컨테이너)

Container는 다른 위젯들을 담는 상자 같은 역할을 하는 위젯입니다. 위젯을 특정한 레이아웃에 맞춰 배치하거나, 스타일을 적용하는 데 사용할 수 있습니다. 컨테이너에는 패딩, 마진, 경계선, 배경색 등을 설정할 수 있습니다.

예시:

container = ft.Container(
    content=ft.Text("Hello in a container!"),
    padding=10,
    bgcolor="blue"
)
page.add(container)

5. Alignment (정렬)

정렬은 위젯이나 컨테이너의 배치를 제어하는 데 사용됩니다. Flet에서는 수직 및 수평 정렬을 설정할 수 있으며, MainAxisAlignment와 CrossAxisAlignment로 각각 수직 및 수평 축에서의 정렬을 지정할 수 있습니다.

MainAxisAlignment: 주축(수직 또는 수평 축)에서 위젯들이 어떻게 배치될지를 결정합니다.
CrossAxisAlignment: 교차 축에서의 정렬을 지정합니다.
예시:page.vertical_alignment = ft.MainAxisAlignment.CENTER

6. Row / Column (행/열)

Row와 Column은 레이아웃을 구성하는 데 사용되는 위젯입니다. Row는 위젯을 가로 방향으로 배치하고, Column은 세로 방향으로 배치합니다. Flet에서는 레이아웃을 간단하게 구성할 수 있도록 이 두 가지 컨테이너를 자주 사용합니다.

Row: 여러 위젯을 수평으로 배치.
Column: 여러 위젯을 수직으로 배치.
예시:

row = ft.Row(
	[ft.Text("Item 1"), ft.Text("Item 2")]
    )
page.add(row) 

column = ft.Column(
	[ft.Text("Line 1"), ft.Text("Line 2")]
    )
page.add(column)

7. ListView (리스트 뷰)

ListView는 스크롤 가능한 리스트를 생성하는 위젯입니다. 많은 수의 항목을 표시할 때 사용되며, 주로 긴 목록을 다루는 데 유용합니다.

예시:

items = [ft.Text(f"Item {i}") for i in range(100)]
list_view = ft.ListView(items)
page.add(list_view)

8. App (앱)

App은 Flet 애플리케이션을 실행하는 메인 함수입니다. ft.app() 함수는 Flet 서버를 시작하고, Page를 렌더링하여 웹 애플리케이션을 동작하게 합니다. 이 함수는 Flet 애플리케이션의 진입점이며, 메인 함수에서 정의된 내용을 실행합니다.

예시:ft.app(target=main), ft.app(target=main, view=ft.AppView.Flet_APP_WEB)

Flet의 app() 메서드에서 사용할 수 있는 view 옵션들은 Flet 애플리케이션이 어떻게 실행되는지를 결정합니다. 각각의 차이점은 다음과 같습니다:

ft.AppView.FLET_APP_WEB:
- Flet 애플리케이션을 웹 브라우저로 열리게 합니다. 이 옵션을 사용하면 애플리케이션이 로컬 웹 서버에서 호스팅되며, 기본 웹 브라우저를 통해 접근 가능합니다. 실제로는 Flet 자체가 제공하는 웹 기반 인터페이스를 사용하는 것입니다.
ft.AppView.FLET_APP:
- Flet 데스크톱 애플리케이션으로 실행됩니다. 이 옵션은 웹 브라우저가 아닌 자체 독립적인 윈도우에서 애플리케이션이 실행되는 것을 의미합니다. 기본적으로 Flet은 애플리케이션을 자체적인 GUI 윈도우 안에서 실행할 수 있습니다.
ft.AppView.FLET_APP_HIDDEN:
- 애플리케이션이 백그라운드에서 실행되며, 화면에 표시되지 않습니다. 이 옵션은 주로 애플리케이션이 UI를 필요로 하지 않는 경우, 혹은 백그라운드에서 작업을 수행할 때 사용될 수 있습니다.
ft.AppView.WEB_BROWSER:
- 애플리케이션을 기본 웹 브라우저에서 열어줍니다. FLET_APP_WEB와 비슷하지만, 여기서는 애플리케이션이 기본 웹 브라우저 창에서 실행되며 브라우저 자체에서 동작합니다.

9. Theme (테마)

Theme은 애플리케이션의 전반적인 스타일을 정의하는 요소입니다. Flet에서는 라이트 테마와 다크 테마를 지원하며, 애플리케이션 전반에 걸친 색상, 글꼴 등을 설정할 수 있습니다.

예시:
```
page.theme_mode = ft.ThemeMode.LIGHT
```

10. Animation (애니메이션)

Flet은 다양한 애니메이션 효과를 제공하여 UI가 더욱 역동적으로 보이게 할 수 있습니다. 위젯에 애니메이션을 추가하거나 페이지 전환 효과 등을 구현할 수 있습니다.

예시:

page.add(ft.Text("애니메이션 텍스트", animate_opacity=300))

Flet 개발 가이드

Flet은 Python 개발자가 손쉽게 Flutter 기반의 웹 애플리케이션을 만들 수 있게 해주는 강력한 도구입니다. Flet의 직관적인 위젯 시스템과 이벤트 처리 방식을 통해 복잡한 UI도 쉽게 구현할 수 있으며, 애니메이션, 테마, 리스트뷰 등 고급 기능을 활용하면 더욱 다채로운 애플리케이션을 개발할 수 있습니다.

Flet의 UI 구성 요소는 주로 위젯(Widget)을 사용하며, 각 위젯은 특정한 역할을 합니다. Flet의 기본적인 위젯들과 레이아웃 설정, 이벤트 처리, 애니메이션 적용 등 중요한 개념을 소개합니다.

주요 위젯

Text: 텍스트를 표시하는 위젯.
page.add(ft.Text("안녕하세요"))
Button (ElevatedButton): 버튼을 표시하고 클릭 이벤트를 처리하는 위젯.
button = ft.ElevatedButton("클릭하세요", on_click=button_click)
TextField: 사용자가 텍스트를 입력할 수 있는 필드를 제공.
text_field = ft.TextField(label="이름을 입력하세요") page.add(text_field)
Image: 이미지를 표시하는 위젯.
image = ft.Image(src="https://example.com/image.png", width=100, height=100) page.add(image)

레이아웃 (Layout)

Flet은 위젯을 배치하는 방법으로 Row와 Column을 제공합니다. 이를 통해 위젯을 가로 또는 세로로 정렬할 수 있습니다.

Row: 위젯을 가로로 배치.
row = ft.Row([ft.Text("첫 번째 항목"), ft.Text("두 번째 항목")]) page.add(row)
Column: 위젯을 세로로 배치.
column = ft.Column([ft.Text("첫 번째 줄"), ft.Text("두 번째 줄")]) page.add(column)

이벤트 처리

Flet에서 이벤트(Event)는 버튼 클릭, 입력 필드 변경 등 사용자 상호작용을 처리하는 중요한 요소입니다. 이벤트 핸들러는 위젯의 특정 이벤트 발생 시 호출되는 함수입니다.

def button_clicked(e):
    page.add(ft.Text("버튼 클릭!"))

button = ft.ElevatedButton("클릭", on_click=button_clicked)
page.add(button)

상태 관리

애플리케이션의 상태를 관리하고 페이지를 동적으로 업데이트하는 방법을 제공합니다. 상태가 변경될 때 페이지가 다시 렌더링되도록 할 수 있습니다.

count = 0

def increment(e):
    global count
    count += 1
    page.add(ft.Text(f"카운트: {count}"))

button = ft.ElevatedButton("증가", on_click=increment)
page.add(button)

애니메이션

Flet은 애니메이션을 쉽게 추가할 수 있습니다. 예를 들어, 위젯의 투명도나 위치를 애니메이션으로 설정할 수 있습니다.

text = ft.Text("애니메이션 텍스트", animate_opacity=300)
page.add(text)

ListView

스크롤 가능한 리스트를 표시할 수 있습니다. 긴 목록을 처리하거나 많은 데이터를 표시할 때 유용합니다.

items = [ft.Text(f"항목 {i}") for i in range(100)]
list_view = ft.ListView(items=items)
page.add(list_view)

Theme

Flet은 라이트 테마와 다크 테마를 지원합니다. 페이지에 테마를 적용하여 전체 애플리케이션의 스타일을 설정할 수 있습니다.

page.theme_mode = ft.ThemeMode.LIGHT  # 또는 ft.ThemeMode.DARK

Container와 스타일

Container 위젯을 사용하여 위젯에 패딩, 마진, 배경색 등을 쉽게 추가할 수 있습니다.

container = ft.Container(
    content=ft.Text("스타일이 있는 텍스트"),
    padding=20,
    bgcolor="lightblue"
)
page.add(container)

Flet 배포

Flet은 기본적으로 로컬에서 웹 브라우저로 애플리케이션을 실행하지만, 웹 서버에 배포할 수도 있습니다. Flet 애플리케이션을 Heroku나 Vercel 같은 플랫폼에 배포하여 웹 애플리케이션으로 사용할 수 있습니다.

728x90

저작자표시