Widget Tree
.png)
사실 이 프로젝트의 구성은 살짝 독특하다.
홈 화면에 대한 레이아웃을 이야기 하려 하지만 HomeScreen Widget 내에는 최 하단에 있는 BottomNavigationBar가 존재하지 않는다.
심지어 Flutter Inspector로 확인 하였을 땐 하나의 View 안에 Scaffold가 2개가 존재하는 등 기존에 내가 가지고 있던 Layout에 대한 개념이 살짝 무너지기도 했다.
그래도 일단 이번에는 상용 서비스를 할 수 있을 정도의 Widget에서는 어떻게 UI를 구성하는가?
라는 주제로 작성하는 글이기 때문에, 다른 내용 외에 Home Screen의 구성만 이야기 해 보고자 한다.
Widget을 디바이스 최대 사이즈를 정할 때, 보통 MediaQuery와 BuildContext를 활용한 형태로 가지고 오곤 하는데, 디바이스 기준이 아니라 상위 Widget을 기준으로 Widget의 사이즈를 정하고 싶을 경우 LayoutBuilder를 활용할 경우 한결 쉽게 Layout 구축이 가능하다.
https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html
TabBar (앱화면 상단에 있는 메뉴바) 형태의 UI/UX 구현할 때 가장 기본적인 형태를 제공하는 Widget
추후 위젯 트리 하단에 나올 AppBar와 Scaffold Body에 선언 된 TabBar와 TabBarView를 상호 연결해주기 위한 Widget 정도로 보면 된다.
주의점으로 TabBarView에 들어갈 View의 갯수, 그리고 TabBar의 tabs 수, 그리고 DefaultTabController의 length 가 일치하지 않으면 문제가 발생한다.
https://api.flutter.dev/flutter/material/DefaultTabController-class.html