[Flutter][70] Menampilkan Tab Bar (part 3) Tabbar di dalam Body

Hello world,

Pada part ke-3 ini saya ingin mencoba menjelaskan bagaimana jika tabbar diposisikan di dalam body. Sebelumnya semua tabbar selalu ada di AppBar. Karena saya penasaran dan karena kebutuhan saya untuk membuat apliksi yang memiliki tabbar di dalam body dan bukan yang di Appbar, maka saya coba mengulik sedikit mengenai Tabbar. Dan ternyata hasilnya bisa digunakan di dalam body. Penerapannya bisa kita lihat pada beberapa aplikasi yang memiliki tabbar seperti Whatsapp (versi android), atau seperti Instagram (halaman profil yang memiliki tab di bawah detail profil).  

Oke langsung saja kita coba dengan memulai dengan beberapa tahap seperti berikut.

Tahap 1. Buat halaman

Halaman kita buat standar saja dengan statefull widget. 

import 'package:flutter/material.dart';

class TabbarBody extends StatefulWidget {
  @override
  _TabbarBodyState createState() => _TabbarBodyState();
}

class _TabbarBodyState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Tabbar Body"),
      ),
      body: Container(),
    );
  }
}

Tahap 2. Buat Tabbar dan Tab

Buat Tabbbar dan TabbarView dengan bentuk sederhana seperti berikut. Kita gunakan DefaultTabController untuk controllernya. 

     DefaultTabController(
        length: 3,
        child: Column(
          children: [
            Container(
              child: TabBar(
                labelColor: Colors.black,
                tabs: [
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                  Tab(text: 'Tab 3'),
                ],
              ),
            ),
            Expanded(
              child: TabBarView(
                children: [
                  Container(
                    child: Center(
                      child: Text("Tab 1"),
                    ),
                  ),
                  Container(
                    child: Center(
                      child: Text("Tab 2"),
                    ),
                  ),
                  Container(
                    child: Center(
                      child: Text("Tab 3"),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

Selanjutnya kita pasang Tabbar pada body menjadi seperti berikut:

import 'package:flutter/material.dart';

class TabbarBody extends StatefulWidget {
  @override
  _TabbarBodyState createState() => _TabbarBodyState();
}

class _TabbarBodyState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Tabbar Body"),
      ),
      body: DefaultTabController(
        length: 3,
        child: Column(
          children: [
            Container(
              child: TabBar(
                labelColor: Colors.black,
                tabs: [
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                  Tab(text: 'Tab 3'),
                ],
              ),
            ),
            Expanded(
              child: TabBarView(
                children: [
                  Container(
                    child: Center(
                      child: Text("Tab 1"),
                    ),
                  ),
                  Container(
                    child: Center(
                      child: Text("Tab 2"),
                    ),
                  ),
                  Container(
                    child: Center(
                      child: Text("Tab 3"),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Dan hasilnya akan menjadi seperti berikut:

Selanjutnya saya akan coba buat contoh untuk membuat tabbar seperti pada halaman profil instagram.

Selamat mencoba :)