간단 개념

• Flutter는 구글에서 만든 UI 툴킷입니다.
• UI 툴킷이란 UI를 만드는 도구를 의미합니다.
• 핸드폰이나 모니터 화면, 태블릿PC, 소형 디바이스 화면들의 UI가 해당됩니다.
• Flutter는 Dart라는 언어로 만들어졌습니다.
• Dart 또한 구글에서 JavaScript를 모방해서 만든 언어입니다.
• Flutter를 개발하기 위해선 Dart 언어를 먼저 공부해야 합니다.
• 툴(IDE)은 VScode를 써도되고 Android Studio를 써도 됩니다.
• Flutter를 설치하면 내부에 Dart가 설치가 됩니다.

환경설정

안드로이드 스튜디오 설치

• 이미 설치가 되어 있습니다.

Flutter 설치하기

Flutter 다운로드

• 구글에서 Flutter SDK 설치를 검색합니다.
• 공식사이트에 들어갑니다.
  
• 우측 상단 'Get Started'를 클릭합니다.
  
• 자신이 사용하는 시스템으로 선택합니다.
• 저는 Window이므로 Windows를 선택하겠습니다.
  
• Flutter SDK를 다운로드 받아줍니다.
  
• 다운로드가 끝나면 원하는 위치에 압축을 풀어줍니다.
  
• 압축을 푼 후 폴더를 열어보면 flutter라는 폴더가 있습니다.
• 이 폴더를 사용할 경로로 옮겨줍니다.

Flutter 환경 변수 설정

• flutter 폴더 안에 bin이라는 폴더에 들어가보면 flutter 파일과 dart 파일이 함께 있습니다.
  
• bin 폴더의 경로인 C:\devtools\flutter\bin를 복사해서 cmd에서 cd C:\devtools\flutter\bin로 해당 폴더로 이동합니다.
• flutter --version 을 입력해서 flutter의 버전과 dart의 버전을 확인해 줍니다.
  
• dart --version 을 입력하면 dart의 버전도 따로 확인할 수 있습니다.
• 위와 같이 확인이 되면 flutter 설치가 정상적으로 된 것입니다.
  
• bin 폴더가 아닌 곳에서는 명령어를 사용할 수 없습니다.
• 어디서든지 명령어를 사용할 수 있게 환경 변수를 설정해줍니다.
  
• 고급 시스템 설정에 들어가서 환경 변수에 들어갑니다.
  
• 시스템 변수에 Path를 더블클릭합니다.
  
• 새로 만들기를 선택해서 복사한 주소를 넣어주고 확인을 눌러줍니다.
  
• cmd를 새로 열어서 flutter --version 을 입력해보면 이 명령어를 찾을 수 있습니다.
• 환경 변수로 설정되었기 때문에 찾을 수 있게 되었습니다.

Flutter doctor 실행

• cmd에서 flutter doctor 를 실행시키면 flutter가 어떤 상태인지 확인을 해줍니다.
• 전부 초록색 체크로 떠야 정상적으로 설치가 된 것입니다.
• 현재 Android toolchain이 연결이 안 되어 있습니다.
• 이외 것들은 모두 설치가 되어 있는 상태라 초록색 체크로 떴습니다.
  
• Android toolchain을 연결하기 위해서 flutter doctor --android-licenses 를 cmd에 입력해 줍니다.
• 전 Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to resolve this라는 생소한 오류가 발생했습니다.

오류 해결

• SDK 매니저를 찾아서 열어줍니다.
  
• Android SDK Manager 에서 SDK Tools로 들어갑니다.
  
• Android SDK Command-line Tools를 설치해 줍니다.
  
• 다시 flutter doctor --android-licenses 를 입력하면 동의하시나요라고 묻는 질문에 모두 y라고 대답을 해주면 됩니다.
  
• y라고 7번 응답해주면 모두 동의되었다고 합니다.
  
• 다시 한번 flutter doctor를 입력해서 확인해보면 issue가 없음을 확인할 수 있습니다.

Android Studio 연결

Plugins 연결

• Android Studio를 열어서 File - Settings - Plugins를 열어줍니다.
• Plugins에서 flutter와 dart를 확인해보면 설치가 되어 있지 않으므로 설치를 해줘야합니다.
  
• flutter를 설치하면 dart는 자동으로 추가 설치가 되므로 flutter만 설치해주면 됩니다.

프로젝트 생성

• File - New - New Flutter Project로 들어갑니다.
  
• Flutter를 선택한 후 SDK path를 연결해줍니다.
  
• 프로젝트 이름과 위치를 설정해줍니다.
• 전 Android 언어로 Java를 사용할 것이고(IOS는 안해봤습니다...), Platforms은 모두 설정했습니다.
• 설정을 다 한 후 Finish를 누르면 프로젝트가 생성됩니다.

AVD 실행

• AVD Manager를 이용해서 AVD를 실행시킵니다.
• 실행이 완료되면 프로젝트를 실행시켜봅니다.
  
• 작동이 잘하는 것을 확인할 수 있습니다.

TIP

• cmd에서 cls를 입력하고 Enter를 입력하면 깔끔하게 화면이 지워집니다.