0%

[Flutter] 모바일 앱 개발 : Flutter 시작하기 - Get started

Flutter는 구글에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크입니다. Flutter가 아직은 베타 버전이지만 곧 React Native를 따라잡을 것으로 생각합니다. 그럼 페이스북과 구글의 치열한 경쟁이 시작되겠지요.ㅋ

Flutter Release Preview 2 가 공개되었을 때 너무 배워보고 싶었습니다. 오늘 문서를 쭈욱 훑어보니 React Native, NativeScript와 정말 흡사한 프레임워크라고 생각되네요. 이러한 개발 프레임워크를 이용하면 저 같은 초보 개발자도 모바일 앱을 쉽게 구현할 수 있습니다. 개발자가 아닌 분들은 이해 못 하시겠지만, 전 아직도 완벽하게 다룰 수 있는 개발언어가 없는 초보 개발자입니다. 초보 개발자라서 이것 저것 배우고 해볼 수 있는 시기이기도 합니다. 시간이 흘러 시니어 개발자가 되면 머리가 굳어져 새로운 기술을 배우기가 더욱 힘들어지겠지요. ㅠ




이 포스트는 Flutter 튜토리얼 문서에 있는 1 ~ 3번까지의 과정을 따라하면서 정리한 글입니다.



Flutter와 Android Studio 설치

개발툴은 Android Studio, IntelliJ, VS Code를 지원한다고 되어있습니다. 저는 Android Studio가 제공하는 기능들이 더 좋아보여서 Android Studio를 사용하였습니다. 먼저 Flutter SDK와 Android Studio를 설치합니다. 설치 방법은 각 사이트의 설치 가이드 문서를 참고합니다.

Flutter

Android Studio




Flutter SDK 설정하기

저는 맥OS를 사용하고 있어서 맥OS로 설명합니다. 윈도우 사용자는 Get Started: Install on Windows 문서를 참고 바랍니다.

flutter 설치 경로를 PATH에 추가하기 위해 ~/.bash_profile 파일을 수정합니다. .bash_profile파일을 열고 다음 라인을 추가합니다. PATH에는 flutter가 설치된 경로가 입력됩니다.

1
export PATH="$HOME/flutter/bin:$PATH"


마지막으로 source ~/.bash_profile을 실행하여 bash_profile를 현재 콘솔창에 적용합니다. 그리고 echo $PATH 를 실행하여 flutter 설치 경로가 적용되었는지 확인합니다.

다음 명령을 실행하여 추가로 더 설치해야 하는 것이 있는지 확인합니다.

1
$ flutter doctor

스크린샷 20181007 15.09.20.png

flutter doctor로 진단해보니 Android toolchain 항목에서 “Android license status unknown.” 메세지가 출력되어 아래와 같이 처리하였습니다.

1
2
$ flutter doctor --android-licenses
$ /usr/local/Cellar/android-sdk/24.4.1_1/tools/bin/sdkmanager --update


그러고 나서 몇 번 더 flutter doctor로 진단하여 대부분의 문제를 해결하였습니다.




Android Studio 설정

개발에 필요한 Flutter 플러그인와 Dart 플러그인을 설치합니다. Android Studio에서 Preferences > Plugins 메뉴에 들어갑니다. **Browse Repositories…**를 선택하고 Flutter 플러그인에 Install 를 클릭하여 설치합니다. 그리고 Dart 플러그인을 설치하라는 메시지가 표시되면 Yes 를 클릭합니다. 마지막으로 설치가 완료되면 Android Studio를 재시작합니다.




앱 생성하기

File > New Flutter Project 메뉴를 들어갑니다. 그리고 프로젝트 유형에서 Flutter application를 선택합니다. 그리고 Project NamePackage Name을 입력하고 생성 완료합니다.

스크린샷 20181007 15.22.06.png




앱 실행해보기

앱 생성이 완료되면 샘플 코드가 담겨있는 프로젝트가 생성됩니다.

Imgur

Tools> Android > AVD Manager 메뉴에서 에뮬레이터를 생성합니다. 그리고 Run > Run으로 앱을 빌드 및 실행합니다.

추가: ANDROID_ROOT_HOME를 찾지 못한다는 오류가 발생하여 아래 PATH 를 추가하였습니다.

1
2
3
4
> export ANDROID_HOME="$HOME/Library/Android/sdk"
> export ANDROID_SDK_ROOT="$HOME/Library/Android/sdk"
> export ANDROID_AVD_HOME="$HOME/.android/avd"
>




앱 완성!

짠~! 안피곤님의 첫번째 안드로이드앱이 완성되었습니다. 오른쪽 하단의 + 버튼을 클릭하면 화면의 숫자가 증가합니다. 10 까지 증가시켜보았습니다.

완성


단순한 모바일 앱을 구현하기에는 JavaKotlin보다 Flutter가 훨씬 배우고 쉽고 간편합니다.

여기까지 읽어주셔서 감사합니다.


Sponsored ( Powered by dclick )
DCLICK: An Incentivized Ad platform by Proof of Click - 스팀 기반 애드센스를 소개합니다.

안녕하세요 스티미언 여러분. 오늘 여러분께 스팀 블록체인 기반 광고 플랫폼 DCLICK을 소개…

logo

이 글은 스팀 기반 광고 플랫폼
dclick 에 의해 작성 되었습니다.


Originally posted on http://steemit.com