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

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

 

인프런에서 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개의 프로젝트로 오늘 초보 탈출! - 인프런 | 강의

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

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

 

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

 

 ui 그리기

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

 

stateless와 stateful 위젯 이해하기

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

 

패키지 활용하기

• https://pub.dev/

Dart packages

 

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

 

Navigation

• navigator은 기본적으로 stack이라서 push()와 pop()을 통해 이동할 수 있고, 데이터도 전달할 수 있다.
• named router를 통해 경로로 바로 이동할 수 있다.
• https://docs.flutter.dev/cookbook/navigation/named-routes

Navigate with named routes

 

FutureBuilder와 StreamBuilder

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

 

 

 

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

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

 

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