Flutter : DefaultTabController - 탭바 만들기...!

탭뷰를 만드는 방법은 크게 두가지가 있다. 

 

1. DefaultTabController

2. bottomNavigationBar 

 

2번 방법은 index, controller가 필요하다. 그래서 하드코드이다. 

 

1번방법은 저 위젯안에 index, controller가 다 들어있다. 그래서 간편하다 

사용방법은 

 

Scaffold를 DefaultTabController 로 감싸준다. 

화면 갯수를 length로 맞춰주고 

Tapbar 위젯에 갯수에 맞는 위젯을 만들어 준다. 

 

그럼 끝...!!

이렇게 간단할 수가!!!!!!!!!!!

 

 

 

DefaultTabController(length: 2,
       child: Padding(
         padding: const EdgeInsets.all(8),
         child: Scaffold(
           backgroundColor: Colors.grey[300],
           appBar: AppBar(
             title: Text('TO.DO'),
             centerTitle: true,
           ),
      bottomNavigationBar: Container(
        height: 50,
        color: Colors.white,
        child: TabBar(
          indicator: BoxDecoration(
            border: Border(
              top: BorderSide(
                color: Colors.blue,
                width: 3,
              )
            )
          ),
          tabs:<Widget> [Text("미완료",style: TextStyle(color: Colors.black),),
          Text("완료",style: TextStyle(color: Colors.black),),],

        ),
      ),
      floatingActionButton: FloatingActionButton(backgroundColor: Colors.white70,
        splashColor: Colors.white54,
        onPressed: (){}, child: Icon(Icons.add,color: Colors.black,),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.miniEndDocked,


      body:

        TabBarView(
            children:[
              Container(width: double.infinity,
                  height: 300,
                  child: Text('TodoPage')),
              Container(width: double.infinity,
                  height: 300,

                  child: Text("CompeltePage")),
            ],