Widget 공부 #2

이번엔 Google Developers 유튜브의 Flutter Widget of the Week 25번째 영상부터 볼차례. 50편 까지 보면 되려나?

 

24. BackdropFilter

ImageFilter를 child로 받아서 이미지들을 블러, 회전, 각도조절 등 다양한 이미지 효과를 줄 수 있다. 

 

25. Align 

 부모 위젯의 한정된 구역 내에서 위젯의 위치를 설정할 수 있다. 

 

26. Positioned

Stack을 이용하여 여러 위젯들이 결합되어있을 때 이런 위젯의 위치를 어떻게 원하는 위치에 배치할 수 있다. 

 

27. AnimatedBuilder

애니메이션 효과를 줄 수 있는 위젯 중 하나. Animation을 정의하고 AnimationBuilder로 실행하면 됨. 그리고 이를 위해서 AnimationController가 필요한데, stateful widget에 정의하면 위젯의 모든 상태를 컨트롤러로 관리할 수 있음 

 

28. Dismissible

 스윕 제스쳐를 감지했을 때 하위 요소를 애니메이트 시켜 백그라운 뒤로 슬라이드하게 만든다. 양쪽 방향으로 모두 인식하게 하거나 수직으로의 swip도 인식하게 할 수 있다. 

 

29. SizedBox

정확한 사이즈의 widget을 만들려고 할때 사용가능하다. 즉 하위 요소의 사이즈를 명확하게 설정한다. 

 

30. ValueListenableBuilder

ValueNotifier와 ValueListenableBuilder를 사용하면 값이 변함에 따라 그것을 알려주는 기능을 만들 수 있다. 따라서 데이터가 바뀔때마다 앱을 업데이트 하고 싶을 때 사용한다. 

 

31. Draggable

위젯을 drag할 수 있게 한다. 

 

32. AnimatedList

리스트 추가, 삭제시에 쉽게 영상화시켜준다.

 

33. Flexible

하위 위젯의 크기를 flexible하게 만든다. 장치에 따라 화면 크기가 다르거나 장치가 horizontal, vertical로 변환될 때 이를 인식하여 위젯의 크기를 변화시킨다. 

또는 화면에서 위젯들간에 화면에서 얼만큼의 크기를 할당할지 비율로서 설정할 수 있다. 

 

34. MediaQuery

다양한 스크린 사이즈에 따라 다른 레이아웃을 적용하고 싶을 때, 디바이스의 화면 크기, Orientation, default font size, system UI에 의해 가려진 화면 정보, screen constrast 나 유저의 preferences(설정값)를 알아낼 수 있다. 

 

35. Spacer

위젯들 간의 간격을 줄때 사용  

 

36. InheritedWidget

하위 위젯의 누구든 상위 위젯의 data에 접근할 수 있도록 해준다. 

 

37. AnimatedIcon  

움직이는 아이콘을 제공하고 있다. 이것을 사용할 수 있게 하는 위젯이다. 

 

38. AspectRatio

하위 위젯의 너비와 높이 사이의 비율을 설정할 수 있다. 장치의 오리엔테이션이 변하더라도 하위 위젯의 너비와 높이 비율은 고정된다. Expanded와 같은 위젯의 하위에서 AspectRatio를 쓰면 적용이 안된다. Expanded는 하위 요소에게 크기 결정권을 주지 않기 때문. 이럴땐 Align같은 Expaned의 영향을 대신 받아주는  benevolent parent를 넣어주면된다.  

 

39. LimitedBox

상위 요소의 사이즈 제한 값에 영향을 받지 않는 하위 요소들에게 default size와 같은 제한을 줄때 사용. 특히 리스트뷰와 같이 스트롤 방향이 무한일때 사용하면 유용하다. 각 리스트의 height를 LimitedBox로 제한할 수 있다. unbounded environment에 자연스러운 max boundary를 제공. 

 

40. Placeholder

UI가 실행할 준비가 될때까지 UI의 요소를 알아서 처리해준다. 

 

41. RichText

하나의 텍스트에서 여러 효과를 넣고 싶을 때 사용. 각각의 글자에 줄 효과를 TextSpan을 사용해서 효과를 넣어줄 수 있다.  gesture recognizer를 사용하면 클릭했을 때 연결되는 링크를 생성할 수도 있다. 

 

42. ReorderableListView

ListView는 항목들의 위치를 변경할수 없지만 ReorderableListView는 항목을 누르고 위치를 이동시킬수 있다. 

 

43. AnimatedSwitcher

두개 이상의 위젯간에 세련된 애니메이션을 주면서 switching되게 한다. 

 

44. AnimatedPositioned

 보통의 Positioned 위젯처럼 Stack의 하위에 위치하는 것이 적당함. 차이점은 rebuild할때 높이나 폭 등의 변경사항이 있다면 변경사항을 에니메이트시켜서 변화시켜준다. 

 

45. AnimatedPadding

padding 위젯은 화면 경계 사이에 공간과 버퍼를 제공한다. 패딩에 역동적인 변화를 주고 싶을 때는 AnimatedPadding을 사용하면된다. StatefullWidget을 사용해야 패딩 변수를 변경할수 있다. 

 

46. IndexedStack

채널을 변환하는 TV와 유사하다. 앱 안에서 위젯간의 switch을 하게 해준다. 한번에 하위 항목 하나만을 보여주지만 모든 하위 항목의 상태를 유지하고 있다. 

 

47. Semantics

각 위젯을 묶음으로써 해당 정보를 제공한다. UI의 부분요소의 의미를 설명해주는 위젯이다. 이는 검색이나 이미지분석 등을 할때 유용하다. 50여가지의 property를 가지고 있다. 

 

48. ConstrainedBox

자식 위젯의 넓이와 높이의 최대 및 최소값을 설정할 수 있다. 

 

49. Stack

위젯의 중첩이 가능하도록 만든다.  하위에 positioned 위젯을 사용해서 특정 위젯의 위치를 설정할 수 있다. stack의 경계선 밖으로 하위 위젯을 밀어냈을 때, 밖으로 밀려난 위젯이 보이게 할 것인지, 아니면 밀려난 부분은 보이지 않게 할 것인지 overflow 속성을 사용할 수 있다. 

 

50. AnimatedOpacity

위젯의 가시성을 변경시키고 싶을때 사용. 사라지게 하거나 선택되지 않은 것은 덜 두드러지게 할때. 

반면, 애니메이션의 불투명도를 명시적으로 조절하고 싶다면, FadeTransition을 사용하면된다.