Design & Animations
Design
개념 : Flutter App의 전반적인 구조 및 디자인, 설계
Google Design
구글이 기본으로 제공하는 플러터 디자인, 테마
왼쪽 : Material Design
오른쪽 : Cupertino
Material Design
-> MaterialApp() 위젯으로 App 감싸기
-> pubspec.yaml 파일에 아래 항목 켜기
Custom Design
Scaffold() Widget
App들은 대부분 상단/중단/하단으로 나뉨
Scafflod()
- 알아서 상중하로 나눠 줌
- appBar(선택) / body(필수) / bottomNavibationBar(선택)
Widget 배치
가로/세로로 화면 쪼개서 배치하기
Row()
- 가로로 균일하게 위젯 배치
- children : 파라미터
Column()
- 세로로 균일하게 위젯 배치
- children : 파라미터
=> mainAxisAlignment : 파라미터로 위젯 배치 간격 조절 가능
Animation
Animation of Flutter
개념 : Widget에서 일어나는 Animation
Implicit Animation
특징
- 위젯 내부에서 자체적으로 애니메이션 일어남
- 애니메이션 이미 프로그래밍, 스타일 입혀져 있음
- 다른 종류 애니메이션 위젯 사용 위한 listener, ticker 추가 코드 필요 없음
- 애니메이션의 트리거(시작 타이밍) 필요 없음, 값 변하면 자동으로 애니메이션 일어남
- 투명도 변하는 애니메이션 : 투명도 의미 변수 값 50에서 100되면 애니메이션 시작
종류
Explicit Animation
특징
- 암묵적 애니메이션 위젯에서 제공 안하는 애니메이션 커스터마이징
- 애니메이션 컨트롤 위해 AnimationController 등록
- AnimationBuilder로 내 맘대로 애니메이션 구현 가능
- 애니메이션 트리거 반드시 지정
애니메이션 작동 구조
크게 2가지 작업 필요
- 애니메이션 정보 들어갈 애니메이션 기본 객체 생성
- Animation
- AnimationController
- 애니메이션 정보 받아 view로 나타나도록 세팅
- addListenr 와 setState 사용
- AnimatedWidget 사용
- AnimatedBuilder 사용
(1) 애니메이션 기본 객체 생성
Animation<T>
- 애니메이션 활용 위한 기본 추상 클래스
- 많은 객체들이 이 클래스의 하위 클래스
AnimationController
- 애니메이션 컨트롤위한 메소드
- reverse() / repeat() / forward()
- 필수 파라미터 2개
- duration (작동기간)
- sync (잘 실행되도록 필요)
(2) View에서 애니메이션 받을 수 있도록
AddListenr와 setState 사용
- 애니메이션은 위젯 변하는 것인데 이걸 상태관리로!
- 자연스러우려면 setState가 프레임단위로 연속적으로 일어나기
- 굉장히 근본적인 방법
AnimatedWidget 사용
- statefulWidget 상속한 클래스
- listen할 animation 객체 생성 때 받기 때문에 setState 사용 안하고적용이 가능함
- AnimatedWidget을 상속한 내장 위젯들
- ~Trainsition으로 끝나는 위젯들
AnimatedBuilder 사용
- 애니메이션이 적용되는 위젯을 AnimatedBuilder로 감싸기
- 굳이 class 정의 안하고 사용 가능
- Container 부분만 rebuild 되면서 비용 절약