Starting Flutter

SongWoo Yu·2025년 12월 18일

Flutter

목록 보기
2/7

Flutter 시작하기

오늘은 Flutter에 입문하기 위해 개발환경을 조성하고, "Hello World"를 찍는 정도를 목표로 한다. 기본적으로 Flutter Docs를 참고하여 개발환경을 조성하는 것부터 시작하겠다.

개발환경 조성

1. Git, IDE 설치하기

개발을 시작하는 사람들이라면 대부분은 설치되어 있을 것이다. 일단 MAC OS 기준으로 진행하니, 리눅스나 윈도우즈를 사용 중이라면 공식 홈페이지를 참고하여야 한다. 먼저 깃을 설치하기 위해서는 homebrew를 사용하는 방식과 xcode를 사용하는 방식이 대표적이다. 플러터에서는 xcode를 사용하는 방법을 안내하고 있다.

xcode-select --install

이후에 VSC를 권장하는데, 여기서 IntelliJ나 안드로이드 스튜디오만을 이용해도 된다고는 한다.
일반적인 방식인 VSC를 받는 방식은 간단하다 그저 인터넷에 download vscode라고 검색하면 웹이 나온다.
여기서 본인의 OS에 맞는 것을 선택하면 된다.

2. VSC Extension : Flutter 설치하기

다음으로 vscode의 익스텐션에서 플러터를 검색하면 다음과 같이 Dart Code 인증을 받은 플러터 익스텐션이 바로 검색된다. 이를 install 해준다.

3. Start New Project

VSCode에서 command+shift+p를 눌러 명령 팔레트를 열어준다. 여기서 new project를 눌러준다.
그러면 우측 하단에 플러터 SDK를 다운로드할 것인지 물어보게 된다. 바로 Download

경로를 설정해주라고 하는데, 찾기 쉬운 위치에 해주면 좋다. 나의 경우 (user)/documents/flutter에 설정했다.

설치가 완료되면 Flutter SDK를 PATH에 등록할지 물어본다고 하는데, 나의 경우 그런 문구가 나오지 않았다. 일단 플러터 앱을 만들어보고 안 되면 패스에 수동으로 등록해보면 될 듯 하다.

이후에 command+shift+p를 눌러 명령 팔레트를 열어준다. 여기서 new project를 누르면 Template을 고르라고 한다. 기본적으로 Appliction을 만들어주면 된다.

4. 생성된 Application 살펴보기


보면 크로스플랫폼을 넘어 멀티플랫폼을 표방하고 있는 플러터답게 Android, ios, linux, macos, web, window 등 다양한 플랫폼을 위한 디렉토리가 보이는 것을 확인할 수 있다. 여기서 lib에 있는 main.dart 부분이 실제 내가 만드는 애플리케이션에 해당한다.

5. Hello world 찍어보기

뭐든 개발을 시작하면 뭐다? Hellow World를 찍어봐야 한다. 설치하면 장치는 두 가지가 잡힌다. chrom과 macos가 있다. 확인하는 방법은 그냥 cmd + shift + p를 눌러서 flutter device를 클릭해준다.

그러면 이렇게 잡힌다.

이후에 terminal에서 flutter run이나 run and debug에서 눌러주면 된다. 먼저 macos로 디버그 모드를 실행한 모습이다. 그러면 mac os용 앱이 보여진다.

다음으로 chrom을 선택하고 실행하면 웹이 생성된다.

0개의 댓글