Flutter 설치 및 실행 해보기

by

개요

Flutter를 설치하여 앱을 실행해 보는 것 까지 진행해보겠다. 윈도우에서 개발을 하면 안드로이드용 앱만 개발할 수 있고 macOS에서 개발을 하면 iOS앱 까지 개발이 가능하다. 그 외 리눅스와 크롬OS에서도 개발이 가능하다. 리눅스와 크롬OS에서 사용할 경우에도 해당 OS용 안드로이드 스튜디오를 다운받아 안드로이드용 앱만 빌드 가능하다.

Flutter는 한글 개발자 사이트를 제공하는데 모든 내용이 다 번역되어 있지는 않다. 그리고 다운로드할 때 접속한 OS의 버전을 인식하여 다운로드 링크를 생성해 주는 것 같은데 제대로 동작하지 않아 영문 사이트(flutter.dev)에서 다운로드 받아 설치 하였다.

다운로드 방법

Flutter 설치파일을 다운로드를 받아 적당한 경로에 압축을 해제한다. 그리고 bin의 실행파일들이 실행될 수 있게 PATH 설정만 하면 설치는 끝난다.

  1. 다운로드
    • Flutter 공식사이트를 통해서 다운로드가 가능하다. 윈도우, 맥OS, 리눅스, 크롬OS 중 사용하는 플랫폼에 맞게 다운로드 받는다. 윈도우에서 먼저 설치해보기 위해 윈도우 버전을 다운받았다.
    • 다운로드 사이트 : https://docs.flutter.dev/get-started/install
  2. 압축해제
    • 압축 파일을 C:\Program Files\Flutter 에 해제 하였다.
  3. PATH 설정
    • (윈도우 11 기준) 설정 -> 시스템 -> 정보 -> 고급 시스템 설정 클릭
    • 환경변수 클릭
    • 사용자변수 -> Path에 C:\Program Files\Flutter\bin 추가

설치방법

IDE는 안드로이드 스튜디오를 사용하여 사전에 설치하여 사용하고 있었기 때문에 별도의 설치는 필요하지 않다. 다만 실행 가능한 환경 구축이 필요하며 flutter doctor를 사용하여 점검이 가능하다. 사용자의 PC환경마다 점검 내용은 다르게 나올 수 있으니 필요한 내용을 확인하여 조치하여 주면 된다. 나는 android command line 설치와 visual c++ 설치가 필요한 것으로 나와 해당 모듈을 설치하여 주었다.

  • Flutter Doctor 실행
    • Flutter Doctor는 설치 환경에 대해 점검해 준다. 점검결과를 보고 필요한 사항에 대하여 조치하여 주면 된다.
      1. 관리자 권한으로 CMD 실행
      2. flutter doctor 입력
  • 점검된 내용에 대해 조치
    1. Android License status unknown
      • flutter doctor –android-licenses 입력
      • Android Studio 에서 cmdline-tools 설치
    2. Visual Studio is missing…..
      • https://visualstudio.microsoft.com/ko/downloads/ 접속
      • 커뮤니티 버전 다운로드
      • C++를 사용한 데스크톱 개발 선택
  • Flutter Doctor 재수행

프로젝트 생성 및 실행 방법

  1. Android Studio를 관리자권한으로 실행
  2. New Flutter Project 클릭
  3. Flutter 클릭 SDK path 에 flutter 설치 폴더 입력
  4. Next 클릭
  5. Project name에 myapp 입력, 원하는 언어 선택 후 Finish 클릭
    • FloattingActionButton 이 있는 기본 메인화면이 생성됨
  6. 스마트폰을 연결하고 Run을 클릭하여 앱을 설치
  7. 다음과 같이 실행된 앱을 볼수 있다.

Flutter 설치부터 기본 프로젝트 생성까지 알아보았다. 설치도 너무 간단하고 또 IDE도 안드로이드 스튜디오를 이용한다는 점에 친숙함을 느낄 수 있었다. 개발자 사이트와 문서도 잘되어 있다. 특히 기존 사용하던 언어와 Flutter를 비교하면서 설명해주는 페이지도 있으며, 한글 번역까지 되어있어 보다 쉽게 Flutter에 익숙해질 수 있도록 도와주고 있다. Main.dart 파일 하나에 코드 몇 줄로 저런 화면이 구현 된 다는 거에 Native에 비해서 생산성이 높겠다는 생각이 들었다. 앞으로 샘플 프로젝트를 다루면서 어떤 기능들이 있는지 살펴보도록 하겠다.

Leave a Comment