1. Flutter SDK 설치
Flutter SDK(Software Development Kit)는 Flutter App을 개발하는데 필요한 도구 모음입니다.
순차적으로 설치하는 방법을 알아보도록 하겠습니다.
1) Flutter SDK 다운로드
먼저, 아래의 링크에서 Windows 아이콘을 클릭합니다.
https://docs.flutter.dev/get-started/install
Install
Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems.
docs.flutter.dev
Intel 칩 기반의 Mac OS를 사용하시는 분은 Intel 버전의 파일을 다운로드, M1 칩 기반의 Mac OS를 사용하시는 분은 Apple Silicon 버전의 파일을 다운로드 합니다.
* M1(Apple Silicon) 칩 기반의 Mac OS를 사용하시는 분은 Flutter SDK 설치에 앞서, 터미널에서 아래의 명령어 실행을 통해 Rosetta를 설치해주셔야 합니다.
Rosetta는 Intel 칩에서 사용할 수 있도록 제작된 Mac용 프로그램을 M1 칩에서도 사용할 수 있도록 지원해주는 프로그램입니다.
앞서, 다운로드 받은 Flutter SDK zip 파일을 희망하는 경로에 압축 해제합니다.
예) unzip ~/Downloads/flutter_macos_3.0.1-stable.zip압축을 해제한 후, Flutter SDK 실행 파일이 있는 폴더(예 ~/Downloads/flutter/bin) 경로를 환경변수 중 하나인 Path 변수에 추가하고 새로고침 해야 합니다.
예) echo 'export PATH="$PATH:~/Downloads/flutter/bin"' >> ~/.zshrc
source ~/.zshrc2. Android Studio 설치
Android Studio는 App 제작을 위한 통합 개발 환경(IDE)입니다. 간단히 정리하면, Android Studio를 통해 코드를 작성하고 테스트 할 수 있습니다.
순차적으로 설치하는 방법을 알아보도록 하겠습니다.
1) Android Studio 다운로드
먼저, 아래의 링크에서 Download Android Studio 버튼을 클릭합니다.
https://developer.android.com/studio
Download Android Studio and SDK tools | Android Developers
The official IDE for Android app developers.
developer.android.com
약관 동의를 한 후, Android Studio 설치 파일을 다운로드 합니다.
Intel 칩 기반의 Mac OS를 사용하시는 분은 Intel 버전의 파일을 다운로드, M1 칩 기반의 Mac OS를 사용하시는 분은 Apple Silicon 버전의 파일을 다운로드 합니다.
다운로드 받은 Android Studio 설치 파일을 실행합니다.
3. Android Studio 환경 구성
Android Studio 설치가 완료되었으면, 바로 실행해봅니다.
설치 후 처음으로 실행하였기 때문에, 초기 환경 설정 및 Flutter 플러그인 설치를 진행해야 합니다.
순차적으로 알아보도록 하겠습니다.
1) 초기 환경 설정
먼저, 기존의 Android Studio 환경 설정 파일을 불러올 것인지 확인합니다.
Do not import settings(가져오지 않음)를 체크하고 OK 버튼을 클릭합니다.
다음으로 Android Studio 사용 통계 정보를 Google에 전송할 것인지 확인합니다.
희망하는 설정 버튼을 클릭합니다.
Next 버튼을 클릭합니다.
다음으로 Android Studio 환경 구성 방식에 대한 선택화면이 나옵니다.
기본 설정인 Standard를 체크하고 Next 버튼을 클릭합니다.
다음으로 Android Studio UI 테마 선택화면이 나옵니다.
희망하는 UI 테마를 선택하고 Next 버튼을 클릭합니다.
앞서 선택한 구성으로 환경 설정을 진행합니다.
Next 버튼을 클릭합니다.
Android Studio를 사용하기 위해서는 라이센스 동의가 필요합니다.
Accept를 체크하고 Finish 버튼을 클릭합니다.
라이센스 동의까지 마치면, 환경 구성이 마무리됩니다.
Finish 버튼을 클릭합니다.
환경 설정을 완료하면, Android Studio를 사용할 수 있습니다.
2) Android SDK Command-line Tools 설치
원할한 Android Studio 사용을 위해, Android SDK Command-Line Tools를 설치합니다.
More Actions 버튼을 클릭한 후, SDK Manager 버튼을 클릭합니다.
Android SDK > SDK Tools 메뉴에서 Android SDK Command-line Tools를 선택한 후, OK 버튼을 클릭합니다.
설치사항을 확인한 후, OK버튼을 클릭합니다.
Android SDK Command-line Tools 설치가 완료되면, Finish 버튼을 클릭합니다.
3) Flutter 플러그인 설치
Flutter 프로젝트를 진행하기 위해선, 추가로 Flutter 플러그인을 설치 해야합니다.
왼쪽의 Plugins 메뉴를 선택한 뒤, Marketplace 메뉴에서 flutter를 검색합니다.
flutter가 검색되면, 선택 후 Install 버튼을 클릭합니다.
Install 버튼을 클릭하면, Dart 플러그인 설치도 필요하다는 메세지 창이 뜹니다.
Flutter는 Dart 언어로 되어있기 때문에 설치가 필요합니다.
Dart 플러그인에 대해서도 Install 버튼을 클릭합니다.
Dart 플러그인과 Flutter 플러그인 설치가 완료되면, Restart IDE 버튼이 표시됩니다.
Restart IDE 버튼을 클릭하여 Android Studio를 다시 시작해주도록 합니다.
재시작된 Android Studio를 확인해보면, New Flutter Project라는 아이콘이 새로 생성되어 있습니다.
이를 통해 Flutter 플러그인이 정상 설치된 것을 확인할 수 있습니다.
4. Flutter Doctor 검증
Flutter SDK와 Android Studio를 설치한 후, Flutter Doctor 명령어를 통해 추가로 설치가 필요한 사항이 있는 지 확인합니다.
flutter doctor1) Android 사용 동의
다음의 명령어 실행을 통해, Android 사용 동의 처리를 합니다.
flutter doctor --android-licenses
2) Xcode 설치
iOS 앱 개발(Build, 테스트 등)을 위해, App Store에서 Xcode 프로그램을 설치합니다.
Xcode 설치 후, 다음의 명령어 실행을 통해 Xcode 구동에 필요한 cocoapods 프로그램을 추가로 설치합니다.
sudo gem install cocoapods
Xcode까지 설치를 완료하면, Flutter 개발에 필요한 주요 프로그램(Flutter, Android toolchain, Xcode, Android Stuiod)이 모두 설치된 것을 확인할 수 있습니다.
5. Flutter 프로젝트 생성 및 iOS Emulator 실행
마지막으로 Flutter 프로젝트 생성부터 에뮬레이터 실행까지 순차적으로 알아보도록 하겠습니다.
1) Flutter 프로젝트 생성
먼저, Flutter 프로젝트를 생성하도록 하겠습니다.
New Flutter Project 아이콘을 클릭하면, New Project 창이 뜨는 것을 확인할 수 있습니다.
Flutter 프로젝트를 생성하기 위해선, Flutter SDK가 필요합니다.
자동으로 지정된 Flutter SDK path의 경로가 앞서 설치한 경로로 올바르게 설정되어 있는 지 확인한 후, Next 버튼을 클릭합니다.
다음으로 프로젝트 생성에 필요한 정보를 입력합니다.
입력 정보는 다음과 같습니다.
- Project name : 프로젝트 이름
- Project location : 프로젝트 생성 경로
- Description : 프로젝트 상세 설명
- Project type : 프로젝트 타입
- Organization : 개발자(사)를 식별할 수 있는 고유 값, 일반적으로 개발사의 도메인을 역순으로 작성
- Android language : 안드로이드 개발 언어(Java/Kotlin 중 선택)
- iOS language : iOS 개발 언어(Objective-C/Swfit 중 선택)
- Platforms : 개발할 플랫폼
프로젝트 생성에 필요한 정보를 모두 입력한 후, Finish 버튼을 클릭합니다.
Finish 버튼을 클릭하면, Flutter 프로젝트가 생성됩니다.
2) Emulator 생성 및 실행
Flutter 프로젝트를 생성하면, 프로젝트 이름(예. test_project) 폴더 > lib 폴더 > main.dart 파일에 기본 코드가 작성되어 있습니다.
main.dart는 App을 실행하면 가장 먼저 실행되는 파일로써, 파일 내 작성된 코드를 기반으로 App이 동작합니다.
그럼 기본 제공된 main.dart 파일이 App으로는 어떻게 구현되고 동작하는지 Emulator로 확인해보도록 하겠습니다.
상단의 <no device selected> 메뉴를 클릭한 후, Open iOS Simulator 버튼을 클릭합니다.
실행된 iOS 에뮬레이터를 확인합니다.
iOS 에뮬레이터가 정상적으로 실행된 것을 확인한 후, 우측 상단의 ▶버튼(Run 'main.dart')을 클릭합니다.
일련의 로딩처리 과정 후, App이 정상 실행되는 것을 확인할 수 있습니다.
'App Programming > Flutter' 카테고리의 다른 글
| [Flutter] Flutter Material API (0) | 2022.04.06 |
|---|---|
| [Flutter] main.dart 분석하기 (0) | 2022.04.03 |
| [Flutter] Flutter 시작하기 (0) | 2022.04.02 |
| [Flutter] Windows OS에서 Flutter 개발 환경 구성하기 (0) | 2022.03.30 |
| [Flutter] 앱 개발 방식의 종류와 Flutter 소개 (0) | 2022.03.30 |
댓글