Flutter 2일 차 - Flutter for iOS devs (2/8), Views

Views

How do I lay out my widgets? Where is my Storyboard?

https://flutter.dev/docs/get-started/flutter-for/ios-devs#how-do-i-lay-out-my-widgets-where-is-my-storyboard

 

iOS 에서는 뷰와 제약을 구성하는데 스토리보드를 사용하거나 코드로 해야 한다.

Flutter 에서는 코드로 위젯 트리를 작성하므로써 레이아웃을 정의한다.

 

iOS 제약을 흉내내는 위젯들에는 여백(padding) 을 추가할 수 있다. 위젯 카탈로그에서 flutter 가 제공하는 레이아웃을 볼 수 있다.

How do I add or remove a component from my layout?

https://flutter.dev/docs/get-started/flutter-for/ios-devs#how-do-i-add-or-remove-a-component-from-my-layout

 

iOS 에서는 동적으로 자식 뷰를 추가, 삭제하기 위해 부모에서 addSubview() 를 호출하거나 자식뷰에서 removeFromSuperview() 를 한다.

Flutter 에서는 위젯이 불변이라서 addSubview() 와 동일하지 않다.

위젯을 리턴하는 부모에 함수를 전달하고 boolean 으로 자식 뷰들 생성을 조작할 수 있다.

How do I animate a widget?

https://flutter.dev/docs/get-started/flutter-for/ios-devs#how-do-i-animate-a-widget

 

iOS 에서는 뷰의 animate(withDuration:animations:) 를 호출하므로ㅓ 애니메이션을 만들 수 있다.

Flutter 에서는 애니메이션 라이브러리를 이용해서 widget 을 animated widget 으로 감싼다.

 

Flutter 에서는 중지, 조회(seek), 중지, 반전(reverse) 가능한 Animation<double> 인 AnimationController 를 사용한다.

vsync 가 발생할때 신호가 발생하고 실행하는 동안 각 프레임에서 0~1로 선형 보간을 생성하는Ticker 가 필요하다.

하나 이상의 애니메이션을 만들고 controller 에 연결하라.

 

예를 들어, 보간 곡선 애니메이션을 구현하려면 CurvedAnimation 을 사용하라.

controller 는 애니메이션 과정의 마스터 소스이고 CurvedAnimation 은 controller 의 기본 선형 모션을 대체할 curve 를 계산한다.

flutter 에서 widget 은 애니메이션과 마찬가지로 컴포지션과 함께 동작한다.

 

FadeTransition 의 불투명도(opacity) 와 같은 widget 의 애니메이션 가능한 프로퍼티에 Animation 을 넣으므로서 위젯 트리를 만들고 controller 에 애니메이션을 시작하라고 알린다.

How do I draw to the screen?

https://flutter.dev/docs/get-started/flutter-for/ios-devs#how-do-i-draw-to-the-screen

 

iOS 에서는 화면에 선, 도형등을 그릴때 CoreGraphics 를 사용한다. 

Flutter 에서는  Canvas class 기본으로 한 다른 API가  있다.

그리는데 도움이 되는 CustomPaint, CustomPainter 두개의 다른 클래스가 있다.

CustomPainter 는 canvas 에 그리는 알고리즘을 구현한다.

Where is the widget’s opacity?

iOS 에서는 모든 뷰가 opacity, alpha 를 가지고 있다.

flutter 에서는 많은 시간을 opacity widget 에서 widget 을 감싸는데 필요하다.

How do I build custom widgets?

https://flutter.dev/docs/get-started/flutter-for/ios-devs#how-do-i-build-custom-widgets

 

iOS 에서 원하는 행동을 하기 위해서는 일반적으로 UIView 의 하위 클래스나 기존에 있던 뷰로 메서드를 오버라이드하거나 구현한다.

flutter 에서는 상속대신 작은 위젯들을 이요하여 커스텀 위젯을 구성한다. 

---

Views 만 봤는데... 벌써 힘이 든다....