Flutter Tab

Tab adalah bagian dari antarmuka pengguna yang digunakan untuk menavigasi pengguna melalui route yang berbeda (misalnya, halaman) ketika diklik. Penggunaan tab dalam aplikasi adalah praktik standar yang sudah biasa dilakukan dibanyak aplikasi. Flutter menyediakan cara sederhana untuk membuat tata letak tab menggunakan library material. Dalam artikel ini, kita akan menjelajahi hal yang sama secara detail.

Untuk memahami konsep tab dan fungsinya dalam aplikasi Flutter dengan lebih baik, mari kita bangun sebuah aplikasi sederhana dengan 5 tab dengan mengikuti langkah-langkah di bawah ini:

Merancang TabController.
Menambahkan Tab pada Aplikasi.
Menambahkan konten pada setiap Tab.

Dalam artikel ini, kita akan membahas masing-masing langkah dengan lebih detail.

Merancang TabController

TabController mengontrol fungsi dari setiap tab dengan menyinkronkan tab dan konten satu sama lain, sesuai dengan namanya. Salah satu cara termudah untuk membuat tab di Flutter adalah dengan menggunakan widget DefaultTabController. Berikut adalah contoh implementasinya:

DefaultTabController(
// total ada 5 tab jadi tambahkan angka 5 ke length
   length: 5,
  child:
);

Menambahkan Tab

Untuk membuat sebuah tab di Flutter, dapat menggunakan widget TabBar seperti contoh di bawah ini:

home: DefaultTabController(
length: 5,
child: Scaffold(
	appBar: AppBar(
	bottom: const TabBar(
		tabs: [
		Tab(icon: Icon(Icons.music_note)),
		Tab(icon: Icon(Icons.music_video)),
		Tab(icon: Icon(Icons.camera_alt)),
		Tab(icon: Icon(Icons.grade)),
		Tab(icon: Icon(Icons.email)),
		],
	), //TabBar

Menambahkan Konten pada Setiap Tab

Widget TabBarView dapat digunakan untuk menentukan konten yang akan ditampilkan di setiap tab. Untuk mempermudah, kita akan menampilkan ikon di dalam setiap tab sebagai pengganti teks, seperti yang ditunjukkan di bawah ini:

body: const TabBarView(
		children: [
			Icon(Icons.music_note),
			Icon(Icons.music_video),
			Icon(Icons.camera_alt),
			Icon(Icons.grade),
			Icon(Icons.email),
		],
		), // TabBarView

Source code lengkapnya dapat dilihat dibawah ini

import 'package:flutter/material.dart';

// fungsi untuk mentrigger proses build aplikasi flutter
void main() {
  runApp(const TabBarDemo());
}

// class yang digunakan untuk build aplikasi
class TabBarDemo extends StatelessWidget {
  const TabBarDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, //Untuk menghilangkan banner debug
      home: DefaultTabController(
        length: 5,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(icon: Icon(Icons.music_note)),
                Tab(icon: Icon(Icons.music_video)),
                Tab(icon: Icon(Icons.camera_alt)),
                Tab(icon: Icon(Icons.grade)),
                Tab(icon: Icon(Icons.email)),
              ],
            ),
            title: const Text('Nextgen Tutorial'),
            backgroundColor: Colors.blue,
          ),
          body: const TabBarView(
            children: [
              Icon(Icons.music_note),
              Icon(Icons.music_video),
              Icon(Icons.camera_alt),
              Icon(Icons.grade),
              Icon(Icons.email),
            ],
          ),
        ),
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Flutter RichText
Tutorial setelahnya : Flutter ListView
Semua Tutorial Flutter : Tutorial Flutter

Merancang TabController

Menambahkan Tab

Menambahkan Konten pada Setiap Tab

Tinggalkan Balasan