Image Load

Hello world,

Melanjutkan dari part sebelumnya dimana kita bisa menampilkan tabbar dengan menggunakan DefaultTabController, Kali ini kita akan menampilkan tabbar dengan menggunakan TabController dimana controller  harus didefinisikan terlebih dahulu. Dan untuk penggunaannya kita kali ini akan menggunakan statefull widget. Lihat contoh di bawah.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "Halaman",
home: new Halaman(),
));
}

class Halaman extends StatefulWidget {
const Halaman({Key key}) : super(key: key);
@override
_HalamanState createState() => _HalamanState();
}

class _HalamanState extends State<Halaman> {

@override
void initState() {
super.initState();
}

@override
void dispose() {
super.dispose();
}

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

Selanjutnya kita definisikan dulu TabController-nya seperti berikut.

TabController _tabController;

dan ada tambahan SingleTickerProviderStateMixin pada _HalamanState.

class _HalamanState extends State<Halaman> with SingleTickerProviderStateMixin {

Lalu kita jalankan TabController pada initstate dan dispose. Pada initState kita tentukan jumlah tab pada TabController dengan menentukan "length"-nya.

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

@override
void dispose() {
_tabController.dispose();
super.dispose();
}

Terakhir kita buat tab dan kontennya yang berjumlah tiga tab seperti berikut.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "Halaman",
home: new Halaman(),
));
}

class Halaman extends StatefulWidget {
const Halaman({Key key}) : super(key: key);
@override
_HalamanState createState() => _HalamanState();
}

class _HalamanState extends State<Halaman> with SingleTickerProviderStateMixin {
TabController _tabController;

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

@override
void dispose() {
_tabController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: _tabController,
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(
controller: _tabController,
children: [
Center(child: Text('Ini Tab 1')),
Center(child: Text('Ini Tab 2')),
Center(child: Text('Ini Tab 3')),
],
),

);
}
}

Preview :



Selamat mencoba :)