Widget 공부 #3

 

51. FractionallySizedBox

사용가능한 공간 내에서 위젯의 크기가 절대 값이 아닌 비율이나 상대값으로 설정가능하다. 이 위젯을 Flexible 위젯으로 감싸면 열과 행에 대해서 잘 위치시킬 수 있다.  

 

52. ListView

리스트를 스크롤가능하게 보여주고 싶을 때  사용. 동적으로 만들어지는 리스트뷰가 필요할때는 ListView.builder를 사용. 항목들 사이가 붙이 있는 것이 싫으면 분리된 ListView.separated 를 사용하면 된다. ListView.custom 을 이용하여 자신이 원하는 리스트뷰를 만들수 있다.  

 

53. ListTile

material design list spec(이게 어떤거지?)을 직접 구현해준다. ListView랑 차이점이 뭐지? 

ListTile은 안에 이것저것 넣을 수 있는 듯하다. 이미지, 글 등등

 

54. Container

Container 위젯이 감싸고 있는 하위 위젯의 배경을 꾸미고, 배치시킬 수 있다. 기본적으로는 투명하고 크기는 하위 위젯의 크기를 가진다. 

 

55. SelectableText

앱상에서 텍스트를 선택가능하게 만들고 싶을때 사용.  RichTex를 선택 가능하게 하려면 SelectableText.rich 를 사용한다. 

 

56. DataTable

표로 보여주고 싶을 때 사용. DataTable 에 있는 모든 cell 또한 위젯이다. 내용에 따라 자동으로 열의 너비를 정해준다. 정렬반식, 수정가능하게 만들기, 숫자 표기 방식등 다양한 설정이 가능하다. 작은 핸드폰에서 모든 데이터들이 수평영역으로 보여줄 수 없을 경우, 위젯을 SingleChildScrollView로 감싸주면된다. 

 

57. Slider, RangeSlider, CupertinoSlider

볼륨 조절이나, 밝기 조절 등 처럼 변수를 조절할 수 있게 해주는 인터페이스를 제공하는 위젯이다. Slider는 하나의 값을 변경하고, RangeSlider는 하한값과 상한값 두가지 값을 수정(입력)할 수 있다.

 

58. AlertDialog

사용자에게 알림을 알리거나 중요한 결정을 해야할 때, 사용자 입력값을 받고 싶을 때 사용.  

 

59. AnimatedCrossFade

 "Cross fade"는 한 대상이 천천히 다른 대상이 바뀜을 의미한다. 한 위젯에서 다른 위젯으로 천천히 바뀌게 해준다. 변하는 위젯의 크기가 서로 달라서 화면의 layout이 변하게 되는 것이 문제가 될때에는 layoutBuilder를 이용한다. 

 

60. DraggableScrollableSheet

swipe해서 위젯을 화면에 뛰우고 싶거나, 위젯을 스크롤 할수 있게 만들고 싶을 때 사용. 

 

61. ColorFiltered

이미지나 위젯 조합(여러 위젯의 조합으로 구성된 화면) 의 색을 한번에 편하게 바꾸고 싶을 때 사용. 

 

62. ToggleButtons 

다양한 옵션을 선택할 수 있게 해주는 위젯. 

 

63. CupertinoActionnSheet

ios 기반의 action sheet. 상향식 슬라이드의 ActionSheet. 

 

64. TweenAnimationBuilder

컨트롤러를 이용  하지 않더라도 원하는 애니메이션 효과를 얻을 수 있다. 성능을 최적화 하기 위해서 어떤 위젯을 변화시킬지 builder에 child 파라미터를 전달한다. 그러면 전체 위젯트리를 rebuild하지 않게 된다. 

 

65. Image

image.assets를 사용하면 장치의 픽셀 밀도에 따라 이미지를 정한다. 개발자는 다양한 버전의 이미지를 pubspec.yaml 안에 나열하기만 하면 된다. 

image.network 는 네트워크에 있는 이미지를 다운로드해서 캐시에 저장하고 화면에 띄운다. 네트워크에서의 이미지 로딩은 시간이 소요됨으로 그 프로그레스를 보여주기 위해서 loadingBuilder 특성을 사용하면된다. semanticLabel을 사용하면 앱의 접근성을 향상시킬수 있다. 검색에 용이하거나 특정 알고리즘이나 프로그램에 쉽게 활용될수 있기때문에. 

JPEG, PNG, GIF, WebP, BMP, WBMP 를 지원한다. 

 

66. DefaultTabController

