[TIL] TabBar, TabBarView, PageView | PageView in TabBar | 색깔, 사이즈 변경 | 탭 내에 페이지 만들기

> TabBar
> 

탭바 색깔 변경

- > 계속 child: new TabBar( ~

아래에 색깔 변경을 시도해서 안된거였다.

"탭바"라기 보다는 앱바 "아래" (=Bottom)의 색깔을 바꾸는 거여서 그러려나..

바텀 하위에 Color: 로 색깔 변경 완료!

<참고문서>

[<https://www.codegrepper.com/code-examples/dart/tabbarview+background+color+flutter>](<https://www.codegrepper.com/code-examples/dart/tabbarview+background+color+flutter>)

[tabbarview background color flutter Code Example
appBar: AppBar( brightness: Brightness.dark, iconTheme: IconThemeData(color: Colors.white), title: Text("Title TabBar"), )
www.codegrepper.com](<https://www.codegrepper.com/code-examples/dart/tabbarview+background+color+flutter>)

```
                indicatorSize: TabBarIndicatorSize.label or tab,
```

탭바 아래 부분 인디케이터의 사이즈를 변경하는 명령어

label : 탭바의 텍스트만큼

tab : 탭바만큼

```
                unselectedLabelColor: Color(0xf색깔hexcode),
```

선택되지 않은 탭의 색깔을 지정

```
      initialIndex: 0,
```

해당 페이지에 들어갔을 때 몇번째 탭 부터 띄울 것인지 결정

맨 첫번째(왼쪽) 탭부터 보여지길 원한다면 1이 아닌 0!!!을 써야한다.

---

> TabBarview & PageView
> 

나의 목표는 탭 생성하기

+ 탭 페이지 내에 여러 페이지를 넘겨 볼 수 있게 하기

- > TabBar+PageView

기존에는  body: TabBarView 였는데

이렇게 하니까 내가 생성한 탭(=2개) 보다 많은 이미지를 넣을 수가 없었다.

그래서 한 생각이 탭바뷰를 페이지뷰로 바꾸기!

body: PageView 로 변경했다.

이렇게 변경하니 이미지가 여러장 올라가지만 탭이 구동되지 않았다.

~~지금 생각해보면 당연함~~

페이지는 탭 내에서 구동되는거니까

탭바뷰를 먼저 생성하고

그 하위에 children으로 페이지뷰를 생성했다!

페이지뷰에 여러 이미지를 업로드하니

내가 원하는 대로 결과가 나왔다!

아직 구조에 대해서 공부할게 많다고 느꼈다!

아무데나 집어넣지 말고

구성을 뜯어보고 생각해보자,,,

<참고문서>

[<https://devmemory.tistory.com/39>](<https://devmemory.tistory.com/39>)

[Flutter - PageView with TabBar and Indicator
Pageview를 활용할 방법은 여러가지가 있습니다 그 중 tabbar를 이용해서 pageview의 page와 tabbar의 tab을 일치시키는 예제 그리고 indicator로 페이지를 표시해 주는 예제를 다뤄보겠습니다 tabbar예제 class
devmemory.tistory.com](<https://devmemory.tistory.com/39>)

탭바에 페이지뷰