IOS MVP 앱 프로젝트를 마치고, 해당 프로젝트를 Flutter로 이식하기 위해서
또다시 아무런 정보도 없는 상황에서 빠르게 정보를 찾아 프로젝트를 완성해가야만 하는 상황이 되었다.
프로젝트 인원은 총 세명, 나를 포함해 두명은 플러터에 대해 전혀 모르고,
한명은 조금 알긴 하지만 능숙한 수준의 경험은 없는 상태이다.
일단 모든 프로젝트가 그렇듯이 가장 먼저 필요한 정보(기본 문법 및 환경설정, 간단한 프로젝트 작업에 대해 공부할 수 있는 자료)를 유튜브와 여러 강의 사이트를 뒤져 찾아냈다.
플러터는 Dart 언어를 베이스로 사용하는데, '코드팩토리' 라는 유튜버 분께서 아주 깔끔하게 기본기를 정리해주셔서
초기 단계에서는 이 분의 강의를 따라가기로 했다.
https://www.youtube.com/watch?v=3Ck42C2ZCb8
코드팩토리님의 강의를 통해서 Dart 공부를 하고 플러터에서 기본적으로 제공하는 숫자 카운팅 앱을 만들고, 내부 구조를 확인해보니
내 판단으로는 지금까지 작업했던 Swift나 Java와 크게 다른 구조를 가졌다고 생각되지 않았다.
어려운 심화학습을 하기 이전에 필요한 정보의 우선순위는 앱을 만들기 위해 기본적으로 필요한 재료들로 옮겨갔다.
레고를 조립하려면 먼저 레고의 부속품에 어떤 종류들이 있는지를 알아야 하기 때문이다.
플러터 앱에 관련된 포스팅들을 둘러보면서 사람들이 이야기하는 맥락을 대충 보다보니
플러터라는 레고에 들어가는 재료로는 '레이아웃'과 '위젯'이 있었다.
단어 선택들도 그렇고 코드를 작성하는 방식도 그렇고 스위프트보다는 안드로이드와 비슷한 느낌이 들었다.
(import에서 material 패키지를 자주 쓰는 부분도 그랬고)
누군가 종류별로 잘 정리해주시지 않았을까 열심히 찾아보니 역시, 있었다.
https://dev-yakuza.posstree.com/ko/flutter/layout/#stack
[Flutter] 레이아웃
Flutter를 이용하여 앱을 개발해 봅시다. 이번 블로그 포스트에서는 Flutter에서 화면의 레이아웃을 담당하는 위젯들에 대해서 알아보도록 하겠습니다.
dev-yakuza.posstree.com
플러터 레이아웃 관련해서 정리해주신 데쿠님의 블로그이다.
레이아웃 종류를 먼저 목차를 통해 확인하고, 필요한 레이아웃 정보로 빠르게 이동할 수 있다.
목차만 살짝 꺼내서 정리해보자면 아래와 같다.
플러터에서 사용하는 레이아웃의 종류
- SafeArea
- Center
- Padding
- Container
- Column & Row
- Expanded
- Stack
- SizedBox
그리고 레이아웃 안에 채울 좀더 디테일한 위젯 종류도 필요한데, 자그마한 조각들에 대해 알아보기 전에
데쿠님께서 정리해주신 큰 틀에서의 위젯에 대해 먼저 이해하니 도움이 많이 되었다.
https://dev-yakuza.posstree.com/ko/flutter/widget/
[Flutter] 위젯
Flutter를 이용하여 앱을 개발해 봅시다. 이번 블로그 포스트에서는 Flutter에서 사용되는 위젯에 관해서 알아봅시다.
dev-yakuza.posstree.com
플러터의 위젯은 크게 두 가지로 나뉘는데, 그 기준이 되는 것이 바로 'State'의 사용 여부이다.
- Stateful Widget
- Stateless Widget
'State' 의 값을 통해서 화면의 움직임을 결정하는데, 움직임이 필요치 않은 정적인 화면의 경우에는 Statelss,
움직임이 필요해서 State 값을 사용하게 되는 경우에는 Stateful Widget을 사용한다.
이렇게 'State' 가 플러터 앱에서 중요한 역할을 하는 이유는, 다름이 아니라 State 값 변경을 기점으로 화면을 다시 그리기 때문이다.
어떤 변수가 변경되었다고 해서 모든 화면을 즉시 다 변경시킨다면 불필요한 자원의 낭비가 될 수 있는데
플러터 앱에서는 그런 불필요한 낭비를 막고 꼭 필요한 순간에만 화면을 다시 그리게 하는 신호로 'State'를 사용하기로 한 것이다.
(그래서 'State'가 필요 없는, 즉 다시 그릴 필요가 없는 Widget은 애초에 Stateless로 명시하여 State를 사용하지 않기로 한다)
어쨌든 이 때문에 화면 움직임의 기준이 되는 'State'의 관리는 프로젝트가 커지면 커질수록 관리가 어렵고 중요해지는데
이 관리를 위해서 우리 팀에서는 미리 'Provider'를 이용하기로 정해두었었다.
이와 관련해서 또 잘 정리해주신 블로그를 찾아서 기록해둔다.
Provider 를 이용한 상태 관리에 대해 잘 설명해주신 토르비욘님의 블로그 포스팅이다.
https://torbjorn.tistory.com/736
[Flutter] Provider를 이용한 상태관리 예제 (counter)
왜 상태관리 라이브러리를 써야 하는가 abstract class State with Diagnosticable { // ... @protected void setState(VoidCallback fn) { // ... _element!.markNeedsBuild(); } } // State 플러터 위젯 상태(st..
torbjorn.tistory.com
이정도면 앱을 만들 기본 재료들에 대한 준비가 어느정도 된 것 같다.
좀 더 디테일한 위젯 작성을 위한 참고 자료로 플러터 공식 페이지도 첨부해둔다.
https://gallery.flutter.dev/#/
Flutter Gallery
gallery.flutter.dev