Flutter-TabBar

위 사진과 같은 정적인 화면을 여러 개로 탭으로 보여줄 때 사용하는 TabBar를 구현해보겠습니다.

 

import 'package:flutter/material.dart';

class MyTabController extends StatefulWidget {
  @override
  _MyTabControllerState createState() => _MyTabControllerState();
}

class _MyTabControllerState extends State<MyTabController> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      child: Scaffold(
        appBar: AppBar(
          title: Text('TabBar'),
          bottom: TabBar(tabs: [
            Tab(icon: Icon(Icons.access_alarm),text: 'tab1',),
            Tab(icon: Icon(Icons.account_circle),text: 'tab2',),
            Tab(icon: Icon(Icons.camera),text: 'tab3',)
          ],
          ),
        ),
        body:TabBarView(children: <Widget>[
          Icon(Icons.access_alarm),
          Center(child: Text('tab2')),
          Center(child: Text('tab3'))
        ],),
      ),
      length: 3,
    );
  }
}

 

1.DefalutTabController로 scaffold를 감싸준다 

2.tab칸을 몇개를 만들지 정하기 위해 length를 설정한다

3.appbar 아래에 만들기 위해 appbar 안에다 bottom: TabBar를 설정하고 각 tab마다 아이콘이랑 텍스트를 설정한다.

4. 각 tab마다 보여줄 화면을 만들어 준다.