AI Research / Programming / Project

[앱 개발] 플러터(Flutter) 설치, VS Code 개발 환경 구축 및 설정하기

Posted by

Flutter는 크로스 플랫폼 모바일 애플리케이션 개발을 위한 프레임워크로, 한 번의 코드 작성으로 iOS와 Android 앱을 동시에 개발할 수 있다. 이 포스트에서는 Flutter 개발 환경을 설정하는 방법을 따라하기 쉽게 단계별로 설명하며, Flutter를 처음 사용하는 개발자도 쉽게 따라할 수 있도록 자세히 설명하고자 한다.

순서:

VS Code 설치 → Android Studio 설치 → Flutter SDK 설치

→ 환경 변수 설정 → Flutter 설치 확인 → 프로젝트

VS Code 설치

Visual Studio Code 설치

Flutter Extension 설치

  • Extensions 메뉴에서 Flutter를 검색하고 Flutter Extenstion을 설치한다.

Android Studio 설치

Android Studio 다운로드 및 설치

Flutter 및 Dart 플러그인 설치

  • Plugins 섹션에서 Flutter를 검색하여 설치한다.
    Flutter 플러그인을 설치하면 Dart 플러그인도 자동으로 설치된다.

Flutter SDK 설치

  • Flutter 공식 웹사이트에서 Flutter SDK(Software Development Kit)를 다운로드한다.
  • Flutter 다운로드 페이지로 이동한다.
  • OS 선택
    사용 중인 운영체제 선택한다. (Windows, macOS, Linux)
  • App 종류 선택
    사용하고자 하는 목적에 맞는 앱 종류를 선택한다. (Desktop, Android, Web)
    모바일에서 사용할 App을 만들고자 함이니 Android를 선택한다.
  • Flutter SDK 압축 파일 다운로드 및 압축 해제
    윈도우 환경에서 Flutter App을 만들기 위한 설명 자료가 나온다.
  • 아래로 조금 내려가서 Install the Flutter SDK를 찾아 Download and install 을 선택하고 flutter stable version을 찾아 다운로드 한다.
  • 다운로드한 압축 파일을 적절한 위치에 압축을 해제한다.
    예를 들어, C:\src\flutter (Windows), /Users/username/development/flutter (macOS).
    다만, 경로에 특수문자나 스페이스 공백이 포함되지 않는 경로에 설치해야 한다.

환경 변수 설정

Flutter SDK의 경로를 환경 변수에 추가하여 언제든지 Flutter 명령어를 사용할 수 있도록 설정한다.

Windows

환경 변수 설정 열기

  • Windows + Pause 키를 눌러 시스템 > 정보 탭을 연다.
  • 관련 링크 메뉴에서 고급 시스템 설정을 선택한다.
  • 환경 변수를 선택한다.

환경 변수 편집

  • 시스템 변수 섹션에서 Path를 선택하고 편집 버튼을 클릭한다.
  • 새로 만들기 버튼을 클릭하고 Flutter SDK의 bin 경로를 추가한다.
    예: C:\src\flutter\bin

확인 및 적용

모든 창에서 확인을 클릭하여 설정을 적용한다.

macOS/Linux

프로파일 파일 편집

  • 터미널을 열고 홈 디렉토리에 있는 프로파일 파일을 연다. (.bashrc, .zshrc, .bash_profile 등)
  • 다음 명령어를 사용하여 파일을 연다.
nano ~/.bashrc

환경 변수 추가

  • 파일의 끝에 다음 줄을 추가한다.
export PATH="$PATH:/Users/username/development/flutter/bin"

설정 적용

  • 파일을 저장하고 닫는다. (Ctrl + O, Enter, Ctrl + X)
  • 다음 명령어를 사용하여 변경 사항을 적용한다
source ~/.bashrc

Flutter 설치 확인

터미널/명령 프롬프트 열기

  • Windows: 명령 프롬프트 또는 PowerShell 열기
  • macOS/Linux: 터미널 열기

Android 라이센스 동의하기

flutter doctor --android-licenses

flutter doctor --android-licenses 명령어를 실행하면 라이센스를 동의하게 된다.

Flutter 설치 확인 명령어 실행

flutter doctor

설치 상태 확인

flutter doctor 명령어를 실행하면 Flutter와 관련된 설치 상태를 확인할 수 있다. 필요한 추가 설치 항목이나 설정이 표시된다.

Flutter 프로젝트 생성

새로운 Flutter 프로젝트 생성

터미널/명령 프롬프트 열기

  • Windows: 명령 프롬프트 또는 PowerShell 열기
  • macOS/Linux: 터미널 열기

Flutter 프로젝트 생성 명령어 실행

flutter create project_name

프로젝트 디렉토리로 이동

cd project_name

프로젝트 구조 이해

주요 디렉토리 및 파일

  • lib/: 주요 Dart 코드 파일이 위치하는 디렉토리.
  • lib/main.dart: 애플리케이션의 진입점.
  • android/: Android 플랫폼 관련 파일.
  • ios/: iOS 플랫폼 관련 파일.
  • pubspec.yaml: 프로젝트의 설정 파일로, 의존성 관리에 사용.

코드 편집

  • VS Code 또는 Android Studio에서 project_name 디렉토리를 열어 코드를 편집할 수 있다.

프로젝트 실행

에뮬레이터 또는 실제 디바이스 연결

  • Android Studio에서 에뮬레이터 설정 및 실행.
  • 실제 디바이스를 USB로 연결하고, USB 디버깅을 활성화.

프로젝트 실행 명령어 실행

flutter run

실행 확인

  • 프로젝트가 성공적으로 빌드되고 에뮬레이터 또는 실제 디바이스에서 실행된다.

결론

위의 단계를 따르면 복잡한 Flutter 개발 환경을 성공적으로 설정할 수 있다. VS Code, Android Studio, Flutter SDK 설치, 환경 변수 설정, 프로젝트 생성 및 실행까지의 과정을 따라하여 Flutter로 애플리케이션 개발을 시작할 수 있다. 이제 부터 애플리케이션 개발을 시작해 보자.

Leave a Reply

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다