Membuat Tab Bar di Flutter

Pada pembahasan kali ini, Penulis akan membahas bagaimana cara membuat Tab Bar dengan beberapa halaman. Kali ini Penulis membuat empat halaman untuk icon telepon, shopping, email dan music.

Langsung saja buka aplikasi Visual Studio Code dan buat project baru dengan nama apptabbar. Kemudian masukkan source code di bawah ini ke dalam file main.dart project flutter yang sudah Anda dibuat.

import 'package:flutter/material.dart';

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

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

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {

  //create controller untuk tabBar
  TabController controller;

  @override
  
  void initState(){
    controller = new TabController(vsync: this, length: 4);
    //tambahkan SingleTickerProviderStateMikin pada class _HomeState
    super.initState();
  }

  @override
  void dispose(){
    controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      //create appBar
      appBar: new AppBar(
        //warna background
        backgroundColor: Colors.lightGreen,
         //judul
         title: new Text("Tampilan Home "),
           //bottom
           bottom: new TabBar(
             controller: controller,
             tabs: <Widget>[
               new Tab()
               
             ],
      	),
      ),
    );
  }
}

Selanjutnya buat file baru untuk source code halaman Tab Bar dari menu Home yang akan dibuat. Beri nama telepon.dart shopping.dart email.dart dan terakhir music.dart.

Setelah Anda selesai membuat file baru, silahkan masukan source code berikut ke dalam file telepon.dart :

import 'package:flutter/material.dart';

class Telepon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: Column(
          children: <Widget>[
            new Padding(padding: new EdgeInsets.all(20.0),),
            new Padding(padding: new EdgeInsets.all(20.0),),
            new Icon(Icons.phone_android,size: 90.0, color: Colors.lightBlueAccent,),
            new Text("PHONE", style: new TextStyle(fontSize: 30.0, color: Colors.lightGreen),)
          ],
        ),
      ),
    );
  }
}

Masukkan juga source code di bawah ke dalam file shopping.dart :

import 'package:flutter/material.dart';

class Shopping extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: Column(
          children: <Widget>[
            new Padding(padding: new EdgeInsets.all(20.0),),
            new Padding(padding: new EdgeInsets.all(20.0),),
            new Icon(Icons.shopping_cart,size: 90.0,color: Colors.lightBlueAccent,),
            new Text("SHOP", style: new TextStyle(fontSize: 30.0, color: Colors.lightGreen),)
          ],
        ),
      ),
    );
  }
}

email.dart :

import 'package:flutter/material.dart';

class Email extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: Column(
          children: <Widget>[
            new Padding(padding: new EdgeInsets.all(20.0),),
            new Padding(padding: new EdgeInsets.all(20.0),),
            new Icon(Icons.email,size: 90.0, color: Colors.lightBlueAccent,),
            new Text("EMAIL", style: new TextStyle(fontSize: 30.0, color: Colors.lightGreen),)
          ],
        ),
      ),
    );
  }
}

music.dart :

import 'package:flutter/material.dart';

class Music extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: Column(
          children: <Widget>[
            new Padding(padding: new EdgeInsets.all(20.0),),
            new Padding(padding: new EdgeInsets.all(20.0),),
            new Icon(Icons.queue_music,size: 90.0, color: Colors.lightBlueAccent,),
            new Text("MUSIC", style: new TextStyle(fontSize: 30.0, color: Colors.lightGreen),)
          ],
        ),
      ),
    );
  }
}

Ketika Anda run aplikasi nya maka akan tampil error seperti gambar di bawah karena tab yang sedang dibuat belum selesai.

Sekarang buka lagi file project main.dart, lalu masukkan source code seperti di bawah ini :

import 'package:flutter/material.dart';

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

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

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {

  //create controller untuk tabBar
  TabController controller;

  @override
  
  void initState(){
    controller = new TabController(vsync: this, length: 4);
    //tambahkan SingleTickerProviderStateMikin pada class _HomeState
    super.initState();
  }

  @override
  void dispose(){
    controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      //create appBar
      appBar: new AppBar(
        //warna background
        backgroundColor: Colors.lightGreen,
         //judul
         title: new Text("Tampilan Home "),
           //bottom
           bottom: new TabBar(
             controller: controller,
             //source code lanjutan
             tabs: <Widget>[
              new Tab(icon: new Icon(Icons.email),text: "Email",),
              new Tab(icon: new Icon(Icons.queue_music),text: "Music",),
              new Tab(icon: new Icon(Icons.shopping_cart),text: "Shop",),
              new Tab(icon: new Icon(Icons.phone_android),text: "Phone",), 
             ],
      	),
      ),
    );
  }
}

Setelah itu Anda run kembali aplikasi yang sedang dibuat tersebut maka sudah ada animasinya ketika di klik icon garis akan berpindah atau berjalan, maka tampilannya akan terlihat seperti video digambar ini:

Selanjutnya tambahkan source code didalam file main.dartuntuk membuat tab view nya:

