Flutter 설치하기 (Flutter SDK, Cross-Platform 환경)

Flutter - Build apps for any screen

Flutter는 Cross Platform Coding을 위한 SDK입니다.

 

하나의 Code로 하나의 platform용 앱만 만들 수 있는 Native Platform과는 달리,

Cross Platform인 Flutter를 이용하면 하나의 Code로 여러 platform용 앱을 만들 수 있습니다.

 

아래는 Flutter 설치 완료 후, 테스트용 코드를 각각의 플랫폼에서 실행시켜본 모습입니다.

Windows	Web	Android

 

'22.9.11 기준, mobile(iOS, Android), Web, Desktop(Windows, macOS, linux)를 하나의 code로 build할 수 있는 환경을 제공하며, 기본 사용 언어는 Dart 입니다. Google에서 지원하고있고, 링크되어있는 웹사이트 방문시 self-learning course도 제공합니다.

 

기본적으로 홈페이지에 워낙 자세한 설치 가이드가 있지만,
  ① Android / Windows / Web 용 앱개발을 위해

  ② Windows PC에 설치하고,

  ③ Visual Studio Code를  editor로 사용하는 경우

에 대해 Tutorial을 작성해보겠습니다.

 

Flutter 설치는 아래와 같은 단계로 진행됩니다.

 

1. Flutter SDK 다운로드 및 경로 설정

2. Cross-Platform 환경 설치

      ⓐ Android Studio 설치 (Android App 개발시)

      ⓑ Visual Studio 또는 Visual Studio Build Tools 설치 (Windows App 개발시)

      ⓒ Chrome 또는 Edge 설치 (Web 개발시, Chrome 또는 Edge가 이미 설치되어있다면 불필요)

3. Visual Studio Code 설치

 

차근차근 진행해보겠습니다.

 

1. Flutter SDK 다운로드 및 경로 설정

Flutter 설치의 첫번째는 Flutter SDK 설치입니다.

별도의 설치프로그램은 없으며,

다운로드 후 압축을 원하는 폴더에 압축을 풀고,

