NAMA : RAHMAT JULIANTO

NPM : 2018020001
KELAS : TI-IX MALAM

1. Tab Bar adalah komponen/widget bersifat stateful, di mana berfungsi

untuk menampilkan menu dan menu-menu itu akan menampilkan
masing-masing halaman. Menu-menu dapat berupa informasi, bantuan,
layanan, dan fitur-fitur utama lainnya. Blog ini akan membahas cara Tab
Bar.

2. Flutter adalah platform yang digunakan para developer untuk membuat

aplikasi multiplatform hanya dengan satu basis coding (codebase).
Artinya, aplikasi yang dihasilkan dapat dipakai di berbagai platform, baik
mobile Android, iOS, web, maupun desktop. 

Flutter memiliki dua komponen penting, yaitu, Software Development

Kit (SDK) dan juga framework user interface. 

 Software Development Kit (SDK) merupakan sekumpulan tools

yang berfungsi untuk membuat aplikasi supaya bisa dijalankan di
berbagai platform. 
 Framework UI merupakan komponen UI, seperti teks, tombol,
navigasi, dan lainnya, yang dapat Anda kustomisasi sesuai kebutuhan. 

Cara Membuat Custom TabBar di Flutter

1. Buatlah sebuah project flutter baru dengan menekan ctrl + shift + P
secara bersamaan → flutter new project → pilih folder(bebas) → beri
nama project "latihan_tab_bar".

2. Buka main.dart, lalu ganti isinya dengan script yang ada di bawah ini.
Penjelasan tentang script sudah saya sertakan di dalam script di bawah ini
dan tabel penjelas.

Cara Membuat Custom TabBar di Flutter

 Buatlah sebuah project flutter baru dengan menekan ctrl + shift + P

secara bersamaan → flutter new project → pilih folder(bebas) → beri
nama project "latihan_tab_bar".
  Buka main.dart, lalu ganti isinya dengan script yang ada di bawah ini.
Penjelasan tentang script sudah saya sertakan di dalam script di bawah
ini dan tabel penjelas.

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

//karena kita akan menggunakan tabbar maka perlu mengimplementasikan

stateful bukan stateless

class MyApp extends StatefulWidget {

@override

State<MyApp> createState() => _MyAppState();

class _MyAppState extends State<MyApp> {

@override

Widget build(BuildContext context) {

return MaterialApp(

//untuk mengahpus banner debug

debugShowCheckedModeBanner: false,

//untuk memberi warna hijau pada appbar

theme: ThemeData(

primarySwatch: Colors.green,

),
 //untuk membuat tabcontroller pertama kita menggunakan
defaultabcontroller

home: DefaultTabController(

//menentukan total tab

length: 5,

child: Scaffold(

appBar: AppBar(

// tambahkan tabbar di bawah bottom agar membuat tab bar di

bawah title appbar

bottom: TabBar(

tabs: [

//membuat tabbar dengan text

Tab( text: "Flights"),

//membuat tabbar dengan icon

Tab(icon: Icon(Icons.train)),

//membuat tabbar dengan text dan icon

Tab(text: "Hotels", icon: Icon(Icons.hotel),),

Tab(text: "Foods"),

Tab(text: "Parks"),

],

//jika tab bar terlalu panjang dapat discroll ke samping

 isScrollable: true,

//menentukan padding label sehingga memberikan jarak kiri

dan kanan sebesar 30

labelPadding: EdgeInsets.only(left: 30, right: 30),

//jika label tidak diselect maka akan diberi warna kuning

unselectedLabelColor: Colors.yellow,

),

title: Text('Flutter TabBar'),

),

//gunakanm tabbarview untuk membuat isi dari setiap tab

//pastikan jumlah tab dan jumlah isi sama agar tidak terjadi
error

//kalian boleh mengisi tabbarview secara custom

body: TabBarView(

children: [

Center(

child: Text("Flights"),

),

Center(

child: Text("Trains"),

),

Center(

child: Text("Hotels"),

),
 Center(

child: Text("Foods"),

),

Center(

child: Text("Parks"),

),

],

),

),

),

);

Tabel Penjelas
# Syntax/Script Keterangan
theme: ThemeData(
    primarySwatch: Colors.green, Digunakan untuk memberi background warna
1  ), hijau di appbar
untuk membuat tabcontroller pertama kita
2 DefaultTabController(…..) menggunakan defaultabcontroller
3 length: 5 Total tab
Menambahkan tabbar di bawah bottom agar
4 bottom: TabBar(…..) membuat tab bar di bawah title appbar
tabs: [
    Tab( text: "Flights"),
    …..
5 ] Membuat tab
jika tab bar terlalu panjang dapat discroll ke
6 isScrollable: true, samping
labelPadding: EdgeInsets.only(
    left: 30, right: 30 menentukan padding label sehingga
7 ), memberikan jarak kiri dan kanan sebesar 30
jika label tidak diselect maka akan diberi
8 unselectedLabelColor: Colors.yellow, warna kuning
TabBarView( Membuat isi dari setiap tabbar, kalian bisa
    children: [ ….. ] melakukan kustomisasi dengan berbagai
9 ) widget yang ada.
 Selanjutnya tinggal kalian jalankan project ini. Hasilnya akan tampak
seperti gambar di bawah ini.