//buat body untuk tab viewnya
      body: new TabBarView(
        //controller untuk tab bar
        controller: controller,
        children: <Widget>[
          //kemudian panggil halaman sesuai tab yang sudah dibuat

Setelah itu halaman-halaman yang sudah dibuat harus di-import terlebih dahulu ke dalam file main.dart.

import './email.dart' as email;
import './music.dart' as music;
import './shopping.dart' as shopping;
import './telepon.dart' as telepon;

Kemudian kembali lagi ke tab bar view panggil halaman sesuai tab yang telah dibuat di dalam main.dart pada bagian atas.

//kemudian panggil halaman sesuai tab yang sudah dibuat
          new email.Email(),
          new music.Music(),
          new shopping.Shopping(),
          new telepon.Telepon()

Untuk detail source code pada main.dart akan terlihat seperti gambar di bawah ini :

import 'package:flutter/material.dart';

import './email.dart' as email;
import './music.dart' as music;
import './shopping.dart' as shopping;
import './telepon.dart' as telepon;

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

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

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {

  //create controller untuk tabBar
  TabController controller;

  @override
  
  void initState(){
    controller = new TabController(vsync: this, length: 4);
    //tambahkan SingleTickerProviderStateMikin pada class _HomeState
    super.initState();
  }

  @override
  void dispose(){
    controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      //create appBar
      appBar: new AppBar(
        //warna background
        backgroundColor: Colors.lightGreen,
         //judul
         title: new Text("Tampilan Home "),
           //bottom
           bottom: new TabBar(
             controller: controller,
             tabs: <Widget>[
              new Tab(icon: new Icon(Icons.email),),
              new Tab(icon: new Icon(Icons.queue_music),),
              new Tab(icon: new Icon(Icons.shopping_cart),),
              new Tab(icon: new Icon(Icons.phone_android),), 
             ],
        ),
      ),
        
      //source code lanjutan
      //buat body untuk tab viewnya
      body: new TabBarView(
        //controller untuk tab bar
        controller: controller,
        children: <Widget>[
          //kemudian panggil halaman sesuai tab yang sudah dibuat
          new email.Email(),
          new music.Music(),
          new shopping.Shopping(),
          new telepon.Telepon()
        ],
      ),
    );
  }
}

Setelah selesai silahkan Anda run kembali aplikasi yang sedang dibuat, maka tampilannya akan seperti video dibawa ini, Anda dapat menekan tombol icon ataupun dapat menggesernya untuk berpindah ke halaman lain atau icon lain.

Jika Anda ingin merubah warna icon gambar, tambahkan source code seperti dibawah ini untuk merubah warna icon-nya.

telepon.dart

new Icon(Icons.phone_android,size: 90.0, color: Colors.lightGreen,),

shopping.dart

new Icon(Icons.shopping_cart,size: 90.0,color: Colors.lightGreen,),

email.dart

new Icon(Icons.email,size: 90.0, color: Colors.lightGreen,),

music.dart

new Icon(Icons.queue_music,size: 90.0, color: Colors.lightGreen,),

Jika ingin merubah warna text pada widget-nya, tambahkan source code seperti gambar di bawah ini :

telepon.dart

new Text("PHONE", style: new TextStyle(fontSize: 30.0, color: Colors.lightBlue),),

shopping.dart

new Text("SHOP", style: new TextStyle(fontSize: 30.0, color: Colors.lightBlue),),

email.dart

new Text("EMAIL", style: new TextStyle(fontSize: 30.0, color: Colors.lightBlue),)

music.dart

new Text("MUSIC", style: new TextStyle(fontSize: 30.0, color: Colors.lightBlue),),

Silahkanan run kembali aplikasinya, Anda dapat menyesuaikan warna text, gambar dan lainnya hanya menambahkan color saja.

Kemudian coba tambahkan text dibawah gambar yang ada di icon tab bar project aplikasi Anda, caranya tambahkan source code seperti dibawah ini didalam file main.dart.

new Tab(icon: new Icon(Icons.email),text: "Email",),
new Tab(icon: new Icon(Icons.queue_music),text: "Music",),
new Tab(icon: new Icon(Icons.shopping_cart),text: "Shop",),
new Tab(icon: new Icon(Icons.phone_android),text: "Phone",), 

Run kembali aplikasi dan akan terlihat seperti video berikut:

Selanjutnya, Penulis akan membuat tab bar yang ada di bagian bawah. Tambahkan lagi source code di dalam file main.dart ke dalam body.

      //untuk tab bar bagian bawah
      bottomNavigationBar: new Material(
        //warna samakan saja dengan tab bar atas
        color: Colors.lightGreen,
        child: new TabBar(
          controller: controller,
          tabs: <Widget>[
            //copy saja pada bagian atas tab bar
            //hilangkan text agar lebih simple atau sesuka Anda
            new Tab(icon: new Icon(Icons.email),),
            new Tab(icon: new Icon(Icons.queue_music),),
            new Tab(icon: new Icon(Icons.shopping_cart),),
            new Tab(icon: new Icon(Icons.phone_android),), 
          ],
        ),
      ),

Run kembali aplikasi, maka tampilannya akan seperti video di bawah ini:

Selamat mencoba.

Referensi:

Flutter-tab-bar