위젯을 탭에 넣어 정리하고 싶을때 사용하면된다. 크롬브라우저에 여러 탭에 다른 웹페이지를 로딩하듯이. 

TabBar, TabBarView, 그리고 Defaulttabcontroller를 사용해야 한다. 

67. Drawer

다른 펭지로 탐색하는 기능이 필요할 때 선택할 수 있는 위젯.  Scaffold 위젯의 drawer 특성에 Drawer 위젯을 연결하면 자동으로 Scaffold의 appbar에 Drawer를 열수 있는 아이콘이 생성된다. drawer 특성 대신에  endDrawer에 연결시키면 오른쪽에서 열리는 Drawer를 구현한다. 

Drawer 내부에는 모든 위젯을 넣을 수 있지만 흔히 사용하는 건 ListView다. 이 ListView 안에 DrawerHeaer, ListTile을 집어 넣는다. 

68. SnackBar

 앱화면 아래에 잠깐동안 팝업 메세지를 띄운다. SnackBar를 사용하려면 Scaffold에서 showsnackbar( )를 입력한다. 

69. ListWheelScrollView

 ListView를 회전식을오 변화시킨 것. 3D 신린더에 있는 것처럼 리스트를 만들어준다. 바퀴 돌리듯 리스트들이 스크롤링된다.  

70. ShaderMask

위젯 트리에서 하나이상의 위젯에 gradient를 줄 수 있다. 이지미를 적용할 수도 있다. shader를 적용할 위젯을 ShaderMask로 wrap 하면된다. 그리고 어떤 shader를 적용할지를 ShaderMask에 알려줘야 한다. 그리고 Gradients 클래스에서 createShader 메소드를 제공하고 있다.  

 

71. NotificationListener

알림을 보내는 위젯. ListView 같은 스크롤 가능한 위젯은 ScrollNotification 을 보낸다. 알림은 트리를 따라서 상위 위젯으로 올라간다. 이렇게 올라오는 Notification을 handling 하기위에서 위젯이나 그 상위 위젯에서 NotificationListener를 구현해야 한다. 

 

72. Builder

위의 파란 박스가 build method로 그안에 Scaffold와 그 child인 RaisedButton이 있다. RaisedButton은 상위 위젯의 context를 필요로 하고있다.  

 

위젯에 따라서 같은 builder 메소드 내부에서 상위 위젯의 build context를 필요로하는 위젯이 있다. 이런 경우 아직 상위 위젯이 building 되지 않은 상태이므로 하위 위젯은 상위 위젯의 context를 이용할 수 없다. 

 

이런 상황은 일반적으로 Scaffold, Navigator, ThemeData, MediaQuery, 상태 관리의 몇몇 메소드와 같이 상속된 위젯에 접속하려고 할때 등에서 발생한다. 그런 상황에 있는지 알수 있는 가장 일반적인 방법은 Builder 메서드 내에서 .of( ) 를 찾아보는 것이다. 

 

이 문제를 해결하기 위한 첫번째 방법은 하위 위젯을 separate하여 child 위젯 자신만의 build method를 가지도록 하는 것이다. (making a stand-alone widget for that child widget tree)

 

하지만 독립시키기에는 너무 간단한 위젯의 경우에는 두번째 해결 방법으로 Builder 위젯을 사용하면 된다. 

 

Builer위젯은 parent widget이 먼저 완벽히 build 되는 것을 보장한다. 따라서 child widget에서는 build context를 통하여 상위 위젯을 참고할 수 있다. child widget은 Builder 위젯에 있는 builder function이  호출되면 생성된다. (아래그림참고)

 

73. ClipPath

 독특한 모양의 위젯을 만들고 싶을 때 사용. 

 

74. CircularProgressIndicator, LinearProgressIndicator

앱이 작동 중이라거나, 진행 상황을 나타내고 싶을 때 사용. 

 

75. Divider

두개의 위젯 사이에 공간이 필요할 때 사용. Divider는 어느 위치에 사용하든 수평선 형태로 나타남. 선의 색깔, 선의 아래 위 마진, 선의 굴기, 선의 indent 등을 설정할 수 있음

일관성있게 앱네에 모든 Divider를 동일하게 만들려면 MaterialApp에 ThemeData에서 dividerTheme을 설정해주면 된다. 여기서 중요한 것은 그냥 Divider 설정할 때 선 아래위의 공간 설정은 height로 하지만, dividerTheme에서 선 아래위의 공간 설정을 할때에는 space라는 이름의 속성을 사용한다는 것이다.