탭바(tabBar) 만들기

여러 페이지 만들고 이동하기

구현 화면

 여러 화면을 만들고 각 화면을 탭바에 연결해 사용자가 탭을 눌렀을 때 각 화면으로 이동하는 앱을 구현한다.

모바일 앱 개발에서는 이와 같은 기능을 내비게이션(navigation)이라 칭힌다.

---

탭바 위젯을 사용하려면 탭 컨트롤러가 필요하다. 

main.dart  _MyHomePageState 클래스에서 initState() 함수를 이용해 TabController를 선언한다.

TabController

TabController에서 length에는 몇 개의 탭을 만들지 지정하고, vsync에는 탭이 이동했을 때 호출되는

콜백 함수를 어디서 처리할지 지정한다. 

_MyHomePageState 클래스에 *with 키워드를 추가하고 SingleTickerProviderStateMixin 클래스를 지정하면 

vsync: this 코드의 오류가 사라진다. 

* with는 여러 클래스를 재사용할 수 있는 편리한 키워드

 

클래스에 with를 이용해 SingleTickerProviderStateMixin 클래스를 추가로 상속함으로써 탬을 눌렀을 때 

_MyHomePageState 클래스에서 애니메이션 동작을 처리할 수 있게 했습니다.

---

스테이트풀의 생명주기에서 위젯의 상태 관리를 완전히 끝내는(State 객체 소멸) dispose() 함수

탭 컨트롤러는 애니메이션을 사용하므로 dispose() 함수를 호출해 주어야 메모리 누적을 막을 수 있다. 

_MyHomePageState 클래스 안에 dispose() 함수를 재정의하는 코드를 추가한다. 

dispose()

---

build() 함수를 이용해 화면 구성하기

스캐폴드로 appBar와 body 그리고 bottomNavigation을 선언한다.

body에는 TabBarView 위젯, bottomNavigationBar에는 TabBar 위젯을 만든다.

build()

탭 컨트롤러에 length를 2로 지정했으므로 bottomNavigationBar에 탭을 두개 만들어서 각 아이콘을 넣었다.

그리고, initState() 함수에 만들어 둔 탭 컨트롤러가 담긴 controller를 입력했다. 

 

body에는 TabBarView의 children을 <Widget>이라 선언하고 각각 *FirstApp(), SecondApp()을 넣었다.

* import로 각 파일의 경로를 추가했습니다.

 

---

첫번째 페이지에서 아래쪽 탭을 클릭하거나 화면을 왼쪽, 오른쪽으로 쓸어 넘기면 각 페이지로 이동하는 애니메이션을 볼 수 있다. 

 

GitHub - shinjoo95/flutter_tabBar