안녕하세요. 엔지엠소프트웨어입니다. 이전 시간에 플러터(Flutter) 개발 환경을 만들었는데요. 오늘은 플러터 프로젝트를 만들어 볼께요. 아직 개발 환경을 만들지 않은 분들은 아래 링크의 글을 참고하셔서 윈도우에 플러터 개발 환경을 만들어 보세요.

[ 아이폰, 안드로이드폰 매크로 만들기 - 플러터 개발 환경 구축 ]

 

 

안드로이드 스튜디오를 실행하세요. 현재는 New Project만 보입니다. New Flutter Project가 표시되어야 하는데요. 안드로이드 스튜디오(Android Studio)에 플러터 패키지를 설치하면 New Flutter Project가 표시됩니다.

 

 

좌측의 Plugins를 클릭하고, 마켓플레이스(Marketplace)에서 플러터를 검색합니다. 아래 그림처럼 검색된 플러터를 설치(Install) 하세요.

 

 

안드로이드 스튜디오가 재실행되고, New Flutter Project로 변경된것을 확인할 수 있습니다.

 

 

좌측의 Flutter 메뉴를 클릭하고, Flutter SDK path에 설치 경로를 선택하세요. 그리고, Next버튼을 클릭하세요.

 

 

아래 그림과 같이 Project name에 ngm을 입력하고, Organization에는 com.ngm을 입력하세요.

• Project name: 프로젝트 이름
• Project location: 프로젝트 저장 위치
• Description: 프로젝트 설명
• Project type: 패키지, 모듈, 프로그램등등... (Application)
• Organization: 다른 언어에서 사용되는 Namespace를 말함
• Android language: Kotlin
• iOS language: Swift
• Platforms: 어떤 기기 또는 운영체제에서 실행될지 선택 (Android, iOS)

 

 

"Create" 버튼을 누르면 안드로이드와 iOS 어플리케이션 프로젝트가 만들어집니다.

 

 

프로젝트를 생성하면 기본적으로 main.dart 파일이 열립니다. 다른 언어들과 동일하게 void main이 기본 진입점이 됩니다. 프로젝트를 실행하려면 ①디바이스를 먼저 선택하고, ②실행 또는 디버깅 버튼을 클릭하면 됩니다. 그러면 크롬 브라우저에서 기본적인 실행 화면이 표시됩니다.

 

 

안드로이드 또는 iOS 디바이스를 추가하려면 상단 메뉴의 Tools에서 Device Manager를 클릭하세요.

 

 

실제 안드로이드폰이나 아이폰을 연결할건 아니라서 ①Virtual탭에서 ②Create Device를 클릭하세요.

 

 

카테고리는 Phone이고, Pixel XL을 선택한 후 우측 하단의 Next 버튼을 클릭하세요.

 

 

S API 31을 선택하고, 다운로드 버튼을 클릭하세요. 시스템 이미지가 다운로드 됩니다.

 

 

SDK Component Installer가 이미지를 다운로드하고 설치할때까지 잠시 기다려주세요.

 

 

이 작업이 완료되면 다운로드 표시가 사라집니다. Next 버튼을 클릭하세요. 몇가지 설정할 수 있는 정보들이 있지만, 무시하고 Finish를 눌러서 작업을 완료합니다.

 

 

에뮬레이터를 실행하세요.

 

 

에뮬레이터가 초기화될 때까지 잠시 기다리면 아래와 같이 실행됩니다.

 

 

Pixel XL API 31 에뮬레이터를 선택하고, 실행하세요.

 

 

안드로이드 스튜디오 하단의 콘솔창을 보면 실행 단계가 메세지로 표시됩니다. 그래들 작업이 시작되는데 오래걸립니다.

 

 

app-debug.apk 파일이 생성되었다는 메세지가 표시되고, 잠시 후 설치되었다는 메세지도 표시됩니다.

 

 

오른쪽 아래 + 버튼을 클릭하면 중앙의 카운트가 증가합니다. 디바이스를 크롬으로 선택하고 실행했던것과 동일합니다.

 

 

아래 그림과 같이 99라인의 코드를 변경하세요.

• 변경전: You have pushed the button this many times
• 변경후: 버튼을 몇번 눌렀는지 보여줍니다

 

 

에뮬레이터에 변경 사항이 바로 적용된 것을 확인할 수 있습니다.

 

 

만약, 변경 사항이 적용되지 않으면 툴바에서 번개 아이콘을 클릭하면 됩니다.

 

 

이렇게해서 플러터 프로젝트를 생성하고, 간단하게 에뮬레이터를 띄워서 테스트까지 해봤습니다. 처음에 플러터를 설치하고 환경을 잡는데 약간(?) 고생하긴 했지만, 이후부터는 플러터 공식 사이트의 내용과 크게 다르지 않아서 무리없이 테스트를 완료할 수 있었습니다. 관련 레퍼런스를 참고해서 간단한 앱부터 만들어보면 좋을거 같습니다. 빠르게 학습하는 가장 좋은 방법은 일단 시작하면서 부딪혀보는거죠^^ 

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0