Image Load

Hello world,

Kita mungkin sering menemukan aplikasi-aplikasi yang menggunakan tabbar pada halaman-halaman tertentu seperi contohnya whatsapp (versi android). Selain karena bisa membuat aplikasi kita menjadi lebih simple, pengguna juga akan dimudahkan karena untuk berpindah dari satu halaman ke halaman lain yang ada di dalam tabbar hanya dengan swipe-swipe kanan/kiri saja. Untuk contoh kali ini kita akan menggunakan DefaultTabController sebagai controllernya. Untuk versi lainnya akan saya buat di part ke-2.

Langkah pertama yang harus  kita buat adalah halaman dasarnya. Seperti biasa kita buat stateless widget saja. Lihat contoh di bawah.

import 'package:flutter/material.dart';

void main() {
runApp(Halaman());
}

class Halaman extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tabbar'),
),
body: Text('Hello')
);
}
}

Kemudian kita buat tabbarnya. Di sini sederhana saja kita buat tiga tab berisi text pada tiap-tiap halamannya. Kita bungkus dulu Scaffold-nya dengan DefaultTabController seperti contoh berikut.

import 'package:flutter/material.dart';

void main() {
runApp(Halaman());
}

class Halaman extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,

child: Scaffold(
appBar: AppBar(
title: Text('Tabbar'),
),
body: Text('Hello')
),
),

);
}
}

Pada code di atas ada "length" yang bernilai "3" yang artinyay jumlah tab kita nanti ada tiga. Lalu kita tambahkan Tabbar dan kontennya seperti berikut.

class TabBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.access_time), text: 'Tab 1'),
Tab(icon: Icon(Icons.access_alarms), text: 'Tab 2'),
Tab(icon: Icon(Icons.account_circle), text: 'Tab 3'),
],
),

title: Text('Tabbar'),
),
body: TabBarView(
children: [
Center(child: Text('Ini Tab 1')),
Center(child: Text('Ini Tab 2')),
Center(child: Text('Ini Tab 3')),
],
),

),
),
);
}
}

Dengan menggunakan DefaultTabController kita tidak perlu mendefinisikan TabController lagi karena sudah diatur secara otomatis oleh DefaultTabController. Pada postingan selanjutnya saya coba bahas TabBar dengan cara lain yang menggunakan TabController.

Preview:



Selamat mencoba :)