멀티차일드일 때는 데이터가 얼마나 올지 모르기 때문에
디폴트로 무한하게 만들어 놓았다.
그래서 크기를 지정해 줘야됨 ⇒ listView, SizedBox, Expended 등
TabBarView는 내부적으로 높이를 무한하게 가지려고 한다.
높이 제한을 시켜줘야한다는 이야기이다.
Ex) Expended 위젯 사용하기
전체 코드
코드구현한 코드
이미지에서 빨간 박스로 구별되어있는 것이 TabBar와 TabBarView 입니다.
Column으로 배치되어 있습니다.
이미지의 children 부분에 TabBar와 TabBarView를 구현해야 합니다.
탭바는 디폴트탭컨트롤러를 통해 구현이 진행됩니다.
DefaultTabController는 children을 가지고 있기 때문에 Row나 Column을 사용해서
여러 위젯을 배치시켜야 합니다.
디폴트 탭 컨트롤러의 child에 Column 배치하기
생성된 Column의 children에 탭바와 탭바뷰를 구현합니다.
먼저 TabBar입니다.
TabBar에서 <Widget>[]을 사용하고, 그 안에 Tab위젯으로 구현합니다.
구현된 모습
TabBar가 구현되었습니다.
TabBarView 구현하기
TabBarView는 TabBar 바로 아래에 위치하고,
TabBarView 위젯의 GridView.builder를 사용해서 구현해야 합니다.
GridView.builder 에서 확인하고 작성해야 할 것 들입니다.
itemBuilder는 TabBarView가 return 할 것을 알려주는 역할입니다.
itemBuilder까지 구현한 TabBarView입니다.
Image.network는 링크를 통해 이미지를 가져오는 것으로
여기서 사용한 링크는 이미지 등록 사이트에서 끌어오는 것입니다.
중요
실행을 하더라도 현재 상태에서는 오류가 발생합니다.
이유는 제일 상단에서 설명했듯이
TabBarView가 디폴트로 설정된 높이가 무한하게 설정되어서
화면에서 벗어나 깨지기 때문입니다.
해결방법
tabBarController와 TabBarView의 높이를 설정해주면 해결됩니다.
SizedBox를 사용하는 방법과 Expanded 를 사용하는 방법이 있습니다.
Expanded로 감싼 모습입니다.
정상적으로 구동되는 모습
Share article
