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

in #dclick6 years ago (edited)

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가 설치된 경로가 입력됩니다.

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


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

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

$ flutter doctor 

스크린샷 20181007 15.09.20.png

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

$ 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 를 추가하였습니다.

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 에 의해 작성 되었습니다.

Sort:  

저도 플러터 글 쓰기 시작요 ㅋㅋ

감사합니다. 열심히 보고 배울께요~^^

@bbooaae 님 소개로 왔어요!! 자주뵈요!

반갑습니다. 저도 팔로우 했어요.
자주뵈요~^^

Posted using Partiko Android

간단하고 빠르게 앱 만들기에 참 좋겠어요, 감사히 참고하겠습니다 ㅎㅎ

간단한 앱을 금방 만드는데 좋아요.
한번 사용해보세요.

Posted using Partiko Android

우오!!!
형아!!! 나 식당 앱 만들고 싶은데.... 이걸로 만들 수 있는거야??
아.... 진짜 해야되는데.... 개발... 공부...ㅜㅜ

당연히 이걸로 식당앱 만들 수 있습니다.ㅋ
코딩 공부는 계획을 세워서 단계별로 천천히 하는걸 추천합니다.
그리고 저는 맨처음 기초부터 공부하기 보다는 실전 튜토리얼을 보면서 샘플 앱을 만들어보는 것부터 공부하는 것을 좋아합니다.ㅎㅎ

따라해 보고 싶네요 ㅋㅋ
이런걸 배웠어야 했는데...ㅎ

지금도 늦지 않았습니다. 지금 시작해보세요~ㅎㅎ

킵 해두고 체크리스트에 남겨두고 ㅋ 해봐야겠습니다.
예전에 안드로이드도 해본다고,, 환경설정하고 ㅋ 조금 하다가 회사일이 바빠져서 못 한 기억이 나네요 ㅠㅠ 하루 24시간은 너무 짧아요 ㅠ

Flutter가 안드로이드 보다 배우기 쉽습니다.ㅎㅎ
사실 저도 안드로이드 조금 공부 하다가 회사일이 바빠져서 못한지 꽤 되었네요.
그리고 @bbooaae님 처럼 하루를 48시간 처럼 사용하세요~ㅋ

앱인벤터 후속으로 배워야 할까 보네요.

여러 언어를 배워두면 좋아요.ㅎㅎ
두뇌에 뉴런 시냅스를 활성화 시켜야죠~ㅎㅎ

개발자와 일반인간의 엄청난 벽을 통감합니다 ㅋㅋㅋ

새로운 경험을 해보시기 바랍니다~^^

와우 멋지네요^^ 똥손인 저도 앱 만들어보고 싶습니다 ㅠㅠ 한번 찬찬히 봐봐야겠습니당

사실 저도 똥손입니다. 모든 개발이 튜토리얼는 따라하기가 쉽습니다. ㅎㅎ
저는 다른 재미있는 예제 소스가 있는지 찾아봐야겠습니다.ㅎㅎ

앱 성공 축하드립니다 ^^
안선생님~

뽀돌님 감사합니다. ^^

Hi @anpigon!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 2.225 which ranks you at #20191 across all Steem accounts.
Your rank has improved 457 places in the last three days (old rank 20648).

In our last Algorithmic Curation Round, consisting of 304 contributions, your post is ranked at #84.

Evaluation of your UA score:
  • Only a few people are following you, try to convince more people with good work.
  • The readers like your work!
  • Good user engagement!

Feel free to join our @steem-ua Discord server

Coin Marketplace

STEEM 0.26
TRX 0.11
JST 0.032
BTC 63510.75
ETH 3065.54
USDT 1.00
SBD 3.82