[Flutter] 플러터 DefaultTabController 버튼으로 index 컨트롤하기 / change index using Controller

플러터에서 옆으로 넘길 수 있는 바를 구현할 때 AppBar가 없는 바를 만들고 싶다면, DefaultTabController를 이용할 수 있다. 오늘 이 게시글에서는 

 

1. DefaultTabController를 이용해서 화면 중간에 옆으로 넘길 수 있는 부분 만들기

2/. DefaultTabController의 인덱스를 마음대로 조정할 수 있게 Controller 설정하기

 

이 두가지에 대해 알아보겠다. 

 

 

 

 

 

1. DefaultTabController로 화면 중간에 옆으로 넘길 수 있는 부분 만들기

DefaultTabController Example

아래와 같이 DefaultTabController를 Column 안에 넣으면 화면 중간에 옆으로 넘길 수 있는 바를 구현할 수 있다. DefaultTabController의 child로 SizedBox를 사용했는데, 그낭 TabBar만 사용했을 때 에러가 날 경우, SizedBox로 감싸줘서 높이를 지정해주면 된다. 

반응형

DefaultTabController(
  length: 3,
  child: SizedBox(
    height: 500.h,
    child: Column(
      children: [
        SizedBox(
          height: 45.h,
          child: TabBar(
            indicatorColor: Colors.black,
            labelColor: Colors.black,
            unselectedLabelColor: Colors.grey,
            tabs: <Widget>[
              Container(child:Text("소식", style: TextStyle(fontSize: 16.sp),), ),
              Container(child: Text("친구", style: TextStyle(fontSize: 16.sp),),),
              // 탐색
              Container(child: Text("  ", style: TextStyle(fontSize: 16.sp),),),
            ],
          ),
        ),

        Expanded(
          child: TabBarView(
            children: [
              NewsPage(),
              Friend(),
              Scaffold(
                backgroundColor: color3,
              ),
            ],
          ),
        ),
      ],
    ),
  )),

Expanded도 SizedBox를 통해 높이를 지정해주지 않으면 에러가 발생할 수 있다. (위의 코드에서는 TabBar와 Expanded를 함께 감싸는 SizedBox와 TabBar만 감싸는 SizedBox를 만들어줌으로써 TabBar와 Expanded 모두 각자의 크기를 지정받았다. )

 

length가 Expanded 및 TabBar 개수와 동일해야한다. 

 

 

 

 

 

 

 

2. DefaultTabController의 인덱스를 조정하기 위한 Controller 설정하기

with TickerProviderStateMixin

구문을 extends State 옆에 추가해준다. 그리고 이 클래스 안에 initState를 추가해주는데, 아래와 같이 TabController를 초기화 시켜준다. 

late TabController _tabController;

@override
void initState() {
  super.initState();
  _tabController = new TabController(vsync: this, length: 3);
}

플러터에서 옛날 버전은 late 구문을 사용하지 않아도 되지만, 최신 버전은 null safety에 의하여 late 구문을 사용하는 등 조취를 취해주어야한다. (옛버전에서 구현된 레퍼런스를 참고할 때 기억해두길 바란다. )

 

어쨌든 extends State 옆에 추가한 with 이하의 구문이 없었으면 vsync : this 코드에서 에러를 뱉어내니 주의한다. 

 

index를 바꾸었을 때 상태를 적용시킬 TabBar와 Expanded에 controller을 위에서 정의해준 controller로 넣어준다. 

TabBar와  Expanded에 둘 다 넣어주자

TabBar와  Expanded에 둘 다 넣어주여야, index가 바뀌었을 때 하나만 바뀌는 상황이 생기지 않는다 . 동시에 컨트롤 하고 싶은 게 많다면, controller 속성에 다 동일한 controller를 넣어주면 된다.

아래와 같이, onPressed 함수 안에 setState로 코드를 감싸준다. controller.index = (인덱스); 코드를 사용해서 버튼으로 인덱스가 바뀌도록 구현했다 !

setState(() {
          _tabController.index = 1;
        });

인덱스 정보를 포함한 텍스트 구현

Text("${_tabController.index+1}/3")

 

 

 

---

오류, 질문이 있으면 댓글달아주세요

구독은 항상 환영입니다 :)

---