Tabs adalah pengelompokan konten yang sering sekali ditampilkan menggunakan tabs. Sebut saja, Whatsapp, Youtube, Facebook, Instagram, Tabs biasanya ditempatkan pada top position ataupun bottom position dan mungkin juga menggunakan keduanya. Tabs membuat sekat agar dapat memuat lebih banyak konten dalam satu halaman.
1. Start a new Flutter project
2. Pilih flutter pplication
3. Konfigurasi project anda
4. Buat directory baru dengan nama gambar dan isikan beberapa gambar didalamnya
5. Pada pubspec.yaml edit pada assets
6. Edit main.dart menjadi seperti ini
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: DefaultTabController(
length: 8,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepPurpleAccent,
title: Center(child: Text('Tab Bar Scroll')),
bottom: TabBar(
isScrollable: true,indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 15.0),
insets: EdgeInsets.symmetric(horizontal:10.0)
),
tabs: [
new Tab(icon: new Image.asset('gambar/shuttlecock.png')),
new Tab(icon: new Image.asset('gambar/football.png')),
new Tab(icon: new Image.asset('gambar/basketball.png')),
new Tab(icon: new Image.asset('gambar/volleyball.png')),
new Tab(icon: new Image.asset('gambar/tennis.png')),
new Tab(icon: new Image.asset('gambar/bowling.png')),
new Tab(icon: new Image.asset('gambar/golf.png')),
new Tab(icon: new Image.asset('gambar/ping-pong.png')),
],
),
),
body: TabBarView(
children: [
Image.asset('gambar/shuttlecock.png'),
Image.asset('gambar/football.png'),
Image.asset('gambar/basketball.png'),
Image.asset('gambar/volleyball.png'),
Image.asset('gambar/tennis.png'),
Image.asset('gambar/bowling.png'),
Image.asset('gambar/golf.png'),
Image.asset('gambar/ping-pong.png'),
],
),
),
),
);
}
}
7. Penjelasan kode
home: DefaultTabController(
length: 8,
//ada 8 tabs yang dideklarasi, sehingga untuk tabs dan juga pada view pastikan sesuai dengan yang dideklarasi yaitu 8
-------------------
isScrollable: true,// agar tabs bisa di scroll
------------------
UnderlineTabIndicator(
//sebagai penanda di setiap menu (ini sangat berpengaruh agar user tahu sedang berada di menu yang mana user berada)
borderSide: BorderSide(width: 15.0),
insets: EdgeInsets.symmetric(horizontal:10.0)
),
-------------------
tabs: [//pastika tabs ada 8 tidak boleh lebih maupung kurang
new Tab(icon: new Image.asset('gambar/shuttlecock.png')),
new Tab(icon: new Image.asset('gambar/football.png')),
new Tab(icon: new Image.asset('gambar/basketball.png')),
new Tab(icon: new Image.asset('gambar/volleyball.png')),
new Tab(icon: new Image.asset('gambar/tennis.png')),
new Tab(icon: new Image.asset('gambar/bowling.png')),
new Tab(icon: new Image.asset('gambar/golf.png')),
new Tab(icon: new Image.asset('gambar/ping-pong.png')),
],
-------------------
body: TabBarView(
//pastika view ada 8 tidak boleh lebih maupung kurang
children: [
Image.asset('gambar/shuttlecock.png'),
Image.asset('gambar/football.png'),
Image.asset('gambar/basketball.png'),
Image.asset('gambar/volleyball.png'),
Image.asset('gambar/tennis.png'),
Image.asset('gambar/bowling.png'),
Image.asset('gambar/golf.png'),
Image.asset('gambar/ping-pong.png'),
],
),
),