Widget 공부 #1

Widget 영상 하나당 1분 정도이지만 오프닝 엔딩을 제외하면 40초 근처이다. 그리고 이것을 정리하면서 2번정도 본다면 영상 하나당 3분30초에서 4분이 소요되는 듯하다.
현재 위젯 영상은 98개 이므로 다 본다면 392분, 즉 6시간 30분 정도가 걸릴듯하다. 하루에 1시간 30분 씩만 보면 5일이면 다 볼 수 있다.
오늘은 #1~#23까지 보면 된다.

1. SafeArea
다양한 기계의 가장자리가 다르므로 컨텐츠가 가장자리에서 짤릴 수 있다. 카메라나 스피커가 화면의 일부분을 가리고 있기도 하다. 이럴때 SafeArea로 감싸면 보호 된다. MediaQuery로 화면과 가장자리 면적을 잰 후 사용하면 된다.

2. Expended
child 위젯의 화면 크기를 최대 사용가능한 영역만큼 넓힌다. flex factor를 통해 형제 expended 위젯들과의 공간 배열 우선순위도 정할 수 있다.

3.Wrap
wrap은 공간 부족 문제를 해결해준다. wrap은 줄과 행처럼 자식을 한번에 하나씩 배치한다. 공간이 부족하면 자동으로 다음 행이나 열로 넘어간다. direction 프라퍼티를 이용해 할 수 있다.

• direction : 수직과 수평을 조절
• alignment :정렬 형태
• spacing : 간격 속성
• runSpacing

4. AnimatedContainer
비명시적 애니메이션방법이라는데 뭔말인지 모르겠다. 테두리, 테두리 반경, 생상, 배경이미지, 그림자, 그라디언트, 모양, 패딩 폭, 높이, 정렬, 변형 등을 애니메이션으로 만들 수 있다.

• color
• duration : 애니메이션 지속 시간 한도
• curve : 원하는 효과를 위한 곡선 지정(뭐지?)

5.1. Opacity
화면에 위젯은 사라지지만 그 레이아웃(space)는 남아있게 하는 위젯. 원하는 위젯을 opacity로 감싸고 opacity 특성 값을 0으로 설정하면 된다. Stack 을 활용하여 두개의 이미지를 겹치게 할 수 있도 있다. 그중 위에 올라오는 이미지에 opacity값을 낮게 해주면 된다.

5.2. AnimatedOpacity
변화하는 opacity를 구현할 수 있다. duration을 설정하고 opacity값을 변화시켜주면 된다.

6. FutureBuilder
Dart의 Future를 이용하면 스레드나 교착 상태를 걱정할 필요 없이 IO를 관리할 수 있다. Dart의 이러한 기능을 flutter에서 위젯으로 만들어 사용하려면 futureBuilder를 이용하면 된다.

• future : FutureBuilder에 제공할 future
• builder : future의 상태(connectionState)를 확실히 확인해야한다. future가 바쁠때는 적절한 다른 위젯을 배치한다. 에러가 발생했는지도 확인해야 한다.

7. FadeTransition
위젯을 사라지게하거나 나타나게 한다. 페이드인 앤 아웃을 할 수 있다는 얘기. AnimationController과 Animation을 먼저 만들어 FadeTransition에 controller와 animation을 제공해야 한다.

8. FloatingActionButton (FAB)
Scaffold 에서 FAB를 추가하기만 하면된다. bottomNavigationBar에 끼워 넣기도 가능하다.

9. PageView
화면의 여러 페이지를 swip으로 넘겨볼 수 있게 한다.
PageController를 만들어야 한다. 이 컨트롤러가 swip를 감지하고 에니메이션을 제공한다.
이 컨트롤러를 PageView에 연결하고, children에 보여주고자하는 page들을 추가하면 된다. 수평이 아니라 수직으로 스크롤링을 하고자할 경우 scrollDirection 특성을 Axis.vertical로 설정하면 된다.

