TabBar adalah salah satu widget yang disediakan oleh flutter untuk membuat layout dengan model tab yang umumnya terdapat pada aplikasi android. Biasanya TabBar ditampilkan di bagian bawah appbar. Tabbar biasanya digunakan untuk menklasifikasikan atau mengkategorikan konten, hal ini tentu membuat user lebih cepat dalam menavigasi konten-konten yang berbeda melalui tab. Whatsapp adalah salah satu contoh aplikasi yang menggunakan TabBar, berisi tab camera, chat, status dan panggilan.
Pertama dan yang paling utama sebelum kita masuk tutorial adalah kita harus membuat project flutter terlebih dahulu
Selanjutnya ubah kode pada file di lib/main.dart menjadi seperti kode di bawah ini :
// Top Tab Bar View Flutter Gesture
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 100 Days',
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
int _selectedIndex = 1;
// set up the button
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _setTime() {
print('Set Time');
}
void _addTime() {
print('ADD TIME');
}
void itemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(tabs: [
Tab(icon: Icon(Icons.directions_railway)),
Tab(icon: Icon(Icons.directions_subway)),
Tab(icon: Icon(Icons.directions_bike)),
]),
title: Text("Tab Bar")),
body: TabBarView(children: [
// Taruh Layout Kamu Disini
Icon(Icons.directions_railway),
Icon(Icons.directions_subway),
Icon(Icons.directions_bike),
]))));
}
}
Jika anda telah menuliskan kode di atas silahkan jalankan kode Flutter yang telah kita tulis, pastikan kamu sudah menjalankan Simulator, Emulator maupun sudah terhubung ke Real Device Android/iOS
