[TIL] Flutter | TabBar, onTab , 탭 바 만들기 , 코드를 뜯어보자,,,

Flutter에서 탭을 만들어보려고 한다.

위의 예시를 보면 구름, 우산, 해 모양이 각각의 탭이다.

탭을 통해 여러 페이지를 한 번에 모아서 볼 수 있다.

https://api.flutter.dev/flutter/material/TabBar-class.html

TabBar class - material library - Dart API

구글에 Flutter TabBar를 치면 가장 먼저 나오는 공식 문서

 

나의 경우

appBardhk TabBar가 각각의 요소로써 느낌이 나길 원한다.

내가 원하는 코드는 텝 바 부분이 배경 색과 같고 탭은 2개

 

TabBar 자체가 엄청 어려운 코드는 아닌거 같은데

기존의 코드를 살리면서 적용을 해야하니

도저히 감이 잡히지 않는다.

 

이럴 때 일수록 본질을 잊지 말고 자세히 살펴보기,,,

 

먼저 Tab에는 3가지가 필요하다.

 

1. TabController 

2. TabBar : Tab을 추가한다.

3. TabBarView : 각 Tab에 해당하는 컨텐트 구성(탭 화면에서 보여지는 화면)

 

보통의 탭 바 코드는

앱 바 안에 있는데 나 같은 경우

앱 바 구성이 두개로 나뉘어져있어서

어디에 적용해야할지 어떻게 적용해야할지를 잘 모르겠다..

 

https://api.flutter.dev/flutter/material/TabController-class.html

TabController class - material library - Dart API

https://medium.com/flutterarsenal/build-a-nested-tabbar-in-flutter-7e0cae5cfc7

Build a Nested TabBar in Flutter

https://docs.flutter.dev/cookbook/design/tabs

Work with tabs

---

Final 함수 : 한 번만 설정 할 수 있고 변경 불가능한 변 수 선언 방법

(비슷한 것으로 const : 컴파일 시간에 상수가 된다.)

파이널 함수를 초기화 하는 방법은

1. 변수 선언을 초기화

2. 객체 생성 시 , 외부 데이터로부터 받은 생성자를 통해 초기화 시키는 법

 

PageController : 여러 페이지를 한 화면에서 구현 할 수 있게 해주는 위젯 클래스

->내가 만들고 있는 화면은 각각의 탭에서 책 처럼 넘어가는 화면 구동이 필요하기 때문!

(탭끼리 x, 탭 내에서 o)

 

Scaffold : 가장 최 상단, 중간 영역, 최하단, 그리고 떠 있는 버튼을 지원해주는 클래스

(영단어로는 발판이라는 의미)

   return Scaffold(~ 는 스캡폴드에 값을 전달해서 위젯을 생성하는 것!

 

AppBar : 보통 맨 상위의 창

Body : 가운데 영역

BottomNavigationBar : 다른 창으로 이동할 수 있는 버튼들이 있는 영역

FloatingActionButton : 창 위에 떠있는 효과가 있는 버튼

FloatingActionButtonLocation : 버튼의 위치를 설정