[플러터] flutter 앱 개발 시작 하기! 크로스 개발(With Android)

안녕하세요. (づ￣ ³￣)づ

우리는 항상 앱을 개발하면서 왜 도대체 안드로이드와 iOS 두가지 플랫폼 때문에 두번의 코딩을 해야 하는지 의문스러우면서 빡치는 생각을 하셨을 겁니다. 그러나 최근들어 이런 고생스러움에 앱 개발 트랜드가 급변하고 있는 추세입니다.

한번에 코딩으로 여러 플랫폼을 아우를수 있게 된거죠. 그렇지만 이것 또한 새로운 프레임워크이므로 적응하고 학습해야 한다는 사실... 부담스럽지 않게 천천히 제 포스팅과 같이 한걸음씩 나아가요! (ง •̀ω•́)ง✧

 

1. Flutter 소개

Flutter는 단일 코딩으로 iOS, Android, 웹 및 데스크탑 뷰의 고성능 앱을 빌드하기 위한 개발 SDK입니다.

한번 코딩으로 다양한 플랫폼에서 자연스러운 느낌을 주는 고성능 앱을 제공 할 수 있도록 하는 것이 Flutter 의 장점입니다.

크로스 개발

 

시작하는 데 모바일 개발 경험이 필요하지 않을 정도로 진입 장벽이 낮다.. 라고 하지만 어느정도 개발 지식은 필요로 합니다. ㅠㅠ 하지만! 처음부터 겁내지 마세요 여러분~!! 저와 같이 차근차근 배워가면 되니까요. (ง •̀_•́)ง

개발 시 언어는 Dart 로 작성되고 Java 또는 JavaScript 와 같은 언어를 사용한 경우 좀 더 익숙하게 다가갈수 있습니다. 객체 지향 언어에 대한 경험자가 개발 시 좀 더 유리합니다.

 

다음으로 플러터에 장점을 짚고 넘어가죠~

• 생산성 향상
  • 단일 코드에서 iOS 및 Android 용으로 개발!
  • 단일 OS에서도 최신 표현 언어와 더 적은 코드로 수준 높은 작업 수행
  • 앱이 실행될 때 코드를 변경하고 다시 로드하여 실험 (핫 리로드 지원)
  • 앱이 중단 된 위치에서 충돌을 수정하고 계속 디버깅
• 위젯
  • Flutter의 자체 프레임 워크를 사용하여 구축 된 풍부한 고유의 위젯 세트를 활용
  • 다양한 위젯 세트로 요즘 트렌드의 중심 디자인을 실현

 

 

2. 개발 환경 설치 및 구성

2.1 먼저 플러터 SDK 부터 다운로드 합니다.

https://flutter.dev/docs/get-started/install

Install

URL 에 접속 하시게 되면 아래와 같은 화면을 맞닥들이게 될겁니다~ ㅎ

각 운영체제에 맞게 다운받으시면 되요!

(저는 윈도우 기준으로 포스팅 할거라... (타 운영체제는 나중에..) 박스 부분을 클릭하여 Windows 용으로 받습니다.)

2.2 다운받은 후에 아래와 같이 C 드라이브에 압축을 풀어주세요~ ( C:\flutter)

플러터 다운 후 압축 해제

 

2.3 압축을 잘 풀었다면 어느 경로에서나 플러터 명령을 사용 할 수 있도록 환경 변수를 등록 해야 합니다. 플러터 명령 파일들은 bin 폴더에 들어 있으므로 (C:\flutter\bin) 패스를 등록 하도록 하겠습니다.

환경 변수 등록 과정

 

환경 변수 등록이 된 후에 CMD 창에서 flutter --version 커맨드를 입력 해 주시고 버전 정보가 아래와 같이 잘 나오는지 확인 해주세요.

CMD창 flutter --version

 

자! 이제 플러터 설치는 된겁니다.

 

2.4 다음으로는 플러터 개발에 사용할 도구로 설치 하도록 하겠습니다.

현재 지원하는 IDE는 안드로이드 스튜디오 와 비주얼 스튜디오 코드가 있는 것으로 압니다만 저는 안드로이드 스튜디오 를 설치 하겠습니다.

아래 URL 접속 후 그림에 보이는 DOWNLOAD ANDROID STUDIO 클릭 후 다운로드 합니다.

https://developer.android.com/studio

Download Android Studio and SDK tools  |  Android 스튜디오

안드로이드 스튜디오 다운로드

 

2.5 다운로드 가 완료 된 후에 안드로이드 스튜디오를 실행 해서 아래와 같은 화면까지 나오게 해줍니다! 그리고 화면에서 1번 박스에 Configure 클릭 후 리스트 중에 Plugins 를 클릭 해 주세요~

안드로이드 스튜디오 첫화면

 

Plugins 창이 열리면 1번 Marketplace 선택 --> 2번 flutter 키워드 입력해서 플러터 플러그인을 찾고, --> 3번 플러터 플러그인을 찾았으면 그대로 인스톨을 선택하여 설치 진행합니다.

플러그인 설치 과정

 

드디어~! 플러터 부터 안드로이드 스튜디오 설치 그리고 플러터 플러그인 까지 설치 를 완료했습니다.

다음 포스팅에서는 개발에 관련해서 포스팅하도록 할께요~! 

완료 후 프로젝트 생성 가능 모습