CampusView 기획

• Flutter를 사용해서 SESAC 커뮤니티 어플을 개발 진행중인데 캠퍼스의 정보들을 볼 수 있는 CampusView를 아래 이미지와 같이 기획하였다.
• CampusView는 DynamicTabBar로 구성되어 있어 기능을 개발 하였다.
• DynamicTabBar의 기능
  • 사용자가 스크롤을 할 때 감지하여 Tab이 자동으로 이동
  • 사용자가 Tab을 눌렀을 때 설정한 곳을 자동 Scroll

DynamicTabBar 개발

일단 Tab을 눌렀을때 해당 위치로 이동하려면 Tab을 관리하는 위젯과 클래스를 찾아야한다.

그렇게 해서 나온 것이 ScrollController 와 DefaultTabController!

ScrollController

• Flutter에서 스크롤 가능한 위젯이 스크롤 위치를 제어하고 이벤트를 감지하는 클래스.
• 현재 스크롤 위치를 가져오거나 원하는 스크롤 위치로 이동할 때 필요한 클래스이다!
• 스크롤이 발생할때마다 스크롤 포지션을 알려준다고 한다!
• 자세한 내용은 공식 문서 하이퍼 링크를 달았으니 공식문서에서 보면 된다..!

DefaultTabController

• 탭 컨트롤러를 TabBar or TabBarView와 공유하는데 사용되는 상속 위젯이다!
• length와 child Widget이 필수값이고 아래 영상 처럼 탭을 눌렀을때 자동으로 이동하는데 사용한다.

https://flutter.github.io/assets-for-api-docs/assets/material/tabs.mp4