[Flutter]플러터 설치방법

1. Flutter 소개

 1) Flutter는 프로그래밍 언어가 아니라 프레임워크입니다.

  - Flutter는 Google에서 개발 및 지원하는 오픈 소스 프레임워크로 2018년에 출시되었을 때는 주로 모바일 앱 개발을 지원했습니다. 이제 모바일뿐만 아니라 웹, Windows, MacOS, Linux 및 기타 플랫폼에서 멋진 네이티브 애플리케이션을 빠르게 개발하고 배포하기 위한 다양한 패키지와 도구들을 제공하고 있습니다. 저 같은 경우는 소스 코드를 저장(Ctr+S)과 동시에 수정된 내용이 모바일 화면에서 즉각적으로 반응하는 hot reload 기능을 매우 만족하며 사용 중입니다. 실제로 개발 중에 간단한 소스코드를 수정하더라도 이를 확인하기 위해서는 처음부터 앱이 실행되어야 하는 과정을 거쳐야 하는데 이는 많은 시간이 소요하게 되기 때문입니다. 

 

2) 크로스 플랫폼(안드로이드,  IOS) 애플리케이션 개발이 가능합니다.

  - 안드로이드, IOS, 리눅스, Windows, MacOS 및 웹 브라우저에서 모두 동작이 되도록 출시를 하였으며 안드로이드의 경우 Google의 Material Design와 IOS는 Apple의 Cupertino 디자인사용하여 다양한 스타일로 개발을 진행하게 됩니다. 다만 모바일 앱을 제외하면 기능이나 실제 사용 사례는 아직 부족해 보이지만 Google에서 밀어주는 만큼 빠른 시일 내에 개선이 될 가능성이 많아 보입니다.

 

3) UI 구성은 위젯(Widget)을 사용합니다.

  - 크게는 스테이트리스 위젯(Stateless Widget)과 스테이트풀 위젯(Stateful Widget)으로 구분되며 text, icon, image, Text field, button등과 같은 기본 단위 요소부터 눈에 보이지 않은 center, column, row, padding까지 모두 위젯이라고 불립니다. 개발을 시작해 보면 아시겠지만 위젯으로 시작해서 위젯으로 끝날만큼 모든 구성이 위젯으로 진행되므로 UI를 간편하고 손쉽게 구성할 수 있습니다.

 

 4) 앱 개발을 위한 프로그래밍 언어로든 Dart를 사용합니다.

  - Flutter에서는 Dart언어를 사용합니다. 이 역시 Google에서 멀티 플랫폼에서 동작될 수 있는 프로그래밍 언어이며 앱, 데스크톱, 웹브라우저, 서버 플랫폼까지 지원을 하고 있습니다. 개발을 진행하다 보면 Dart언어에 대한 학습과 테스트를 진행하게 되는데 DartPad라는 웹사이트를 통해서 코드 실행 결과를 바로 테스트할 수 있어 시간 절약에 많은 도움이 될 수 있으니 사용해 보시기 바랍니다.

   

2. 설치 요구사항

 공식 홈페이지에 작성된 윈도우 시스템의 요구사항은 아래와 같습니다. 최저 요구사항으로 체감상 아래와 동일한 사양으로 개발을 진행하면서 에뮬레이터까지 사용하면 조금의 피로감이 올 수 있는 정도이니 참고해 주시기 바랍니다.

• 64-비트 마이크로 소프트® 윈도우® 8/10
• x86_64 CPU 아키텍처; 2세대 인텔 코어 이상 또는 AMD CPU 탑재 Windows Hypervisor.Framework 지원
• 8GB 램 이상
• 최소 8GB의 사용 가능한 디스크 공간 (IDE + 안드로이드 SDK + 안드로이드 에뮬레이터)
• 1280 x 800 최소 화면 해상도 

 

3. 설치방법

 1) 안드로이드 스튜디오를 설치합니다.

  - Flutter는 안드로이드 스튜디오에서 사용하는 프레임워크이므로 우선 안드로이드 스튜디오 설치를 진행합니다.
  - 이전에 올렸던 글을 참고해 주세요. 2023.03.02 - [Android Flutter/AndroidStudio] - Android Studio 설치방법

Android Studio 설치방법

 

 2) 안드로이드 스튜디오 Plugins > Flutter와 Dart를 설치합니다.

Plugins에서 Flutter, Dart 설치

 

 3) SDK Manager > Android SDK > SDK Tools > Android SDK Command-line tools을 체크하고 적용합니다.

Android SDK Command-line tools 설치

 

 4) Flutter SDK를 다운로드하여 설치합니다.

  - Flutter SDK 공식 다운로드 사이트 :  https://docs.flutter.dev/get-started/install

Install

 

  ① 자신의 PC 운영체제에 맞는 항목을 선택 후 SDK를 다운로드합니다. 저는 Windows를 선택하여 진행하였습니다.

운영체제 맞는 SDK를 다운로드 합니다.

 

  ② 다운로드 완료 후 압축파일을 해제하시면 됩니다. 저 같은 경우는 C드라이보다는 공간이 남는 다른 드라이브에 설치를 진행하였습니다. 아래 보시면 bat 콘솔을 통해 flutter의 명령을 PC에 전달하여 상호 작용을 하게 됩니다. 사용자마다 다른 bin파일 경로를 시스템에서 알 수 있도록 시스템 환경변수에서 Path에 해당 bin폴더의 경로를 등록하여 사용해야 합니다.

SDK 설치 폴더

 

  ③ Path 등록 과정은 다음과 같습니다.
   - Windows키 > 시스템 환경 변수 편집 > 환경 변수 > 환경 변수 편집 > flutter bin 파일까지 경로 등록합니다. 저 같은 경우 "E:\flutterSDK\flutter\bin"을 등록하였습니다.

path 설정 과정

 

 5) Flutter 정상적으로 설치되었는지 확인하기

  ④ 이제 명령 프롬프트(cmd) 창에서 "flutter doctor"라고 입력하시면 아래와 같은 결과가 나옵니다.

   - 라이선스 관련 [X] 표시의 경우 : "flutter -android--licenses" 입력해 주시고 "Y"를 입력해 주세요.

   - Windows version (unable to confirm if installed windows version is 10 or greater)의 경우 아래 순서대로 입력해 주세요.

 

   "flutter upgrade"
   "flutter channel master"
   "flutter doctor -v"

flutter doct 결과

 

 5) Flutter 프로젝트 생성해 보기

  ① Projects > New Flutter Projects

  ② Flutter > Flutter SDK Path경로 확인 > Next
   - 경로가 비어있은 경우 꼭 flutter 설치 폴더를 지정해 주세요.

  ③ Projects name 작성 > Create
   - Projects name의 경우 대문자, 띄어쓰기, 특수문자는 사용이 안되며 소문자, underscores(_)만 사용이 가능합니다. 또한 Project location에 한글이 들어가면 오류가 발생하니 참고하시길 바랍니다.

Flutter 프로젝트 생성 순서

 

4. 마무리

  - Flutter Device Selection 버튼을 눌러 Chrome을 선택 후 디버깅(Shift + F9)을 진행하면 플러스 버튼을 누르면 숫자가 카운드 되는 기본앱이 실행됩니다. 이로써 flutter로 개발을 진행할 수 있는 준비가 완료되었습니다. 

Flutter 기본 앱 실행