Flutter를 공부하기로 결정하였지만 모두가 가장 먼저 겪게 되는 문제가 바로 flutter 설치입니다. Javascript나 python과 같이 설치과정이 간단하지 않고 여러 단계를 거쳐야 하기 때문에 쉬운 과정은 절대 아닙니다. 이번 글에서는 chocolatey를 이용하여 windows11에서 flutter를 설치하는 방법에 대해서 설명하도록 하겠습니다.
Flutter 설치 환경
이번 글에서는 다음 환경에서 설치를 진행하였습니다.
Windows 11 Home (버전 : 21H2)
CPU : Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz, RAM : 16.0GB
flutter SDK 설치하기 – chocoloatey
flutter를 chocoloatey를 이용해서 설치하기 위해서 별도로 flutter 공식 홈페이지로 이동할 필요는 없습니다. 아래의 링크를 클릭하여 chocoloatey 공식 홈페이지로 이동해 보도록 하겠습니다.
설치 화면에서 Step1은 옵션이므로 건너뛰고 Step2부터 진행하도록 하겠습니다. 먼저 중간에 Individual이 선택되어 있는 상태에서 PowerShell을 관리자 권한으로 실행한 뒤 다음과 같이 ‘Get-ExecutionPolicy‘ 명령어를 입력한 뒤 엔터를 클릭합니다.
PowerShell을 관리자 권한으로 실행하기 위해서는 윈도우 버튼을 클릭 후 검색창에 ‘Powershell’을 입력하여 나오는 결과 중 ‘Windows PowerShell’을 오른클릭하여 ‘관리자 권한으로 실행’을 클릭하면 됩니다.
PowerShell을 관리자권한으로 실행한 뒤 ‘Get-ExecutionPolicy’를 입력한 뒤 엔터를 칩니다. 결과로 ‘Resticted’가 나온다면 다시 ‘Set-ExecutionPolicy AllSigned’를 입력한 뒤 엔터를 치면 실행 규칙 변경에 대해서 물음이 나오고 ‘A’를 입력하여 설정을 마무리합니다.
다음으로 chocolatey 설치 화면으로 이동하여 위 그림에 표시된 버튼을 클릭하여 명령어를 복사한 뒤 이를 PowerShell에 입력하여 엔터를 치면 설치가 진행됩니다.
설치가 완료되면 PowerShell을 껐다가 ‘관리자 권한’으로 다시 실행한 뒤 ‘choco -?’ 명령어를 입력합니다. 다시 실행 시 앞서 했던 것과 같이 관리자 권한으로 실행하는 것이 중요합니다.
다음과 같이 chocolatey 버전이 보인다면 설치가 제대로 된 것입니다. 버전은 설치 시점에 따라서 약간의 차이가 있을 수 있습니다.
설치가 모두 되었다면 choco 명령어를 이용해서 다양한 소프트웨어를 설치할 수 있습니다. flutter를 설치하기 위해서는 다음의 명령어를 powershell에 입력합니다.
choco install flutter
설치가 완료되었습니다. 이로써 flutter SDK를 설치하였습니다.
시뮬레이터 설치하기
SDK를 설치하였다면 이제 시뮬레이터를 설치하여야 합니다. flutter는 크로스 플렛폼입니다. 말인즉 웹, 데스크톱, 안드로이드, iOS등 여러 환경에서 앱을 개발할 수 있다는 이야기입니다. 저희는 Windows OS 환경에서 설치하고 있기 때문에 iOS나 macOS는 가능한 범위에 포함되지 않습니다. 가장 많이 사용하는 Android 시뮬레이터를 설치하기 위해서는 Android Studio를 설치해 주어야 합니다.
사실 이 부분은 상당히 시간도 많이 소모될 뿐더러 설치 방법도 매번 업데이트가 되어 가장 좋은 것은 공식 홈페이지의 설명을 따라가면서 진행하는 것입니다.
저는 windows 데스크톱 기반의 앱을 개발할 것이기 때문에 별도의 Android Studio를 설치하지는 않겠습니다. 이처럼 개발 범위가 확실히 정해진 경우라면 모든 시뮬레이션 환경을 설치하기에 앞서 자신에게 알맞는 시뮬레이션 환경만을 구축한 뒤 나중에 필요할 때 추가로 설치하는 방법을 권장드립니다.
자세한 설치 과정이 필요하신 분들은 아래의 링크를 이용해서 설치를 진행하시기 바랍니다.
Visual Studio Code 설치하기
Visual Studio Code는 flutter를 개발하는데 상당히 유용한 IDE입니다. 물론 Android Studio를 더 선호하시고 이미 익숙하신 분들도 있겠지만 Android 이외에 웹이나 데스크톱 기반의 앱을 개발하시는 분이라면 Visual Studio Code를 사용하시는 것을 추천드립니다. 아래의 링크를 참고하여 Visual Studio Code를 설치합니다.
Visual Studio 설치하기
Windows 데스크톱 개발을 위해서는 Visual Studio 설치가 필요합니다. 아래의 링크를 통해 Visual Studio 홈페이지로 이동합니다.
‘Community’ 버전을 설치하도록 하겠습니다. 화면의 ‘Free Download’를 클릭합니다.
자동으로 설치 프로그램이 다운로드됩니다. 다운로드 된 실행파일을 클릭합니다.
‘계속’을 클릭합니다.
설치가 진행되며 ‘워크로드’ 선택하는 창이 보이면 다음과 같이 ‘C++를 사용한 데스크톱 개발’을 클릭한 뒤 ‘설치’를 클릭합니다. 이를 제외한 다른 요소들은 용량을 많이 차지하기 때문에 설치를 해제하셔도 무방합니다.
설치가 진행되고 있습니다. 과정이 완료되면 자동으로 설치가 종료됩니다.
flutter doctor 실행하기
flutter를 설치할 때 가장 유용하게 활용할 수 있는 기능이 바로 flutter doctor입니다. 앞서 flutter SDK를 설치하셨던 분이라면 powershell을 종료한 후 다시 실행합니다. 이후 명령창에 다음의 명령어를 입력합니다.
flutter doctor
flutter doctor를 실행하면 다음과 같이 결과화면을 얻을 수 있습니다. 화면의 왼쪽에는 각 요소 별로 상태가 보입니다. Android toolchain 관련된 사항만 느낌표가 뜨는 것을 볼 수 있습니다. 이를 해결하기 위해서 다음의 명령어를 실행합니다.
flutter doctor --android-licenses
[Y]를 입력합니다. 이후 라이센스에 관한 상세 내용이 나오게 되는데 모두 y를 입력하여 과정을 진행합니다. 모든 과정을 완료한 뒤 flutter doctor를 재실행하면 다음과 같이 모든 이슈가 해결된 상태를 확인하실 수 있습니다.
flutter 시작하기
flutter 설치가 모두 완료되었다면 flutter를 시작해 보도록 하겠습니다. 자신의 프로그램을 저장할 폴더로 이동한 뒤(저는 C드라이브 아래에 Project라는 폴더를 만들었습니다) 다음과 같이 명령어를 입력합니다. 자신이 개발할 프로그램의 이름이 만약 test라고 한다면
flutter create test
다음과 같이 프로젝트가 설치된 것을 볼 수 있습니다.
vsCode를 실행합니다.
먼저 Dart와 Flutter를 이용하기 위한 Extension을 설치하도록 하겠습니다. 화면의 왼쪽에 Extension을 클릭한 후 검색창에 ‘dart’를 입력하여 검색한 후 가장 처음에 나오는 Dart extension을 클릭하여 인스톨합니다.
마찬가지로 Flutter도 검색하여 같은 방법으로 설치합니다.
File-Open Folder를 클릭한 뒤 자신의 프로젝트가 저장된 폴더를 열어줍니다.
왼쪽편의 EXPLORE에서 lib 폴더 아래에 main.dart 파일을 확인할 수 있습니다. 파일을 클릭하여 열어줍니다.
화면의 오른쪽 아래를 클릭하면 자신의 시뮬레이션 환경을 선택할 수 있습니다. Windows, Chrome, Edge가 선택 가능합니다. 저는 Windows를 선택하였습니다.
화면의 왼편에 ‘RUN AND DEBUG’를 클릭한 뒤 ‘Run and Debug’를 클릭하면 기본으로 작성되어 있는 코드가 실행되고 다음과 같은 카운터 프로그램이 실행되는 것을 볼 수 있습니다.