Flutter 개발 환경 구축하기

저번 글까지는 flutter를 배우기 위해 필요한 dart 언어에 대해서 배워보았다.

지금부터는 배운 dart 언어를 기반으로 flutter에 대해 살펴볼 것이다.

 

플러터에 대해 이런저런 이야기를 하는 것 보다 바로 코드를 실습하는 것이 이해하는 데 더 도움이 될 것 같다.

먼저 플러터 개발 환경을 구축하고 다음 글에서 flutter의 위젯에 대해 배워본다.

 

1. Flutter 개발 환경

Flutter 개발에는 flutter SDK와 개발 환경이 필요하다.

이 곳에서는 개발 환경으로 'Android studio'를 사용한다.

 

우선 안드로이스 스튜디오를 설치하기 위해 다음 사이트에 들어간다.

https://developer.android.com/studio

Download Android Studio & App Tools - Android Developers

그 다음 download 버튼을 눌러준다.

설치 페이지

특별히 해야하는 것은 없고, next를 눌러 설치를 해주면 된다.

설치 화면

설치를 완료하고 실행하면 다음고 같은 화면이 뜬다.

처음 설치한다면 이런 창이 아닌 다른 창이 뜰 수 있다.

어떤 경우든 flutter를 설치하고 다시 돌아오면 된다.

(버전이 바뀌면 화면은 바뀔 수 있다.)

 

이제는 Flutter SDK를 다운로드 해준다.

다음 사이트에 들어간다.

https://docs.flutter.dev/get-started/install

Install

설치 페이지

이 곳에서 자신이 사용하는 OS에 맞는 방법을 선택한다.

여기서는 windows를 기준으로 설명한다.

우선 flutter SDK 파일을 다운로드 해준다.

그 후 압축을 해제한 다음 C:\안에 flutter 이름으로 넣어준다.

 

이후에 환경 변수를 설정해준다.

검색 창에 시스템 환경 변수 편집을 검색하여 시스템 속성으로 들어간다.

이후 환경 변수 탭으로 들어가 시스템 변수의 path를 더블클릭 해준다.

그 다음 C:\flutter\bin을 추가해주고 확인을 누른다.

Flutter가 잘 설치되었는지 확인하기 위해 cmd에 flutter --version을 쳐본다.

다음과 같이 뜨면 잘 설치된 것이다.

Flutter를 설치했으니 이제는 android studio에 flutter를 연결시켜준다.

이를 위해 android studio에 flutter plugin을 설치해야 한다.

pulgin 설치를 위해 오른쪽 위쪽에 있는 톱니 모양을 클릭하고  plugin으로 들어간다.

만약 이 화면이 아닌 초기 화면이 나온다면 왼쪽에 있는 메뉴 바에 plugin이 있을 것이다.

검색 창에 flutter를 검색하고 설치를 해준다. 

이후 android studio를 재시작해준다.

이제 New project를 클릭하여 새로운 프로젝트를 생성한다.

아래 사진과 같은 창이 뜰 텐데 여기서 flutter를 선택하고 next를 누르면 된다.

그럼 이 창이 뜰 텐데 일단은 아무것도 건드리지 않고 넘어간다.

그럼 새로운 프로젝트가 생성된다.

 

이제 프로젝트를 실행해보자.

직접 휴대폰을 연결할 수도 있지만 지금은 에뮬레이터를 사용한다.

이를 위해 'Device manager'를 클릭해준다. (오른쪽 위에 있는 휴대폰과 안드로이드 로고가 있는 버튼)

그 이후 Create device를 선택한다.

원하는 기종을 선택하고 next를 누른다.

다음은 원하는 시스템 이미지를 선택하면 되는데 지금은 크게 중요하지 않기 때문에 적절한 것을 선택한다.

여기서는 R을 선택했다.

그리고 next를 누르면 다음과 같은 창이 뜨는데 원하는 이름을 적고 finish를 눌러준다.

그 다음 실행 버튼(재생버튼 같이 생긴 것)을 누르면 실행이 된다.

이러한 창이 새로 생긴다.

 

이제 진짜 프로그램을 돌려보자

위의 사진에서 보이는 것처럼 방금 만들어준 디바이스를 선택해준다. 

그다음 선택 창 옆에 있는 실행 버튼(녹색 삼각형)을 눌러준다.

 

잘 실행되었다면 다음과 같은 어플이 실행될 것이다.

여기까지 문제 없이 잘 따라왔다면 환경이 준비가 된 것이다.

 

다음 글에서는 flutter의 위젯에 대해 알아보고 몇 가지 실습을 해본다.