Flutter - Google 에서 만든 크로스 플랫폼 개발 Framework
React와 제일 많이 비교가 되며 현재는 Flutter가 점유율이 훨씬 높아지고 있는 추세다
(2022 Stackoverflow 설문조사 결과)
Why Flutter?
Flutter는 동일한 코드로 멀티 플랫폼 어플리케이션 제작이 가능합니다. Dart언어 기반인데, 해당 언어도 Goolge팀에서 만든것으로 언어와 프레임워크가 같은 Google 팀에서 일을 하기에 기술의 변화에 대응이 빠르고, Flutter를 좀 더 쾌적하게 사용하기 위해 Dart팀에서 업데이트를 해주는 등 관리가 철저합니다.
1. Flutter 설치하기 (Dart언어 설치 필수)
페이지 접속시 Flutter를 실행할 플랫폼에 따른 설치 방법들이 자세하게 나와있습니다.
Mac을 기준으로 설명드리면 CPU에 맞게 파일을 다운 받은 다음에 터미널을 키시고, 파일을 설치한 경로로 이동하신 다음. 해당 파일을 unzip 명령어를 통해 압축해제를 해줍니다. 그리고 3번에 해당되는 코드를 실행하시면 설치가 끝납니다!
2. Flutter 프로젝트 생성하기.
$ flutter create [프로젝트명]현재 디렉토리를 기준으로 Flutter 프로젝트를 생성합니다. 프로젝트명을 설정하실때는 스네이크 표기법 ( 소문자, _ ) 사용을 하셔야 합니다. (언어에서는 카멜표기법을 쓰던데 왜그러지.....)
3. VSC툴을 사용하여 프로젝트 열기
생성한 프로젝트를 찾아서 열어줍시다 !
프로젝트의 내부를 살펴보면 무수히 많은 파일들을 볼 수 있는데....겁먹지 마십쇼 ! 저희가 건들일건 오로지 lib 폴더입니다!
ios, android, macos, web 과 같은 폴더들은 나중에 각각의 플랫폼으로 배포를 할때 건들이게 되는 파일들입니다.
lib -> main.dart 파일을 열어보면 기본 코드가 있는걸 볼 수 있습니다. 일단 코드에 관한건 나중에 살펴보고 지금은 실행을 일단 해보겠습니다 :)
VSC 오른쪽 하단에 macOS (drawin)이라고 써져있는 부분을 확일 할 수 있습니다. (각각의 운영체제에 따라 다르게 보일 수 있습니다)
클릭하시면 여러 플랫폼을 지원하는걸 확인할 수 있습니다. 일단 지금은 시뮬레이터가 따로 없기에 Chrome 웹으로 구동시켜보겠습니다.
Chrome을 선택하신 다음에 우측 상단에 실행버튼을 눌러줍니다.
위 사진과 같이 정상적으로 Flutter 프로젝트를 구동 시킬 수 있습니다 !!
4. Flutter 코드 간략하게 살펴보기
Flutter의 모든것은 Widget으로 이루어져있다. (Flutter 공식 소개)
Widget은 화면에 나타나는 요소들을 의미합니다.
Flutter에서는 크게 2가지의 Widget이 존재합니다.
StatefulWidget, StatelessWidget
StatelessWidget
- 말 그대로 Stateless한 Widget. 그렇다고 상태가 변하지 않는것은 아닙니다. (외부의 요청에 따라 변한다)
- State가 없기에 상태관리가 필요하지 않습니다. (StatefulWidget을 보면 이해가 갈겁니당 하핳)
- 쉽게 풀이해보자면 정적인 웹페이지와 비슷한 개념입니다.
build ()
필수로 사용해야하는 메소드이며, Widget을 return 하는 메소드입니다.
모든 Widget Class에서 필수로 사용해야하는 메소드이며, build가 return 하는 위젯들을 통해 뷰가 그려집니다.
StatefulWidget
- State 객체를 가지고 있습니다
- State 객체의 setState 메소드를 통해 위젯의 변화에 대해 알려줍니다. setState가 호출이 되면 Flutter가 다시 변화된 정보들을 가지고 뷰를 그립니다.
setState ()
Flutter에게 State값이 변경되었을때 알려주기에 사용합니다.
호출 시 build메소드를 다시 호출하여 위젯을 다시 그리게 됩니다. 비동기 코드를 실행할 수 없기에 setState() 실행 전 모든 비동기 코드를 완료해줘야 합니다.
(여기서 Future<>, await 같은 개념이 등장하는데 지금 다루기엔 여러분들의 뇌에 메모리 부족 현상이 일어나실 수 있습니다...)
좀 더 Flutter 코드에 대해 궁금하시거나 더 알고 싶으신 분들은 제가 연습했던 코드 샘플을 남겨둘테니 공부하시는데에 도움이 되시면 좋겠습니다 ! 오늘도 모두 슬기로운 코딩 생활 하시며, 궁금하신점이나 부족한점은 댓글로 달아주시면 감사하겠습니다 :)
'Flutter' 카테고리의 다른 글
| [Flutter] Dart의 기본 문법과 특징들 Feat. 객체지향개념 (0) | 2023.02.21 |
|---|
