Pada kesempatan kali ini saya akan membahas cara membuat TabBar pada Flutter. TabBar merupakan komponen penting, biasanya berisi menu yang memudahkan kita untuk berpindah halaman dengan cara melakukan slide kekanan ataupun kekiri pada layar hp. Tabs sendiri dapat kita tempatkan pada top position ataupun bottom possition dan terkadang ada juga yang menggunakan keduanya sekaligus.

Okee langsung saja..

Membuat Tabs Widget

Pertama kita import ‘package: flutter/material.dart ’ dan buat fungsi main() terlebih dahulu. Kita buat juga widget home. 

import 'package:flutter/material.dart';

void main(){
runApp(new MaterialApp(
title: "Tab Bar",
home: new Home (),
));
}

Kemudian dibawah main() kita buat kelas Home. Disini kelas Home menggunakan statefulWidget yang bersifat dinamis sehingga widget dapat dirender kembali ketika terdapat event atau user action.

Didalam kelas _HomeState kita buat nilai kembalian/ return scaffold atau di android studio sama dengan activity. Di dalam scaffold tambahkan appbar. Pada appbar kita gunakan background dengan warna red, dan buat title dengan “Catalogue Movie”, dan bottom dengan widget TabBar untuk tab yang akan kita tampilkan.

class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
backgroundColor: Colors.red,
title: new Text("Catalogue Movie"),
bottom: new TabBar(
),
),
);
}
}


Pada Appbar kita akan buat ada 4 tab, jadi kita harus buat controler terlebih dahulu. TabController berfungsi untuk mengkoordinasikan antara Tabbar dan TabbarView. Tambahkan kode berikut didalam  kelas_HomeState

TabController controller;

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

@override
void dispose() {
controller.dispose();
super.dispose();
}

Pada Appbar bagian bottom kita masukan controller yang telah dibuat tadi.
bottom: new TabBar(
controller: controller,
tabs: <Widget>[
new Tab()
],
),

Nah pada bagian ini sebelum mengisi tab, kita buat 4 halaman untuk tab nya. pilih folder lib> klik icon new file > isikan nama file dengan extention .dart contoh hal_home.dart. Pada hal_home.dart tambahkan kode berikut. buat juga halaman lain nowplaying.dart, upcoming.dartm dan favorite.dart dan copy paste kode tadi kemudian sesuaikan nama Kelas, Text dan Icon nya.

import 'package:flutter/material.dart';

class Home extends StatelessWidget{
@override
Widget build(BuildContext contect){
return new Container(
child: new Center(
child: new Column(
children: <Widget>[
new Padding(padding: new EdgeInsets.all(20.0),),
new Text("HOME", style: new TextStyle(fontSize: 30.0),),
new Padding(padding: new EdgeInsets.all(20.0),),
new Icon(Icons.home, size: 90.0,)
],
),
),
);
}
}


Kemudian pada main.dart pada Appbar Widget bagian bottom, isi tabs dengan Widget Tab.
bottom: new TabBar(
controller: controller,
tabs: <Widget>[
new Tab(icon: new Icon(Icons.home), text: "Home",),
new Tab(icon: new Icon(Icons.play_arrow), text: "NowPlaying"),
new Tab(icon: new Icon(Icons.movie), text: "UpComing"),
new Tab(icon: new Icon(Icons.star), text: "Favorite")
],
), 

Kemudian Run aplikasi dengan menekan tombol F5 atau save file. Maka tampilan akan seperti ini





Sekarang kita akan menambah halaman pada body setiap tabnya menggunakan TabView. Untuk dapat memanggil halaman yang telah kita buat tadi, kita import dulu halaman pada main dart. 

import './hal_home.dart' as home;
import './hal_nowplaying.dart' as nowplaying;
import './hal_upcoming.dart' as upcoming;
import './hal_favorite.dart' as favorite;

Kemudian buat body didalam Scaffold. Pada children kita panggil hamalan sesuai dengan tabs Widgetnya. Bagian body akan menampilkan isi halaman.

body: new TabBarView (
controller: controller,
children: <Widget>[
new home.Home(),
new nowplaying.NowPlaying(),
new upcoming.Upcoming(),
new favorite.Favorite(),
],
),

Kemudian kisa save maka hasilnya akan seperti berikut :


Kita juga bisa membuat tabbar dibagian bawah menggunakan bottomNavigationBar didalam scaffold.
bottomNavigationBar: new Material(
color: Colors.red,
child: new TabBar(
controller: controller,
tabs: <Widget>[
new Tab(icon: new Icon(Icons.home)),
new Tab(icon: new Icon(Icons.play_arrow)),
new Tab(icon: new Icon(Icons.movie)),
new Tab(icon: new Icon(Icons.star)),
],
),
)

Ketika di run, maka hasilnya akan jadi seperti ini

Kita dapat berpindah halaman dengan menggeser layar hp atau melakukan perpindahan halaman slide kekanan dan ke kiri dengan animasi yang telah tersedia pada Flutter.

Berikut Source Code Lengkap pada file main.dart

import 'package:flutter/material.dart';
import './hal_home.dart' as home;
import './hal_nowplaying.dart' as nowplaying;
import './hal_upcoming.dart' as upcoming;
import './hal_favorite.dart' as favorite;



void main(){
runApp(new MaterialApp(
title: "Tab Bar",
home: new Home (),
));
}

class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
TabController controller;

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

@override
void dispose() {
controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
backgroundColor: Colors.red,
title: new Text("Catalogue Movie"),
bottom: new TabBar(
controller: controller,
tabs: <Widget>[
new Tab(icon: new Icon(Icons.home), text: "Home",),
new Tab(icon: new Icon(Icons.play_arrow), text: "NowPlaying"),
new Tab(icon: new Icon(Icons.movie), text: "UpComing"),
new Tab(icon: new Icon(Icons.star), text: "Favorite")
],
),
),


body: new TabBarView (
controller: controller,
children: <Widget>[
new home.Home(),
new nowplaying.NowPlaying(),
new upcoming.Upcoming(),
new favorite.Favorite(),
],
),

bottomNavigationBar: new Material(
color: Colors.red,
child: new TabBar(
controller: controller,
tabs: <Widget>[
new Tab(icon: new Icon(Icons.home)),
new Tab(icon: new Icon(Icons.play_arrow)),
new Tab(icon: new Icon(Icons.movie)),
new Tab(icon: new Icon(Icons.star)),
],
),
)
);
}
}


Oke biginilah cara membuat tabbar pada flutter. Sekian tutorial kali ini semoga bermanfaat.