1. 프로젝트 만들고 실행하기

VS Code를 열고 Ctrl + Shift + P 를 누른 후, flutter를 입력하여 Flutter 명령어를 실행합니다.

Flutter: New Project를 선택하고 프로젝트 이름과 경로를 설정합니다.

자동으로 Flutter 기본 구조가 생성됩니다.

생성된 프로젝트 폴더에서 lib폴더안에 main.dart가 우리가 프로그램을 시작할 수 있는 소스파일입니다.

우선 해당 파일을 연 상태에서 vscode 우측 아래 Device를 Chrome으로 선택합니다. 그런 상단메뉴중 RUN 메뉴에서 Start Debugging 메뉴를 이용하여 실행해주면 웹페이지에서 작성된 코드가 나타납니다.

코드를 다시 한번 보겠습니다.

import 'package:flutter/material.dart';

void main() {
runApp(
    MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("Flutter Counter Example")),
        body: Center(
        child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
            IconButton(
                icon: const Icon(Icons.remove),
                onPressed: () => _controller.text = "${int.parse(_controller.text) - 1}",
            ),
            SizedBox(
                width: 80,
                child: TextField(
                controller: _controller,
                textAlign: TextAlign.center,
                style: const TextStyle(fontSize: 20),
                ),
            ),
            IconButton(
                icon: const Icon(Icons.add),
                onPressed: () => _controller.text = "${int.parse(_controller.text) + 1}",
            ),
            ],
        ),
        ),
    ),
    ),
);
}

final TextEditingController _controller = TextEditingController(text: "0");

해당 코드를 main.dart 에 넣고 실행하면 이전 python flet과 같은 기능의 웹페이지가 나타납니다.

2. 데스크탑으로 실행해보기

그럼 이제 디버깅시작을 종료하고 디바이스를 데스크탑으로 설정하여 시작해봅니다.

3. flet 코드와 비교

기존 python flet의 코드도 같이 보겠습니다.

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)

4. flutter 와 flet 그리고 flitter

flutter만 하게 될 경우 백엔드 서비스를 별도로 선택해야합니다. flet을 하게되면 파이썬을 이용한 백엔드인 FastAPI의 선택지를 배울 수 있습니다. 지금 예제에서는 flet에서 Scaffold를 사용하지 않고 작성하였는데 Scaffold를 flet에서 사용하려면 pagelet을 사용하면됩니다.

이처럼 flet 자체가 flutter기반으로 만들어졌기 때문에 좀 더 본인에게 문서나 예제 그리고 코딩하는 방식이 더 재미있고 이해가 쉬운걸로 선택할수있습니다. flet의 경우는 로드맵상 python으로 끝내지 않고 javascript진영으로도 확대할 계획을 가지고 있고 국내 svelte 커뮤니에서는 플리터 라는 자바스크립트로 사용가능한 플러터 기반의 UI 라이브러리도 있습니다.

5. Next

• serious-python