모닝 스터디

Google Antigravity 에 대하여 간단하게 알아봤다

Antigravity는 혁명이다.

애니메이션 (심화 1-1)

암시적 애니메이션

(가장 많이 쓰는 부분만 표시)

• 개발자가 직접 바꾸지 않아도, 위젯 특성 속성이 변경되면 자동으로 적용

공통 속성

curve

• 0 ~ 1 속도 변화를제어
• 애니메션 효과를 정의

duration

• 초, 밀리초, 나노초로 애니메이션 효과를 정의

AnimatedAlign

• alignment 속성이 변경되면 애니메이션 진행되는 위젯

AnimatedContainer

• alignment decoration width height padding 등의 속성이 변경되면 애니메이션 진행되는 위젯

AnimatedOpacity

• opacity 속성(투명도)이 변경되면 애니메이션이 진행되는 위젯

AnimatedPositioned

• left top right bottom 속성이 변경되면 애니메이션이 진행되는 위젯
  Stack 내에서 사용(Positioned 위젯의 애니메이션 버전)

Hero

• 특정 화면에서 다른 화면으로 이동할 때, 두 화면에 공통적으로 나타나는 요소(예: 이미지, 텍스트 등)를 부드럽게 연결하는 애니메이션 효과를 제공
  예) 상품 리스트 페이지 클릭하면 사진이 커지면서 새로운 페이지로 넘어가는 효과
  Hero 위젯 내 tag 속성을 사용하여 두 화면의 연결 고리를 만듬. 이 태그 값이 같아야 화면 전환 시 애니메이션이 작동

---

명시적 애니메이션 (심화 1-1 30분)

• 개발자가 직접 구현하는 방식

스로틀링과 디바운싱 (심화 1-2)

사용하는 이유

• 성능 최적화
• 불필요한 요청을 줄여 트래픽을 감소시킴

스로틀링

• 텍스트 필드 검색시 단기간에 여러번 요청해도 한번만 요청

디바운싱

• 이벤트가 여러 번 발생할 때 마지막 이벤트만 처리하도록 하는방법

---

무한스크롤 (심화 1-3)

무한스크롤 (Infinite Scroll)

• 리스트뷰 끝부분에 다다르면 데이터 추가요청 하는 기능

무한스크롤 구현 하는 방법

• NotificationListener 위젯 사용
• NotificationListener : 하위 위젯에서 특정한 알림(스크롤 이동 등)이 발생 했을 때 onNotification 속성에 정의한 함수 실행
• onNotification 속성에 들어가는 함수에는 notification 이 파라미터로 들어감
• 스크롤 시작할 땐 ScrollStartNotification 객체, 스크롤 이동할 땐 ScrollUpdateNotification 객체, 스크롤 끝났을 땐 ScrollEndNotification 객체가 전달됨
• ScrollUpdateNotification 객체엔 ScrollMetrics 타입의 metrics 속성이 있음
  • metrics.pixels: 현재 스크롤 위치.
  • metrics.maxScrollExtent: 스크롤 가능한 최대 범위.
  • metrics.minScrollExtent: 스크롤 가능한 최소 범위.
  • metrics.extentAfter: 현재 위치 이후 남은 스크롤 거리.
  • metrics.extentBefore: 현재 위치 이전의 스크롤 거리.
• 현재 스크롤 위치(metrics.pixels)가 스크롤 가능한 최대 범위(metrics.maxScrollExtent)보다 클 때 데이터 추가 요청
• onNotification 리턴타입 bool ⇒ 이벤트 버블링 취소할지 여부
  • 버블링 : 하위 노드에서 발생한 이벤트가 상위 노드로 전파되는 것 의미 ⇒ false 로 리턴

당겨서 새로고침 (Pull-to-Refresh)

리스트뷰를 드래그한 채로 아래로 내리면 새로 서버에서 데이터를 받아와 최신화 하는 기능

당겨서 새로고침 구현 하는 방법

• RefreshIndicator 위젯 사용
• RefreshIndicator : 당겨서 새로고침(Pull-to-Refresh) 동작을 쉽게 구현할 수 있는 머티리얼 디자인 위젯
• onRefresh 속성에 Future<void> Function() 선언하여 구현

테마 커스터마이징 (심화 1-4)

• 디자이너와 협업 시 다양한 색상을 정의할 때가 많음. ex)main, mainLight, sub 등등
• ThemeData의 기본 속성만으로는 이 모든 색상을 정의하기에는 제한이됨
• ⇒ ThemeData 의 extensions 속성 사용 (ThemeExtension 클래스 리스트)

테마 커스터마이징 구현방법

• ThemeExtension 상속
• AppThemeExtension 상속받은 LightTheme, DarkTheme 클래스에서 각각 색상 정의
• ThemeData 객체를 담을 lightTheme, darkTheme 변수 선언 및 객체 할당
• ThemeData extensions 속성에 만든 LightTheme, DarkTheme 객체 할당
• AppThemeExtension 에 편하게 접근할 수 있도록 BuildContext에 extension만들기

GoRouter (심화 1-5)

GoRouter 패키지

패키지 추가 : flutter pub add go_router

• URL 기반 라우팅 패키지
• 모바일 뿐 아니라 웹에서도 사용 용이
• URL 기반 네비게이션 패키지

template syntax 지원

• /user 경로에 id 파라미터로 넘기고 싶을 때 user/:id
• template syntax 지원
  • /post 경로에 id 파라미터로 넘기고 싶을 때
    • 경로 설정 /post/:id
    • 접속할 때 /page/1
• URL에 query parameter 지원
  • /search 경로에 text 라는 query 파라미터 넘기고 싶을때 ⇒ /search?text=test
• 웹에서 페이지 새로고침 했어도 파라미터 유지하고 싶을때 사용

리다이렉션 지원

• 특정 조건에서 다른 경로로 쉽게 변경 가능
  • 로그인이 안되어 있을 때 /post 경로로 이동 시 로그인 페이지로 리다이렉트 가능

Navigator vs GoRouter

Navigator

• 명령형 라우팅
• Navigator.push Navigator.pop 으로 라우트 스택 직접 관fl

GoRouter

• 선언형 라우팅
• URL 경로로 라우트 스택 관리