[TIL] TabBar 만들기, Tab 내에서 페이지 넘어가기, Indicator&label, PreferredSize, Color, Assets 추가 규칙, etc...

오늘은 저번에 하지 못했던 상단 탭 만들기를 하였다.

 

사실 난 못할줄 알았어...

기존의 코드가 복잡해서 탭 바 코드를 끼워넣기 너무 까다로웠다.

그래서 나는 일단 새로운 프로젝트에서 레이아웃을 만들어 놓고

기존의 코드에 대입하기로 결정

 

 이거 코드를 쓰려니,,

보안이 걱정되어서 마음대로 올리지는 못하겠다

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

TabBar class - material library - Dart API

이 코드를 참고하여 사용했다.

 

기존 코드는 appbar / AppBar _앱바이름 / TabBar _탭바이름

이런식으로 나눠져있어서  어디에 탭을 적용해야하는지 헷갈렸다.

 

그래서 새로 짠 코드는 appbar: AppBar 아래에 Bottom으로 생성!

appBar: AppBar( //앱바 생성
	bottom: new PreferredSize( //앱바 크기 조절
    	child: new Container  // 탭바 색상 변경을 위해
        	Child: new tabBar( //탭바 생성
            .
            .
            .
            tabs: <Widget>
            	tab(
            .
            .
            .
   body: const TabBarView( ~~~ //탭바뷰 생성

이런식으로

앱바 생성+앱바 크기 조절+탭바 생성+ 탭바 색상 조절+탭바뷰

쌓아올렸다.

 

이제 뭔가 플러터를 조금은 이해하는 느낌...???

 

구조가 어떻게 되는지를 잘 몰랐을 때에는

그냥 인터넷에 있는 코드를 무작위로 대입해보고

안되면 지우고 되면 놔두고,,이런식으로 했더니

효율이 너무 덜어지고 이해도 안됐다.

 

역시 구조를 이해해야한다고 깨달은 오늘,,

 

내일은 위젯, 요소 추가시 규칙에 대해 좀 더 터득하고 싶다!

그리고 상단탭을 만들었으니 그 안에서 페이지들이 넘어가도록!!!

지금은 탭끼리 넘어간다 ㅎ ㅜㅜ

• Assets 추가 규칙 -> pubspec.yaml 파일 assets 아래에 이렇게 추가해야한다
  • + Get Packages를 해야 제대로 불러와서 적용됨 

flutter:

[2 띄어쓰기 or 1 탭]assets:
[4 띄어쓰기 or 2 탭]- images/

 

• 색상 -> Color(0xffHexCode) : 이렇게 앞에 0xff를 넣고 그 뒤에는 우리가 흔히 아는 HexCode를 넣어주면 된다