[Flutter]TabBar 만들기

 

이번시간엔 간단한 상단의 TabBar와 TabBarView를 만들어보자.

 

먼저 완성된 화면을 보면 3개의 탭과 탭바뷰가 있다.

상단 버튼을 눌러도 이동하고, 좌우로 스와이프를 해도 해당 화면으로 변경된다.

우선 프로젝트를 하나 만들어보자.

 

 

<main.dart>

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              Tab(text: "전화"),
              Tab(text: "주소록"),
              Tab(text: "기록"),
            ],
          ),
        ),
      body: TabBarView(
        children: [
          Icon(Icons.call),
          Icon(Icons.account_box),
          Icon(Icons.assignment_outlined),
        ],
      ),
      ),
    ));
  }
}

위 코드에 보이는 것처럼

 

appBar 부분에 TabBar를 사용해 상단에 텍스트를 만들어 주었고, 

body 부분에 TabBarView를 사용해 해당화면에 들어갈 아이콘을 만들어 주었다.