회고

[2022]0822-0828 WIL #Flutter 기본 정리

paran21 2022. 8. 30. 00:48

이번 주에는 대부분 플러터와 다트를 공부하는데 시간을 보냈다.

 

인프런에서 flutter 3.x 버전이 호환되는 새로운 강의를 듣기 시작했다.

https://www.inflearn.com/course/%ED%94%8C%EB%9F%AC%ED%84%B0-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/dashboard

 

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출! - 인프런 | 강의

iOS 앱과 Android 앱을 코드 한번만 작성해서 모두 제작한다! 코드팩토리의 Flutter 초보 탈출 강의! 디테일한 이론과 흥미로운 프로젝트를 진행하며 탄탄한 기본기 쌓기!, - 강의 소개 | 인프런...

www.inflearn.com

강의 분량은 꽤 많지만 예제가 다양하고, 이론적인 부분들도 같이 설명이 되서 좋다.

(그리고 마침 중급 강의가 이번에 나왔다!)

 

이번 주에 절반 정도 들은 것 같은데, 새로 배운 내용은 다음과 같다.

 

 ui 그리기

  • Column, Row, Text, Padding, SizedBox, Container 등 기본적인 위젯들을 여러 번 반복해서 써보았다.
  • 이제 ui를 보면 어떻게 그려야 할지 맥락이 잡히는 것 같고, 구글링을 하면서 어느 정도는 그릴 수 있을 것 같다.
  • Hot reload로 빠르게 화면을 볼 수 있어서 좋다.

 

stateless와 stateful 위젯 이해하기

  • stateless 위젯은 한 life cyle에서 한 번만 생성construct - 빌드build된다.
  • stateful 위젯은 setState를 실행하면 다시 state를 빌드한다.
  • 파라미터가 바뀌었을 때는 다시 생성이 되나 state를 새로 만들지 않고(createState는 실행되지 않는다) didUpdateWidget()을 통해 기존의 state를 다시 빌드한다.

 

패키지 활용하기

 

Dart packages

Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, and general Dart programs.

pub.dev

 

  • 여기에서 패키지를 찾을 수 있고, 사용 방법과 예시도 볼 수 있다.
  • pubspec.yaml dependencies에 추가하면 되고, 필요한 경우 안드로이드나 iso 세팅을 변경해야 하는데 이것도 다 Docs를 참고하면 된다.

 

Navigation

 

Navigate with named routes

How to implement named routes for navigating between screens.

docs.flutter.dev

 

FutureBuilder와 StreamBuilder

  • Future나 Stream을 사용할 때 사용할 수 있다.
  • future나 stream에 해당 함수를 넣어주면, 그 결과값을 snapshot의 여러 속성들(connectionState, data, error 등)을 통해 상황에 맞는 ui를 그릴 수 있다.

 

 

 

주로 강의를 보고 따라 만드는게 많다보니 빨리 무언가를 만들고 싶다.

강의 끝나면 간단한 클론코딩으로 연습을 해봐도 좋을 것 같다.

 

강의와 플러터에 조금 익숙해지면서, 최근에는 강의자료를 무작정 따라하기 보다는 내가 먼저 ui를 그려보고(혹은 어떻게 그릴지 생각해보고), 강의 보는 중간중간에도 스스로 시도해볼 수 있는 부분들을 먼저 해보는 게 도움이 되는 것 같다.