티스토리 뷰
안드로이드 스튜디오와 플러터 SDK를 설치하고, 첫 플러터 프로젝트를 생성해 보자.
1. 프로젝트 생성하기
먼저 플러터 앱 프로젝트를 생성해 보자.
안드로이드 스튜디오를 실행하고 New Flutter Project를 선택한다.
다음으로 Flutter SDK가 설치된 path를 설정해야 한다. 보통 자동으로 설정되니 Next를 클릭한다.
Project name에 프로젝트 이름을 설정한다. 여기서는 first_app으로 하였다.
프로젝트 이름은 소문자와 _(언더바)로만 만들 수 있다.
Organization은 세상에서 유일한 값이 되어야 한다. 보통 자신의 블로그나 웹 사이트의 도메인을 사용하면 된다.
여기서는 com.example.first_app으로 하였다.
이렇게 두 개만 설정하면 프로젝트를 생성할 수 있다. 그 외에 개인에게 필요한 설정을 선택한 후 Create를 클릭한다.
프로젝트가 생성되면 데모 앱이 main.dart에 작성되어 있다.
데모 앱 코드는 플러터가 어떻게 작동하는지에 대한 정보를 얻을 수 있다.
2. 에뮬레이터 설정하고 실행하기
안드로이드 스튜디오를 처음 사용하면 안드로이드 에뮬레이터에 대한 설정이 없기 때문에 에뮬레이터를 실행할 수가 없다.
먼저 에뮬레이터를 설정하고 데모 앱을 실행시켜 보자.
안드로이드 스튜디오의 상단 Tools > Device Manager를 선택한다.
그리고 Create vitual device를 클릭한다.
기본으로 제공하는 디바이스도 있고, 사용자가 커스텀하여 등록할 수도 있다.
나는 우선 기본으로 제공하는 디바이스를 선택하려고 한다.
보통 해상도는 720 * 1280, 1080 * 1920, 1440 * 2560이 많이 사용된다.
그래서 1080 * 1920인 Pixel2를 선택하였다.
다음은 시스템 이미지를 선택해야 한다.
시스템 이미지는 안드로이드 버전이다.
여기서는 최대한 사용자들이 앱을 사용할 수 있게 적절한 버전을 선택해야 한다.
API level distribution chart 링크를 클릭해서 현재 버전별 사용자 분포를 확인해 보자.
그리고 CUMULATIVE DISTRIBUTION을 참고해서 적절한 버전을 선택하자.
나는 77.3%의 사용자가 사용할 수 있는 Pie 28 버전을 선택하였다.
Pie 오른쪽에 있는 화살표를 클릭해서 SDK를 다운로드한다.
다운로드가 완료되면 Pie를 선택하고 Next를 클릭한다.
필수 설정이 없으니 디폴트 정보를 그대로 사용해서 Finish를 클릭한다.
안드로이드 스튜디오의 상단에서 추가한 에뮬레이터를 실행해 보자.
처음에는 목록에 추가한 에뮬레이터가 보이지 않는다.
Refresh를 클릭해서 사용할 수 있는 에뮬레이터를 재확인해보자.
그러면 아래와 같이 추가한 에뮬레이터가 목록에서 나타난다.
추가한 에뮬레이터를 선택해서 에뮬레이터를 실행시키자.
3. 에뮬레이터에 데모 앱 실행하기
이제 에뮬레이터에 데모 앱을 실행시켜 보자.
상단에 녹색 화살표는 main.dart를 실행하는 실행 아이콘이다.
main.dart에 플러터 앱의 시작이 되는 main 함수가 존재한다.
실행 아이콘을 클릭하자.
이렇게 진행하니 콘솔 창에 아래와 같이 Running Gradle task이 나타난다.
Launching lib/main.dart on Android SDK built for arm64 in debug mode...
Running Gradle task 'assembleDebug'...
그리고 오랜 시간 동안 실행에 필요한 파일을 다운로드하고 설치하게 된다. (대략 5분 정도 걸린 것 같다.)
실행된 데모 앱에서 + 플로팅 버튼을 눌러보자.
그러면 버튼을 누른 횟수가 누적되어 보이게 된다.
'Flutter' 카테고리의 다른 글
플러터] State 클래스에서 build 지역 변수 대신 클래스 속성 사용하기 (0) | 2023.07.12 |
---|---|
플러터] showDialog 사용 시, No MaterialLocalizations found 에러 해결 방법 (0) | 2023.07.08 |
플러터] 내비게이터 백 버튼 제어하기 (0) | 2023.07.08 |
플러터] Navigator.push와 MaterialApp의 관계 그리고context (0) | 2023.07.08 |
맥OS에 플러터 설치하기 (맥 실리콘 M1) (0) | 2023.01.13 |