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
Windows 아이콘을 클릭한 후, Flutter SDK zip 파일을 다운로드합니다.
2) zip 파일 압축 풀기
다운로드 받은 zip 파일을 실행한 후, 원하는 경로(예. C:\flutter)에 압축을 해제합니다.
3) 환경 변수 추가
압축 해제가 완료되면, Flutter SDK 실행 파일이 있는 폴더(예. C:\flutter\flutter\bin) 경로를 환경 변수 중 하나인 Path 변수에 추가해야 합니다.
환경 변수 Path에 추가 되어있는 경로는 시스템의 어떤 경로에서든 간편하게 접근할 수 있기 때문입니다.
먼저, [윈도우] 키와 [R] 키를 동시에 눌러서 실행 창을 띄웁니다.
열기 란에 sysdm.cpl ,3을 입력한 후, 확인 버튼을 누릅니다.
확인 버튼을 누르면, 시스템 속성이 나옵니다.
환경 변수 버튼을 클릭합니다.
환경 변수 버튼을 클릭하면, 환경 변수 창이 나옵니다.
Path 변수를 클릭한 후, 편집 버튼을 클릭합니다.
편집 버튼을 클릭하면, 환경 변수 편집창이 나옵니다.
새로 만들기 버튼을 클릭한 후, Flutter SDK 실행 파일이 있는 폴더(예. C:\flutter\flutter\bin) 경로를 입력해줍니다.
마지막으로 확인 버튼을 클릭합니다.
다시한번 [윈도우] 키와 [R] 키를 동시에 눌러서 실행 창을 띄웁니다.
열기 란에 cmd를 입력한 후, 확인 버튼을 누릅니다.
cmd 창이 실행되면, flutter --version 이라는 명령어를 입력합니다.
flutter --version은 설치되어 있는 Flutter SDK의 버전을 확인할 수 있는 명령어입니다.
Flutter SDK가 정상적으로 설치되었다면, 다음과 같이 버전 정보를 확인할 수 있습니다.
2. 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 설치 파일을 다운로드합니다.
2) Android Studio 설치
다운로드 받은 Android Studio 설치 파일(.exe 파일)을 실행합니다.
Next 버튼을 클릭합니다.
Next 버튼을 클릭하면 설치할 컴포넌트 선택화면이 나옵니다.
Android Studio와 Android Virtual Device를 선택하고 Next 버튼을 클릭합니다.
Next 버튼을 클릭하면 설치할 경로 지정화면이 나옵니다.
희망하는 설치 경로를 지정한 후, Next 버튼을 클릭합니다.
Next 버튼을 클릭하면 설치를 진행합니다.
설치가 완료되면 Finish 버튼을 클릭하여 설치 과정을 마무리합니다.
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 버튼을 클릭합니다.
2) Flutter 플러그인 설치
환경 설정을 마무리하면, 이제부터 Android Studio를 사용할 수 있습니다.
새롭게 (개발) 프로젝트를 생성할 수도 있고 PC 내 기존 프로젝트를 가져올 수도 있으며, Github 등의 원격저장소에서 프로젝트를 가져올 수도 있습니다.
다만, 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. Android Studio Emulator 환경 구성
Flutter 플러그인를 설치했으면, 이제 Flutter 프로젝트를 생성하거나 불러올 수 있습니다.
이어서 Flutter 프로젝트 생성부터 에뮬레이터 실행까지 순차적으로 알아보도록 하겠습니다.
1) Flutter 프로젝트 생성
먼저, Flutter 프로젝트를 생성하도록 하겠습니다.
New Flutter Project 아이콘을 클릭하면, New Project 창이 뜨는 것을 확인할 수 있습니다.
Flutter 프로젝트를 생성하기 위해선, Flutter SDK가 필요합니다.
Flutter SDK path의 ...버튼을 클릭하여, 앞서 설치한 Flutter SDK(예. C:\flutter\flutter)의 경로를 선택해줍니다.
경로를 선택하고 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_app) 폴더 > lib 폴더 > main.dart 파일에 기본 코드가 작성되어 있습니다.
main.dart는 App을 실행하면 가장 먼저 실행되는 파일로써, 파일 내 작성된 코드를 기반으로 App이 동작합니다.
그럼 기본 제공된 main.dart 파일이 App으로는 어떻게 구현되고 동작하는지 Emulator로 확인해보도록 하겠습니다.
그러기 위해 먼저, Emulator를 생성하도록 하겠습니다.
우측 상단 메뉴에서 핸드폰 모양(Device Manager)의 아이콘을 클릭합니다.
Device Manager 아이콘을 클릭하면, Virtual Device Configuration 창이 뜹니다.
생성하고자 하는 Emulator의 Device 기종(예. Phone > Pixel 2)을 선택하고 Next 버튼을 클릭합니다.
다음에는 앞서 정한 Device에 설치할 시스템 이미지(예. R)를 선택한 후, 다운로드 버튼을 클릭합니다.
다운로드 버튼을 클릭하면 시스템 이미지 다운로드가 진행됩니다.
다운로드가 완료되면, Finish 버튼을 클릭합니다.
시스템 이미지를 다운로드 받았으면, Next 버튼을 클릭합니다.
최종적으로 Emulator를 생성하기 전, Device 기종과 시스템 이미지를 비롯하여 여러 설정 사항을 확인합니다.
확인 후, Finish 버튼을 클릭합니다.
Device Manger 창을 보면, 방금 생성한 Emulator 정보를 확인할 수 있습니다.
Emulator(예. Pixel 2 API 30)의 Actions 메뉴에 있는 ▶버튼을 클릭하여 Emulator를 실행합니다.
우측 하단의 Emulator 창을 보면, 핸드폰 모양의 Emulator가 실행되는 것을 확인할 수 있습니다.
Emulator가 실행된 것을 확인한 후, 우측 상단의 ▶버튼(Run 'main.dart')을 클릭합니다.
main.dart에 작성된 코드가 App으로 구현되어 실행됩니다.
일련의 로딩처리 과정 후, App이 정상 실행되는 것을 확인할 수 있습니다.
하나의 Android Studio 창에서 코드 작성과 Emulator 확인을 할 수 있다는 점은 장점이면서 동시에 단점일 수 있습니다.
이번엔 Emulator를 별도의 창으로 분리하는 법을 알아보도록 하겠습니다.
좌측 상단 메뉴에서 File > Settings 메뉴를 클릭합니다.
Settings 창에서 Tools > Emulator 메뉴를 보면, Launch in a tool window 옵션을 확인할 수 있습니다.
해당 옵션을 선택 해제한 후, Android Studio를 다시 시작합니다.
Android Studio를 다시 시작한 후, Emulator와 main.dart를 다시 실행합니다.
아래와 같이, Emulator가 Android Studio와 분리된 창으로 실행되는 것을 확인할 수 있습니다.
'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] Mac OS에서 Flutter 설치하기 (0) | 2022.03.30 |
| [Flutter] 앱 개발 방식의 종류와 Flutter 소개 (0) | 2022.03.30 |
댓글