How to Custom ButtonTabbar

Bismillah, Halo Assalamu’alaikum Warahmatullahi Wabarakatuh Sobat Uda dan Uni..

Pada artikel kali ini kita akan menggunakan salah satu library Tab Bar yaitu Button Tabbar, Tab Bar merupakan material widget yang menampilkan Tab dalam bentuk Row atau baris. Nah, sebagai contoh sederhana kita akan membuat custom Tab Bar seperti berikut :

Untuk membuat Tab Bar seperti contoh diatas, kita perlu menambahkan library button tab bar terlebih dahulu di pubspec.yaml

  buttons_tabbar: ^1.3.1

Setelah klik Pub Get kita bisa melanjutkan untuk membuat kodingannya. Pertama-tama kita tambahkan kodingan seperti berikut :

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import 'package:buttons_tabbar/buttons_tabbar.dart';

class LearnTabbar extends StatefulWidget {
  const LearnTabbar({Key? key}) : super(key: key);

  @override
  _LearnTabbarState createState() => _LearnTabbarState();
}

class _LearnTabbarState extends State<LearnTabbar>
    with SingleTickerProviderStateMixin {
  TabController? _tabController;

  int? _activeIndex = 0;

  @override
  void initState() {
    _tabController = new TabController(length: 3, vsync: this);

    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _tabController?.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _tabController?.addListener(() {
      setState(() {
        _activeIndex = _tabController?.index;
      });
    });
    return Scaffold(
       );
  }
}

Pada kodingan diatas kita menambahkan TabController sebagai Controller untuk Tab Bar dan didalam method iniState kita panggil tabControleer dengan menambahkan properti length untuk memberikan nilai atau banyak Tab yang akan kita tambahkan dan vsync dapat digunakan untuk transisi atau animasi tertentu untuk dirender ulang untuk menggambar objek yang berbeda. karena ketika kita klik tab tertentu kita melakukan perubahan pada warna Icon Star.

Oiya pada contoh diatas kita juga menggunakan Stateless dan untuk membuat animasi controller pada State kita membutuhkan SingleTickerProviderStateMixin.

Function Dispose digunakan ketika melepaskan Tab bar yang kita pilih, sehingga mengembalikan style Tab yang kita pilih menjadi style ketika ia tidak sedang di pilih atau di klik.

Nah untuk menggunakan method dan controller yang telah kita deklarasikan, kita perlu memanggilnya kembali di Widget class.

Selanjutnya kita bisa menambahkan untuk UI seperti gambar diatas:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import 'package:buttons_tabbar/buttons_tabbar.dart';

class LearnTabbar extends StatefulWidget {
  const LearnTabbar({Key? key}) : super(key: key);

  @override
  _LearnTabbarState createState() => _LearnTabbarState();
}

class _LearnTabbarState extends State<LearnTabbar>
    with SingleTickerProviderStateMixin {
  TabController? _tabController;

  int? _activeIndex = 0;

  @override
  void initState() {
    _tabController = new TabController(length: 3, vsync: this);

    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _tabController?.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _tabController?.addListener(() {
      setState(() {
        _activeIndex = _tabController?.index;
      });
    });
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.white,
          elevation: 0,
          title: Text(
            'Tabbar',
            style: TextStyle(color: Colors.black),
          ),
          leading: IconButton(
            icon: Icon(
              Icons.arrow_back,
              color: Colors.black,
            ),
            onPressed: () => Navigator.pop(context),
          ),
        ),
        body: Padding(
          padding: EdgeInsets.all(20),
          child: Column(
            children: [
              Container(
                decoration: BoxDecoration(color: Colors.white),
                


               child: ButtonsTabBar(
                  physics: ClampingScrollPhysics() ,
                  controller: _tabController,
                  decoration: BoxDecoration(
                      border: Border.all(width: 2, color: Colors.black),
                      borderRadius: BorderRadius.circular(8)),
                  contentPadding:
                  EdgeInsets.symmetric(vertical: 8, horizontal: 8),
                  unselectedBackgroundColor: Colors.grey[300],
                  unselectedLabelStyle: TextStyle(color: Colors.grey),
                  labelStyle: TextStyle(color: Color(0xff4F4F4F)),
                  height: 56,
                  tabs: [
                    Tab(
                      icon: Image.asset('assets/image/star.png',
                          height: 17,
                          color: _tabController!.index == 0
                              ? Color(0xffFABA00)
                              : Colors.grey),
                      text: 'Tab 1',                    ),
                    Tab(
                      icon: Image.asset('assets/image/star.png',
                          height: 17,
                          color: _tabController!.index == 1
                              ? Color(0xffFABA00)
                              : Colors.grey),
                      text: 'Tab 2',
                    ),
                    Tab(
                      icon: Image.asset('assets/image/star.png',
                          height: 17,
                          color: _tabController!.index == 2
                              ? Color(0xffFABA00)
                              : Colors.grey),
                      text: 'Tab 3',
                    ),
                    //
                  ],
                  //    indicatorSize: TabBarIndicatorSize.tab,
                ),
              ),
              Expanded(
                child: TabBarView(

                  children: [
                    Center(child: Text('1', style: TextStyle(fontSize: 50),)),
                    Center(child: Text('2', style: TextStyle(fontSize: 50),)),
                    Center(child: Text('3', style: TextStyle(fontSize: 50),)),


                  ],
                  controller: _tabController,
                ),
              ),
            ],
          ),
        ));
  }
}

Karena menggunakan Button Tab Bar kita bisa langsung menambahkan style Tab ketika dipilih secara langsung tanpa menggunakan properti indicator dan untuk menambahkan Icon dan Text Tab Bar setiap page kita bisa tambahkan di dalam ButtonTabBar pada properti tabs:[ ] . Didalam tabs ini lah kita tambahkan masing tab yang kita butuhkan. Jika Jumlah tabs ada tiga berarti pada TabBarView kita perlu menambahkan tiga komponen juga pada list tersebut. Lalu jangan lupa untuk menambahkan controller pada ButtonTabBar dan TabBarView.

Nah setelah semua kodingan ditambahkan, ketika di Run maka akan tambil sebuat TabBar yang jika di klik makan warna icon, text style dan warna containerny akan berubah.

Ok teman-teman, sekian tutorial kali ini.. sampai jumpa di artikel berikutnya, semoga bermanfaat ^ ^

Subscribe

Related articles

Tips Kolaborasi Efektif antara UI/UX Desainer dan Pengembang

Kerja sama yang solid antara UI/UX desainer dan pengembang...

Aturan Penting yang Harus Dipatuhi oleh Seorang UI/UX Designer

Desain Antarmuka Pengguna (UI) dan Pengalaman Pengguna (UX) adalah...

Membangun Profil LinkedIn yang Mengesankan untuk UI/UX Designer

Dalam era digital yang semakin maju, LinkedIn telah menjadi...

Meningkatkan Karir Anda dengan Sertifikasi Google UX

Dalam dunia yang semakin terhubung secara digital, pengalaman pengguna...

Perjalanan Seorang Intern UI/UX Desainer di Udacoding

Sebagai seorang mahasiswa yang bersemangat dan bercita-cita tinggi di...

LEAVE A REPLY

Please enter your comment!
Please enter your name here