1. 플러터를 처음 경험해보는 방법으로 dartpad를 소개합니다.

dartpad는 브라우저에서 바로 Dart와 Flutter 코드를 작성하고 실행할 수 있는 툴입니다. 별도의 설치 없이 사용 가능하니, 초보자나 간단한 테스트를 하려는 개발자들에게 정말 편리한 도구입니다.

1) dartpad 사용법

dartpad를 사용하려면 아래 링크에 접속해보세요:

dartpad

좌측에 코드를 입력하고 ‘Run’ 버튼을 클릭하면, 우측에 결과 화면이 나타납니다.

dartpad의 특징은 다음과 같습니다:

Flutter 지원: Flutter로 UI를 설계하고 바로 결과를 확인할 수 있습니다. 실시간 미리보기: 코드를 수정하면 즉시 새로고침 없이 결과 화면을 확인할 수 있습니다. 간편한 공유: 작성한 코드를 저장하고 URL로 공유할 수 있어 협업에 적합합니다.

우린 앞서 flet을 이용하여 카운트 프로그램 예제를 만들어봤습니다.

2) Flutter로 간단한 카운터 예제 만들기

이전에 우리는 Flet을 이용해 Python에서 카운터 프로그램을 만들어봤죠? 이제 Flutter에서도 똑같이 만들어보겠습니다.

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");

3) 결과확인

위 코드를 dartpad에 붙여넣고 실행해보시면 화면 중앙에 숫자가 표시되며, + 와 - 버튼을 누르면 숫자가 증가하거나 감소합니다.

이 예제를 통해 확인할 수 있는 점은 다음과 같습니다:

Flet와 Flutter의 유사성: Flet은 Flutter를 기반으로 만들어진 프레임워크이기 때문에, Flet로 개발에 익숙해졌다면 Flutter로 전환하는 데 큰 어려움이 없다는 점. Flutter의 UI 설계 간편성: Flutter는 선언적으로 UI를 설계하며, 상태 관리를 통해 간단한 로직도 쉽게 처리할 수 있습니다. 개발을 배우는 단계에서는 이렇게 간단한 예제부터 시작하여, 점진적으로 더 복잡한 기능을 익히는 것이 중요합니다.

작성한 코드를 저장하고 공유할 수 있는 기능도 dartpad의 큰 장점입니다.

다음 단계로는 dartpad에서 작성한 코드를 GitHub Gist를 이용해 저장하고 공유하는 방법을 배워볼 예정입니다. 이렇게 저장한 코드는 다른 사람들과 협업하거나, 나중에 다시 참고할 때 유용합니다.

2. Next

• GitHub Gist