환경변수에 path 추가를 해주면 됩니다.

 

  ① 가장 최신 version의 SDK를 다운로드 해줍니다. ('22.9.12 기준 3.3.1이 최신)

      ⓐ Flutter SDK releases 웹페이지로 가서

Flutter SDK releases

      ⓑ Stable channel 중, 가장 최신의 SDK를 다운로드

Stable channel (Windows)에서 가장 최신의 Flutter version을 다운로드 해줍니다.

  ② 다운로드한 Flutter SDK를 원하는 폴더에 압축 해제해줍니다.

      홈페이지에 특수문자/한글/공백이 들어간 폴더명은 사용하지말라는 경고문이 있네요.

      프로그램 폴더(C:\Program Files\) 등에 풀면 안되겠죠?

 

      저 같은 경우는 Programming 폴더를 만들고, 코딩 관련된 폴더/파일들을 이 안에 모으고 있습니다.

      압축 파일들을 Programming 폴더에 풀었습니다.

  ③ 마지막으로 flutter\bin 폴더를 시스템 환경 변수 path에 추가해주어야합니다.

      ⓐ 먼저 flutter\bin 폴더의 경로를 클립보드에 복사해둡시다.

          flutter\bin 폴더로 이동해서 주소창의 전체 경로를 복사합니다.

      ⓑ 윈도우키 누르시고, "고급 시스템 설정" 을 자판으로 입력하시면 제어판 - 고급 시스템 설정이 검색됩니다. 클릭!

          순서대로, 고급 시스템 설정 → 환경 변수 → "Path" 선택 후 편집 → 새로 만들기 후,

          아까 복사한 flutter\bin 폴더의 전체 경로를 Ctrl + V (붙여넣기) 합니다.

마지막으로 확인 → 확인 → 확인 3번 클릭하면 Flutter SDK 준비가 완료됩니다.

 

2. Cross-Platform 환경 설치

Flutter 설치의 두번째는 Cross-Platform 환경 설치입니다.

 

여기서는 Android / Windows / Web 용 앱만을 대상으로 할 것이므로, Android와 Windows용 Cross-Platform 환경을 설치합니다. (Web용 앱은 별도의 추가 환경 설치가 불필요합니다.)  Android 또는 Windows용 앱을 만들지않으실 분은 설치하지않으셔도 무방합니다.

■ Android용 Cross-Platform 환경 설치

우선, Android앱 개발을 위한 Cross-Platform 환경은 최신 버젼의 Android Studio 설치가 필요합니다.

 

정확히는 Android Studio는 Android 앱 개발을 위한 IDE(Integrated Development Environment : 통합개발환경)입니다만,

Android Studio를 설치하면,

  ⑴ Android 앱 개발을 위한 통합 개발 환경 기능 외에도,

  ⑵ 최신 Android SDK 및 tool을 다운로드/업데이트 받고

  ⑶ Android emulator 설치를 통해 개발시 쉽게 debugging이 가능합니다.

⑵, ⑶ 기능 사용을 위해서 Android Sudio를 설치해보겠습니다.

  ● Android용 Cross-Platform 환경 설치 Tutorial

① 홈페이지에서 최신 버젼 Android Studio 다운로드를 클릭합니다.

② License agreement 창이 나오면, 동의 후 다운로드를 시작합니다.

③ 다운로드 완료 후, 설치 프로그램을 실행합니다. 혹시 다운로드 파일을 못 찾으실 경우, 일반적으로 탐색기에서 "즐겨찾기 → 다운로드" 폴더에서 찾으시면 됩니다. 실행파일명은 android-studio-20xx.x.x.xx-windows.exe 와 같습니다.

④ 이제부터는 설치 프로그램의 기본 옵션대로 설치 진행하시면 됩니다.

 

⑤ Android studio 설치 완료 후, SDK와 Android SDK Command line Tools 설치를 진행해야합니다.

    위 마지막 캡쳐에서 옵션을 변경하지않았다면, 완료 후 자동으로 Android studio가 실행됩니다.

    첫 실행시 자동으로 최신 버젼의 SDK 및 필수 SDK Tools 다운로드가 진행됩니다.

첫번째 옵션시 기존 세팅을 가져올 수 있음. 처음 설치시에는 아래쪽 옵션을 선택하고 OK 선택

SDK 및 필수 SDK Tools 설치 후 사용 통계 공유 동의창이 뜨고, 사용환경에는 무관하니 둘 중 원하는 옵션을 선택

License Agreement① : 왼쪽에 보시면 android-sdk-licens, intel-android-extra-license 2건에 대해 동의 필요. Accept 선택

License Agreement② : intel-android-extra-license 선택, Accept 선택 후, Finish 선택

 

⑥ 위에서 Android Studio 기본 세팅과 SDK, 필수 SDK Tools가 설치 완료되었습니다.

    앞으로 Android Studio를 실행시키면 위의 마지막 캡쳐 화면과 같이 실행됩니다.

    이제, 마지막으로 "Android SDK Command-line Tools"를 설치해봅시다.

    화면 중앙부의 "More Actions ∨"를 클릭하여 SDK Manager를 실행합니다.

파란원과 같이 최신 Android API 33이 설치되어있음을 확인 후, 노란원을 선택해서 SDK Tools로 이동

설치되어있지않은 Android SDK Command-line Tools (latest) 를 체크 후, OK버튼 선택

설치 완료 후, Android Studio 종료

 

⑦ Android용 Cross-Platform 환경이 잘 설치되었나 확인해봅시다.

    확인을 위해서는 command 창에서 flutter doctor를 실행하면됩니다.

    먼저 '윈도우키' 입력 후 자판으로 cmd 를 검색해서 명령 프롬프트를 실행하고, flutter doctor를 입력해주면됩니다.

    명령 프롬프트가 실행되면, 아래와 같이 flutter doctor[Enter]를 입력합니다.

 

    총 7가지 항목 중에 3가지 항목에 문제가 있습니다.

    첫번째, Android toolchains는 license 동의가 완료되지않았다고합니다.

    친절하게 해결책까지 적혀있으니, 시키는데로 실행합니다.

license에 동의해줍니다. y[Enter]

동의해야할 license가 여러개이니 동일하게 y[Enter]

license 동의 완료

다시 한 번 flutter doctor[Enter]

 

    Android toochain 문제가 해결되었습니다.

 

    나머지 2개의 문제 중 Chrome은 Chrome 브라우저를 설치하면 없어집니다.

    참고로 Edge를 사용하시는 분들의 경우, 굳이 Chrome을 사용하지않아도 Web앱 실행이 가능합니다.

    글 작성을 위해 PC를 포맷 후 진행하다보니 Chrome이 아직 설치되어있지않은데, 바로 설치해야겠네요.

 

    마지막 문제점은 Visual Studio 미설치로 다음에 나올 Windows용 Cross-Platform 환경을 설치하면 해결됩니다.

■ Windows용 Cross-Platform 환경 설치

Windows용 앱을 작성하기위해서는 Visual Studio를 설치해야합니다. 이후에 Editor로 사용할 Visual Studio Code와는 다르니 주의해주세요. Visual Studio Code는 개발환경에 최적화된 Text Editor이고, Visual Studio는 Windows를 위한 Android Studio와 유사하여 IDE와 SDK, Tool 등을 모두 제공합니다.

 

실제 Windows용 앱 개발을 위해서는 "Desktop development with C++"을 필요로합니다. 따라서 이번에는 Visual Studio 전체 설치를 하지않고, Visual Studio Build Tools를 설치하는 방식으로 진행해보겠습니다.

 

● Windows용 Cross-Platform 환경 설치 Tutorial

① 홈페이지에서 최신 Visual Studio Build Tools를 다운로드합니다.

    - 모든 다운로드 → Visual Studio 2022용 빌드 도구

      (All Downloads → Build Tools for Visual Studio 2022)

Download Visual Studio Tools - Install Free for Windows, Mac, Linux

 

② 다운로드된 설치 프로그램을 실행합니다.

C++를 사용한 데스크톱 개발(Desktop development with C++)을 체크 후 설치 버튼을 클릭합니다.

설치 완료. 프로그램 종료하시면 됩니다.

 

③ Windows용 Cross-Platform 환경이 잘 설치되었나 확인해봅시다.

    확인을 위해서는 Android 환경 확인과 마찬가지로 명령 프롬프트에서 flutter doctor를 실행하면됩니다.

    윈도우키 → cmd 또는 명령 프롬프트 로 검색해서 실행하는 방법도 있지만, 다른 방법도 있습니다.

 

    윈도우키 + R 단축키를 입력하면 아래와 같이 실행창이 뜹니다.

    여기에 cmd를 입력하면 바로 명령 프롬프트 실행이 가능합니다.

 

    flutter doctor[Enter] 시 Chrome을 제외하고는 모두 문제없이 설치되었음을 확인하였습니다.

 

    내침김에 Chrome도 설치하고 다시 flutter doctor를 실행해보았습니다.

    이제 깔끔하네요.

 

 

다음은 설치 과정의 마지막인 Visual Studio Code 설치입니다.

실제 모든 작업은 Visual Studio Code에서 진행하게됩니다.

tistory 페이지 용량 문제로 더 이상 작성이 안되네요.

 

다음 포스팅에서 마지막 Visual Studio code를 설치하고, Sample 앱을 만들어 보겠습니다.

 

좋은 하루 되세요~