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.

```dart
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`` :

```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`` :

```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`` :

```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`` :

```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.

![](https://i.imgur.com/hzAeraP.jpg)



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

```dart
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:

![](https://i.imgur.com/ZMC1Bqm.gif)

Selanjutnya tambahkan source code didalam file ``main.dart``untuk membuat *tab view* nya:

```dart
//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``.

```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.

```dart
//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 :

```dart
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.

![](https://i.imgur.com/5PUrDLL.gif)



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

``telepon.dart``

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

``shopping.dart``

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

``email.dart``

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

``music.dart``

```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``

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

``shopping.dart``

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

``email.dart``

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

`music.dart`

```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`.

```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:



![](https://i.imgur.com/P5LFKzP.gif)





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

```dart
      //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:

![](https://i.imgur.com/hPbWPoC.gif)





Selamat mencoba.

Referensi: 

[Flutter-tab-bar](https://www.youtube.com/watch?v=Zd5AyGESzxU)

Membuat Tab Bar di Flutter

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Program Beasiswa Belajar Generative AI Chapter 4 hadir sebagai kelanjutan dari komitmen jangka panjang kolaborasi antara CODEPOLITAN dengan mitra global: Google.org, AVPN, dan Asian Development Bank (ADB). Program ini tetap dijalankan secara terpusat melalui ekosistem RuangAI.

Pada Chapter 4 ini, kami membawa semangat kolaborasi ke tingkat yang lebih tinggi. Selain tetap menyediakan kurikulum fundamental Generative AI berstandar Google untuk empat kategori utama peserta (Mahasiswa, Pencari Kerja, Siswa Vokasi, dan UMKM), RuangAI kini melakukan ekspansi strategis dengan menggandeng berbagai komunitas di seluruh Indonesia.

Program beasiswa fundamental Generative AI berstandar Google untuk Mahasiswa, Pencari Kerja, Siswa Vokasi, dan UMKM yang siap naik level di era AI.

Membuat Tab Bar di Flutter

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Robouts, Kapal Robot Pintar Berteknologi IoT

Membuat Alarm Elektronik Menggunakan Arduino dengan Sensor Ultrasonik dan MP3 Module

Belajar Flutter Di Visual Studio Code : Membuat kelas DropdownButton

Mengakses Database SQLite dengan Flutter

Navigation dan Routes Pada Flutter

Membuat Aplikasi Menggambar di Flutter