지난 수업 학습을 통해 Flutter 개발 환경을 모두 설치하셨을 거예요. 이번 시간에는 Android Studio로 Flutter 개발하는 방법을 알아보겠습니다.
Flutter 플러그인 설치하기
기본 상태에서 Android Studio는 Flutter를 지원하지 않으므로 Flutter 플러그인을 별도로 설치해야 합니다.
Android Studio를 실행한 후 상단 메뉴 File → Settings (단축키 Ctrl+Alt+S) 를 클릭합니다.
왼쪽 메뉴에서 플러그인을 찾고 Flutter를 검색한 뒤 설치 버튼을 누릅니다. 설치 완료 후 Android Studio를 재시작하세요.
Flutter SDK 경로 설정하기
플러그인 설치만으로는 충분하지 않으며, Android Studio 내에서 Flutter SDK 경로를 지정해주어야 합니다.
File → Settings → Languages & Frameworks → Flutter
파일 설정 언어 및 프레임워크 Flutter
Flutter 최상위 폴더 경로를 지정하며 bin 폴더까지 들어갈 필요는 없습니다. 그 후 Apply 버튼을 클릭합니다.
설치 및 설정 작업이 완료될 때까지 기다립니다.
프로젝트 생성하기
이후 일반 Android Studio 프로젝트 생성 방식과 동일하게 진행하면 됩니다.
Flutter를 선택하고 오른쪽에서 다시 Flutter 폴더 경로를 지정한 뒤 Next를 누릅니다.
그 다음 프로젝트 이름, 저장 경로, 프로젝트 설명, 고유한 조직 ID를 설정합니다. 구글 플레이 스토어에 앱을 출시할 때 조직 ID는 유일해야 하므로 도메인을 거꾸로 작성하는 것을 권장합니다. 본 예시에서는 com.foxdevelop.프로젝트이름 형식을 사용했습니다. 그 후 Android 기본 언어를 선택하는데, 이는 개발 언어가 아닌 Android 앱 기본 래퍼 언어이며 실제 개발은 Dart로 진행합니다. Platforms 항목은 코드를 빌드하여 배포할 대상 플랫폼을 선택하는 곳입니다. 본 예시에서는 Android 앱, 웹사이트, Windows 데스크톱 프로그램으로 배포하기 위해 해당 항목을 체크했으며 iOS, Linux, macOS용 프로그램을 출시하려면 나머지 세 옵션을 체크하면 됩니다. 마지막 Create 버튼을 클릭합니다.
주의: 프로젝트 이름은 소문자만 사용하고 공백과 특수문자를 포함하면 안 됩니다.
설정을 완료하면 Android Studio에서 프로젝트 생성을 시작하며, 완료까지 시간이 소요될 수 있습니다.
저는 여기서 아래와 같은 오류가 발생했습니다.
Run Flutter Doctor를 클릭해 Flutter Doctor로 환경을 검사합니다.
그 후 정상적으로 프로젝트를 엽니다.
하지만 우측 상단에서 프로젝트 실행이 불가능하고 아래와 같은 표시가 나타납니다.
테마 색상을 변경해서 현재 Android Studio가 밝은 테마로 보입니다.
위 스크린샷처럼 빨간색 X 표시가 보이면 클릭합니다.
편집 구성(Edit Configurations)을 클릭합니다.
Dart SDK가 설정되지 않았다는 알림이 표시되며 오른쪽 Fix 버튼을 클릭합니다.
Dart SDK 경로를 지정해야 하는데, Flutter를 설치했다면 Dart SDK는 Flutter SDK 폴더 내에 포함되어 있습니다.
만약 Flutter SDK 경로가 다음과 같다면:
Dart SDK 경로는 아래와 같습니다.
위 이미지처럼 Dart 경로를 설정한 후 Android Studio를 재시작하세요.
설정 완료 후 상단에 녹색 삼각형 실행 버튼이 표시됩니다. 왼쪽에 Windows Desktop이 선택되어 있다면 Windows 데스크톱 앱 형식으로 프로젝트를 실행할 수 있으며, 녹색 삼각형을 클릭하면 실행됩니다.
* 발생 가능한 오류 해결
아래 오류가 발생하지 않았다면 이 부분은 건너뛰어도 좋습니다.
위 오류는 의존성 패키지가 정상적으로 로드되지 않아 발생하며, 네트워크 환경 문제일 경우 프록시를 사용하거나 아래 방식으로 미러 서버를 설정할 수 있습니다.
해당 오류가 발생한다면 위 이미지 참고하여 Android Studio 터미널에서 미러 주소를 설정하세요.
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
flutter pub cache repair
flutter pub getCode language: PHP (php)명령어 실행 후 모든 오류가 사라질 것입니다.
프로젝트 실행하기
좌측 상단 녹색 삼각형 버튼을 클릭해 프로젝트를 실행합니다. Flutter는 여러 플랫폼을 지원하므로 휴대폰을 컴퓨터에 연결하고 개발자 모드를 활성화해 Android 앱을 디버깅할 수 있습니다. 휴대폰 디버깅을 원하지 않는다면 Windows Desktop 환경으로 테스트할 수도 있습니다.
위 이미지처럼 프로젝트 생성 시 선택했던 세 가지 플랫폼 중 원하는 것을 고를 수 있습니다. 본 예시에서는 Windows Desktop을 선택한 후 녹색 삼각형 버튼을 눌러 실행했습니다.
위 화면이 우리의 첫 Flutter 애플리케이션입니다. 이번 수업은 여기까지이며 직접 따라 해보시길 바랍니다. 문제가 발생하시면 아래 댓글로 문의해 주세요.