뷰위젯과 레이아웃 위젯에 대한 여러 종류의 위젯을 배웠다.
우선 뷰위젯같은 경우
리스트뷰,그리드뷰,탭바뷰 등이 있다.
먼저 리스트뷰는
아이템을 리스트화 시켜 리스트 형태로 보여주는 위젯이다.
대표 ui로는 카카오톡의 친구 목록과 쿠팡 상품 목록이있다.
리스트뷰에는 여러 옵션이 존재한다.
ScrollDirection: Axis. horizontal,
이는 가로로 스크롤을 할 수 있게 만들어준다. 기본값은 세로이다.
reverse는 말그대로 스크롤을 반대로 정의하는 것이며 기본값은 false이다.
형태는 reverse: true,이다
controller는 버튼 생성 및 클릭 시 페이지 이동을 해준다.
physics는 최상단 및 최하단에 도착했을때 어떠한 효과를 보여준다.
형태는 physic: const (clamping,bouncing,neverscrollable) 이다.
cacheExtent는 어떤 영역으로 다녀와도 화면을 그대로 나타내주는 것이다.
퍼포먼스 적으로 사용해야한다면 필수 이지만 보톤 최소 단위로 사용하거나 사용하지 않는 것을 추천한다.
다음 그리드 뷰는
갤러리를 생각하면 쉽다. 격자 형태로 표시해주는 걸 그리드 뷰라고 지칭한다.
그리드뷰는 gridDelegate라는 옵션을 반드시 넣어줘야하며
children에는 그리드 갯수를 몇개 넣을 건지 작성해야한다.
SliverGridDelegateWithFixedCrossAxisCount은
그리드를 몇개 줄건지 사이 공백은 얼마줄건지를 정하며 동적이여서 픽스한 값이 고정이된다.
SliverGridDelegateWithMaxCrossAxisExtent은
그리드 하나의 영역의 크기를 몇을 줄건지 정하며 정적이여서 화면을 움직였을때
그리드가 유동적으로 생성 및 제거된다, 즉 화면 대응이 필요한 ui에 적절하다.
리스트뷰와같이 ScrollDirection, reverse, controller 옵션을 가지고있으며
padding을 사용해 좌우 위아래 여백을 조정할 수 있다.
탭바뷰는 상하단 메뉴바와 메뉴를 클릭했을때 나타나는 밑 화면이라고 생각하면된다.
대표 ui는 당근마켓이 있다는 생각이 든다.
메뉴바는 탭바위젯이며, 그 밑 화면은 탭바뷰 위젯으로 정의한다.
controller는 탭바뷰위젯에서 필수로 사용해야하며
형태는 late Tapcontroiier _ tapcontroiier; 이다.
그 밑 length는 필수이며 몇개의 메뉴를 만들거냐를 정한다.
또 vsync: this,를 사용할땐 with TickerProviderStateMixin을 꼭 써야한다.
탭바위젯에는
labelcolor,unselectedLabelcolor,labelPadding을 작성할 수 있는데
각각 선택된 버튼의 색깔, 선택되지 않은 버튼 들의 색깔, 탭바와 버튼 텍스트 사이의 간격을 나타낸다.
탭바뷰위젯위 형식은 이러하다.
children: [
Container(
color: Colors.blue,
child: Center(child: Text('메뉴1 페이지 ')),
),
다음 레이아웃 위젯에 대해 작성하겠다.
레이아웃 위젯에는 우선 container이 있다.
이는 버튼을 나타내면 버튼위 크기,콮이,좌우 위아래 간격을 조정할 수 있다.
또 decoration이 있어 꾸밀 수도 있다.
다음 sizedBox는 위젯과 위젯과의 간격을 조정할 수 있는 레이아웃을 구성하는데 사용된다.
형식은 const sizedBox로 시작한다.
다음 Row는 가로 정렬을 할때 사용하며
가장 많이 사용되는 옵션에는
mainAxisAlignment: MainAxisAlignment. 가 있다.
이 뒤에는 center,start,end,spacebetween,spaceEvenly,spaceAround가 있다.
또 crossAxisAlignment: CrossAxisAilgnment가 있는데 이는 가로 방향인 row의 역방향을 나타내준다.
다음 column이 있는데 이는 세로 정렬을 사용할때 사용하는 위젯이며
똑같이 mainAxisAlignment: MainAxisAlignment.사용하고
crossAxisAlignment: CrossAxisAilgnment도 사용한다.
다음 Expanded위젯은
로우와 컬럼을 사용할때 같이 사용하며 공간을 확장시켜 사용할때 Expanded를 사용한다.
강력한 옵션으로는 -flex: 가 있으며 어느정도의 영역을 옵션 값으로 차지할지를 지정한다.
또 stack위젯이 있는데 이는
어떤 위젯 위에 겹쳐지는 위젯을 만들때 사용되며
자주 사용되는 옵션으로는 -fit: stackFit(expand,loose,passthrough,values) 가 있다.
마지막으로 positioned위젯은 child(자식)버튼을 어떻게 위치시킬 것이냐를 정의한다.
점점 플러터에 대한 이해가 되는 것 같다. 비교적 1강에 비해 쉬운느낌이며
이해하기 어렵지도 않다. 이대로 쭉쭉 해보자!!