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