Flutter 프로그래밍 미세먼지 날씨 앱 만들기 - 1 ( 환경설정, 프로젝트 생성)

 

 

안녕하세요 아라요 IT입니다.
최근 코로나 앱 개발 후 출시가 안 되는 문제로 너무 많은 스트레스를 받아서 자포자기하는 심정으로 며칠간 놀았습니다. 그런데 어쩔 수 없는 직업병인지 자연스럽게 다음 앱을 무엇으로 만들어 볼까 하는 구상을 하게 되더군요. 그래서 가벼운 프로젝트로 시작하되, 블로그도 만들면서 진행하면 어떨까 해서 날씨 앱을 구상하게 되었습니다.

개발 환경


  • SDK - Flutter https://flutter-ko.dev/
  • IDE - visual studio code (이하 vscode) https://code.visualstudio.com/
  • Project Manager - Trello https://trello.com/


Flutter - 가장 빠른 아름다운 네이티브 앱

Flutter(플러터)는 하나의 코드베이스로 모바일, 웹, 데스크톱에서 네이티브로 컴파일 되는 구글의 아름다운 UI 툴킷입니다. Flutter는 기존 코드와 함께 동작하고, 전세계 개발자와 조직에 쓰이고

flutter-ko.dev



Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com



Trello

Infinitely flexible. Incredibly productive for teams of all sizes. Trello manages everything, from big project details to micro tasks. Collaborate anywhere, even on mobile.

trello.com


Flutter 프로그래밍은 여러가지 장점이 있지만 크게 두 가지 정도 생각해 볼 수 있습니다.

첫 번째는 cross plateform이기 때문에 동일한 코드로 Android, IOS를 동시에 개발이 가능하며, 이는 유지보수에서 아주 큰 힘을 발휘하여 요구사항 변경이나 오류 대응에 유동적으로 대처할 수 있습니다.두번째로는 pub.dev (https://pub.dev/)에서 지원하는 방대한 plugin입니다. 구현하고자 하는 거의 모든 것들이 package로 제공되고 있으며, 오픈소스이기 때문에 필요에 따라 수정하여 사용할 수도 있습니다.

IDE는 호불호가 갈릴 것 같은데 vscode와 android studio 둘 중 어느것을 선택해도 무방합니다. 진행은 vscode로 하겠습니다.

PM은 역시 무료가 좋습니다. 그런데 Trello(https://trello.com/)가 최근 생성 프로젝트 개수 제한으로 10개 이상 프로젝트 생성 시 월 20$ 내외의 비용을 지불하여야 합니다. 그래도 10개까지는 무료이기 때문에 한번 써 보실 것을 추천드립니다.

 

프로젝트 생성



  • vscode > extenstions > flutter 검색 > 설치
  • ctrl + shift + p (show commands) > flutter new app 선택 > 폴더 지정 > project명 입력 > flutter 프로젝트 생성



  • command-line로 생성하기
  • --org는 package name을 입력하고, your_app_name은 앱의 이름입니다.

vscode로 프로젝트 생성시 swift(ios), kotlin(android)으로 생성되는데 상황에 따라 개발자가 원하는 다른 language로 생성하고 싶다면 아래와 같이 파워쉘 프롬프트에서 실행해 줍니다.

$ flutter create --org com.yourdomain -a java -i objc your_app_name

 -a java -i objc 추가 (java, objective c 로 프로젝트 생성)


프로젝트 폴더구조



  • lib : flutter 소스 코드 (개발하고자 하는 소스 구현)
  • android : android 소스 코드
  • ios : ios 소스 코드 (다른 확장 라이브러리 사용시 코드 수정이 필요할 수 있음)
  • .gitignore : git 파일 (비공개 자료는 git push를 막기 위해 ignore에 반드시 추가)
  • pubspec.yaml : 확장 라이브러리, assets, fonts, version 등 관리 

lib/main.dart

 
  • main() : 프로그램 구동 시 최초 실행
  • MaterialApp : Material Design class
  • title : 앱 이름 정의
  • theme : 앱의 전체적인 색상이나 테마나 모드( Brightness.light / Brightness.dark) 정의
  • home : 다음 routing 될 widget 정의



나머지 코드는 삭제해 줍니다.
여기서부터 개발자가 원하는 실제 구현을 진행해 나가시면 됩니다.

다음 게시물부터는 앱 구현에 초점을 맞춰 진행 하겠습니다.

Location: 대한민국

댓글

댓글 쓰기