Flutter 첫 어플리케이션

뭔지 몰라도 일단 한번 만들어보자!

1. 패키지 생성

커맨드 라인 상에서 com.mycompany.hello_flutter 패키지를 생성해 보자. 참고로 --org 옵션을 사용하지 않으면 패키지 이름이 com.example.hello_flutter 가 되어 나중에 출시 시점에 귀찮아 지므로 미리미리 설정해 두자.

flutter create --org com.mycompany hello_flutter

 

참고로 VS Code 에서 Ctrl + Shift +p 로 command pallete 를 열고 "Flutter: New Application Project" 를 실행하여 GUI 상에서 프로젝트를 생성할 수도 있다. 하지만, 패키지 이름 prefix가 com.example 로 하드 코딩 되므로 추후 귀찮게 바꿔줘야 한다. 비추!

 

2. 빌드 및 실행

VS Code 에서 Ctrl + F5를 누르고 "Dart & Flutter" 를 고르면 에뮬레이터 혹은 연결된 기기에 설치 및 테스트가 가능하다. 패키지 생성시 기본적으로 생성되는 템플릿 코드에 의해서 + 버튼을 누르면 숫자가 올라가는 카운터 앱이 실행된다.

 

그런데, 생성한 패키지는 디버그 빌드가 기본 설정되어 있어 추후 릴리즈 빌드 테스트가 필요할 때 따로 설정을 바꿔야 할 필요가 생기는데, 편하게 빌드 옵션을 변경할 수 있도록 VS Code를 약간만 설정해 보자. ^^;

Flutter는 디버그 빌드 및 실행을 할 경우 성능이 느려지지만, 코드상의 변화가 실시간으로 앱에 반영이 되는 핫 리로딩을 지원한다. 반면 릴리즈 빌드는 핫 리로딩은 불가능하지만 어플리케이션의 제 성능을 확인 가능하다. 따라서 성능 검증 까지 고려했을 때, 개발 과정에서 두가지 빌드를 모두 활용하는 경우가 많다.

참고로 디버그 빌드를 할 경우 앱의 우상단에 Debug 라는 표시가 나타나게 된다. (물론 없애는 방법도 있다) 

Ctrl + Shift + p 로 Command Pallete를 열고 "Debug: Open launch.json" 를 열고 아래처럼 내용을 작성하고 저장하자.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter",
            "type": "dart",
            "request": "launch",
            "program": "lib/main.dart"
        },
        {
            "name": "Flutter Release",
            "request": "launch",
            "type": "dart",
            "args": [
                "--release"
            ]
        }
    ]
}

 

이제, VS Code 좌측의 네번째 Run 아이콘을 누르면 Flutter Release 와 Flutter 옵션을 선택할 수 있게 변경되었을 것이다. 이제 릴리즈 빌드 테스트를 하고 싶으면 Flutter Release를 선택 하면 되고, 디버그 빌드를 하려면 Flutter를 선택하면 된다.  

릴리즈 빌드/실행 옵션 - Flutter Release

디버깅 빌드/실행 옵션 - Flutter