목차
- 플러터란
- 개발환경 구축
- 플러터 프로젝트 생성해보기
1. 플러터란
어플리케이션은 네이티브 앱 / 하이브리드 앱 / 크로스 플랫폼 앱 으로 구분된다.
네이티브 앱은 기기에 맞는 언어로 개발된 앱이다. 안드로이드와 ios 를 따로 개발해야 한다.
하이브리드 앱은 웹 개발 된 대로 모바일 플랫폼에서도 작동할 수 있는 앱이다.
웹사이트와 동시에 구축하므로, 모바일 버전을 따로 만들지 않아도 되어서 전체적인 개발이 빠를 수 있지만 웹 화면을 모바일에서 띄우는 것이므로 속도가 느리다.
크로스 플랫폼 앱은 네이티브 개발 방식처럼 따로 개발하지 않아도 호환되는 개발 방식이다.
크로스 플랫폼 앱이면 한번에 해결할 수 있는데 굳이 왜 따로 개발하나 싶지만,
네이티브 앱에서는 휴대폰의 카메라 성능 등 하드웨어 측면의 기능에 접근이 가능하다면,
크로스 플랫폼 앱에서는 접근이 불안정한 편이다.
플러터는 크로스 플랫폼 앱 개발 언어로, 가벼운 목적의 어플리케이션 개발에 적합하다고 할 수 있다.
플러터는 위젯 트리 구조이다. 조그마한 위젯들(컴포넌트들)이 모이고 모여 트리를 구성하여 어플리케이션이 된다.
첫번째 부모 노드가 루트(뿌리) 노드가 되고, 마지막 자식 노드가 리프(잎) 노드가 된다.
2. 개발 환경 구축
2-1. 나의 개발 환경 : vs code
플러터를 사용하기 위해 대표적인 IDE로, 안드로이드 스튜디오와 Visual Studio Code 가 있다.
vsc 에 비해, 안드로이드 스튜디오가 지원하는 기능이 더 많고 강력하다고 하지만 공부용이라면 vsc도 충분하다고 함!
무엇보다 vsc 의 extension(확장)탭에서 flutter 확장팩을 지원하기 때문에 설치만 해주면 되어서 간편...
2-2. visual code studio 에서 flutter 확장팩 설치해주기
=> 설치 : flutter , flutter snippets install
2-3. Flutter SDK 설치 및 위치 지정
설치하면 요런 팝업이 뜬다.
Could not find a Flutter SDK. Please download, or, if already downloaded, click 'Locate SDK'.
플러터 sdk 를 찾을 수 없어요..!
Download SDK - 폴더 선택 해서 flutter sdk를 다운로드 해준다.
설치하고 나면 flutter sdk 를 환경변수에 추가하겠냐는 팝업이 뜬다.
공부목적이라 vsc 외부에서 flutter 명령어를 입력할 일이 없어 환경변수는 설정하지 않았다.
아까 떴던 팝업이 또 뜬다.
sdk 를 못찾고 있다는 말이니까, 아까 설치한 flutter sdk 폴더를 지정해 주면 된다.
예를 들어 C:/User/dev에 플러터 설치를 했다면 C:/User/dev/flutter 폴더가 만들어졌을 테니 그 폴더를 지정해주면 됨
Locate SDK 버튼을 눌러 flutter sdk 폴더 선택!
이렇게 하면 visual studio code 에서의 플러터 개발환경 구축은 끝났다.
3. 플러터 프로젝트 생성해보기
3-1. 플러터 프로젝트 생성 및 실행
- [보기] > [명령 팔레트] 열기 또는 [Ctrl + shift + p] 단축키
- Flutter : New Project 검색 (안나오면 뭔가 설치 안된 것) - application 선택 - 프로젝트명 입력해서 프로젝트 생성(예-test_project)
프로젝트를 만들면 샘플 flutter 프로젝트가 생성되고, 이렇게 확장팩 버튼이 보인다.
클릭하면 flutter 레이아웃이 나오는데 한번 실행시켜 본다.
개발환경 구축 진짜 끗
3-2. 핵심 - 프로젝트 설정 파일인 pubspec.yaml 과 앱을 실행하는 main.dart 파일
프로젝트 생성하면 main.dart 가 먼저 열림. 뭔가 주석이 길게 적혀있지만 싸그리 지워준다.
1. void main() 은 약속으로, java 의 main 함수처럼 시작 시 작동하는 함수
runApp(작동대상클래스()); 로 작동시킬 클래스 명시
2. StatelessWidget = 상태 변화가 필요없는 위젯.
StatelessWidget을 사용할 때 무조건 구현해야 되는 것 = build 함수. build 함수 내에서 필요한 부분을 구현한다.
context = 사용자가 접하고 있는 화면객체