1. Python으로 Flet 시작하기

드디어 개발환경의 셋팅을 끝내고 개발을 시작하게되었습니다. 제가 Python의 Flet으로 시작하는 이유는 개발을 재밌게 배웠으면 하는 바램입니다.

많은 언어들 중에 그나마 학습곡선이 낮으면서 데스크탑, 웹, 스마트폰 어플리케이션을 다 만들 수 있는 Flet 프레임워크는 Flutter를 기반으로 만들어져있음으로 문법 또한 flutter와 비슷한 구조를 가집니다.

즉, flet를 조금이나마 사용하게 되면 flutter의 학습곡선을 조금이라도 더 낮출 수 있고 그럼으로 인해 배우게 된 지식으로 그 다음단계를 더 쉽게 하기 위한 목적입니다.

1) Flet 설치하기

앞에서 poetry를 이용하여 패키지를 추가하는 방법은 poetry add 패키지명이라고 했습니다.

패키지를 설치하기 원하는 프로젝트를 열고 터미널을 연 후에 아래 명령어를 입력하시면됩니다.

poetry add flet

poetry new 를 이용하여 폴더를 만드셨다면 src 경로 밑에 프로젝트를 직접 만들었다면 해당 프로젝트 경로 밑에 counter.py파일을 생성해줍니다. 이 파일을 이용하여 코드를 작성하고 실행하며 Flet을 직접 해볼수있습니다

2) 기본예제 입력

아래는 공식홈페이지의 문서 첫화면에 나오는 예제입니다. 이를 counter.py 파일 내용으로 붙여넣으시면됩니다.

import flet as ft
    
def main(page: ft.Page):
    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

    def minus_click(e):
        txt_number.value = str(int(txt_number.value) - 1)
        page.update()

    def plus_click(e):
        txt_number.value = str(int(txt_number.value) + 1)
        page.update()

    page.add(
        ft.Row(
            [
                ft.IconButton(ft.icons.REMOVE, on_click=minus_click),
                txt_number,
                ft.IconButton(ft.icons.ADD, on_click=plus_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )

ft.app(main)

3) 프로그램 실행

우선 공식예제에서 알려주는 명령어로 실행하는 방법은 아래와 같습니다. 해당 명령은 해당 파일이 있는 곳에서 해주시면됩니다.

platform	터미널 명령어
desktop	flet run counter.py
web	flet run —web counter.py

PyCharm을 이용하신다면 해당파일을 연 상태에서 F5를 단축키를 이용하거나 우측 상단의 실행(▷) 모양의 버튼을 눌러주시면됩니다.

그럼 응용프로그램으로 위 명령어와는 다르게 데스크탑 어플리케이션으로만 실행이 되기때문에 웹으로 실행해 보기 위해선 약간의 코드 수정이 필요합니다. 이 경우도 웹으로만 실행됩니다.

단순히 실행하는 아래 코드에서

ft.app(main)

두번째 인자로 view=ft.AppView.WEB_BROWSER를 추가하면됩니다.

ft.app(main, view=ft.AppView.WEB_BROWSER)

F5로 이제는 웹브라우저로 바로 사용할수있게되었습니다.

4) 학습방법

공식 튜토리얼에 있는 예제들을 받아서 실행을 해보거나 직접 구현을 해보셔도 좋습니다.

2. 코드결과 웹으로 확인하기

이 홈페이지는 SveletKit으로 만들어지고 있습니다. 간단한 MarkDown파일만을 이용하여 Fly.io에 Dockerfile을 이용해 호스팅중입니다.

뒤에가면 호스팅하는 방법과 Docker파일 작성방법도 설명드릴텐데 그 전에 앞서 코드로 작성한 내용을 배포한 결과물을 살펴보도록 하겠습니다.

[Flet Counter Web - 호스팅 작업중]

현재 flet-dev 버그 수정중…

3. Flet HomePage

URL	내용
https://flet.dev	공식 홈페이지
https://flet.dev/docs	공식 문서

3. Next

DartPAD

Python Flet Framework