10. Table
GridView를 통해 스크롤링 가능한 격자구조를 만들 수 있다. table은 스크롤링이 불가능한 격자구조를 만든다. 하위 위젯의 크기가 각기 다르더라도 직접 행과 열의 크기를 지정할 필요가 없다. 수직 정렬, 수평 넓이 지정, 개별 열에 대해서 특정 동작 설정도 가능. Border 특성으로 table의 테두리도 꾸밀 수 있다.

11. SliverAppBar
CustomScrollView 방식으로 앱바에 맞춤식 스크롤 움직임을 제공.

12. SliverList and SliverGrid
ListView와 GridView는 개별적으로 스크롤 할 수 있게 한다. 하지만 다같이(화면 전체를) 스크롤하고 싶다거나 다른 복잡한 스크롤링을 하고 싶다면 SliverList와 SliverGird를 사용하면 된다. 슬리버는 스크롤 가능한 영역을 의미한다.

13. FadeInImage
이미지를 네트워크에서 가져올때 다운로드 중에는 placeholder가 대체 이미지를 보여주다가 이미지가 다운되면 설정한 애니메이션으로 다운받은 이미지를 표시. 이미지를 표시할 곳에 transparent_image를 사용하면 쉽다.

14. StreamBuilder
Dart는 비동기식 data Stream을 지원한다. flutter에서 Stream을 사용하려면 StreamBuilder를 사용하면 된다. Stream으로부터 새로운 event를 받을 때마다 rebuilding 한다. Stream을 설정(연결)하고 사용해야 한다.

15. InheritedModel
InheritedWidget은 ancestor가 바뀌면 하위의 모든 descendants도 rebuild된다. 반면 InheritedModel을 사용하면 descendant중 변화된 정보에 연결된 widget만 rebuild된다. 하위 위젯은 ancestor를 InheritedModel로 받으면서 어느 영역(데이터)에 연결(관여)하는지 표시하기 위해 aspect 매개변수를 설정해야 한다.

16. ClipRRect
앱에 있는 컨텐츠 박스나 이미지의 가장자리를 둥글게 하거나 그 비슷하게 변환가능하며, 이와 비슷한 위젯으로는 ClipOval, ClipPath 등이 있다.

17. Hero
Hero 변환은 일반적인 UI패턴이다. 두 네비게이터 경로 사이에서 자동으로 애니메이션화 하여 변환한다. 이전 페이지에서의 이미지를 Hero로 감싸면서 tag를 설정한다. 다음 페이지에도 동일한 tag로 Hero를 이용하여 감싼다.

18. CustomPaint
low level paint call에 access 할 수 있다. canvas 위에 도형이나 그림을 그릴 수 있다. (설명과 예가 부족한듯하다...문서를 봐야하나)

19. Tooltip
이미지를 누르거나 누르거있을 때 메세지를 보여주는 기능을 제공한다. 몇몇 기본 위젯들은 tooltip 특성이 내장되어있으므로 메세지만 작성하면된다. 툴팁을 보여주길 원하는 컨텐츠를 Tooltip으로 감싸고 메세지를 넣으면된다.

20. FittedBox
하위 위젯이 상위 위젯의 내부에 위치시키려고 할 때, 상위 위젯의 크기에 맞게 사이즈를 조절한다. 정렬기능도 있다.

21. LayoutBuilder
보여줄 화면의 레이아웃을 디바이스의 가로, 세로 등의 값을 기준으로 설정할 수 있다. 즉, 반응형 레이아웃을 만들 수 있다.

22. AbsorbPointer
대부분의 위젯의 인풋(터치)을 비활성화 시키는 기능을 가지고 있다. 복잡한 위젯들을 가진 화면에서 이들 위젯의 터치 이벤트를 막을 수 있는 간단한 방법이 AbsorbPointer를 사용하는 것이다.

23. Transform
회전, 크기변환, 등 다양한 화면 렌더링이 가능하게 한다. 3D 관점에서 변환도 가능하다.

여기까지 보는데 2시간 30분 정도 소요됨. 1시간 30분을 예상했느데. 쉬엄쉬엄 하니 1시간이 더걸리네.