Part 4 | nav_active.dart

Setelah main.dart selesai dibuat kali ini yang akan saya buat adalah bagian BottomNavigationBar( ) yang biasanya hanya berbentuk Icon disertai dengan label yang akan mengarahkan kepada menu utama dari halaman yang tersedia.

pada folder lib/navigations saya membuat sebuah file dart baru yang diberi nama nav_active.dart.

yang pertama kali saya buat adalah import material serta membuat statefulwidget dengan nama NavActive serta memiliki return-nya Scafold( ).

didalam bagian Scaffold( ) ini ada 3 komponen penting yang akan saya buat yaitu:

pada bagian appBar ini, nantinya akan saya buat terpisah sehingga dapat judul appbar-nya dapat disesuaikan dengan nama halaman yang sedang ditampilkan. untuk itu saya membutuhkan widget PreferredSize( ) agar ukuran appbar tersebut dapat disesuaikan dengan kebutuhannya.

didalam widget PreferredSize( ) tersebut akan saya tambahkan widget kustom untuk appBar yang diberinama "AppBarWidget( )".

untuk saat ini saya lewatkan terlebih dahulu bagian AppBarWidget( ) namun nantinya widget ini akan membutuhkan appTitle: dan action: .

appTitle: memiliki type Widget sehingga dapat digunakan dalam bentuk text atau gambar, dan pada bagian NavActive ini saya akan menggunakan logo berupa gambar yang bersumber dari asset yang telah didaftar sebelumnya.

saya juga menambahkan padding atas bawah agar bentuk gambar tetap simetris, juga pada gambarnya saya tentukan Boxfit menggunakan Boxfit.cover.

setelah title aplikasinya dipasang berupa gambar logo, maka pada bagian actionnya akan dibuat tombol notifikasi berupa ikon bel dengan angka notifikasi yang masuk. untuk membuat ikon bel dengan jumlah pesan yang masuk maka saya membutuhkan widget Stack( ), sedangkan pada lingkaran merahnya saya menggunakan widget CircleAvatar( ) saja.

saat ikon notifikasi ditekan maka akan diarahkan pada halaman notifikasi, namun nanti akan saya buat sebuah halaman kosong yang diberi nama BlankPage( ). dan saya hanya menggunaka fungsi Navigator.push( ) pada bagian onPressed.

dengan begini bagian AppBar aplikasi selesai.

widget Scaffold( ) memiliki widget BottomNavigationBar( ) yang digunakan sebagai panel menu dibagian bawah layar, untuk menggunakannya saya membutuhkan attribut yang akan dipasang pada widget Scaffold( ) tersebut.

widget BottomNavigationBar( ) membutuhkan items value untuk itu saya akan membuat variabel bertipe list yang diberi nama destinationValue dimana akan mengandung semua halaman yang akan ditampilkan beserta Ikonnya pada menu BottomNavigationBar( ).

selain itu, widget ini juga membutuhkan halaman yang harus ditampilkan pertama atau dijadikan sebagai halaman utama sehingga saya akan menambahkan attribut currentIndex, agar dapat membedakan antara halaman yang dipilih (aktif) dengan halaman lainnya (pasif) maka akan saya bedakan warna Ikonnya.

setiap halamannya tentu initial State agar perubahannya dapat berfungsi dan semua ini saya tambahkan sebelum widget build dari Scaffold( ) yang telah dibuat.

jika anda memperhatikan pada bagian Initial State tersebut, saya memiliki 5 variabel page1 - page5 dimana akan mengarah kepada halaman masing-masing yang akan saya buat nantinya. disana juga terdapat attribut currentIndex sebagai penentu halama keberapa yang akan dijadikan halaman utama (karena tipenya berupa Integer maka dimulai dari 0).

disana juga terdapat attribut currentIndex sebagai penentu halama keberapa yang akan dijadikan halaman utama (karena tipenya berupa Integer maka dimulai dari 0), lalu disana juga ada yang attribut currentPage yang menjadi penentu variabel halaman apa yang akan menjadi sebagai isi dari halaman utama.

agar setiap tombol dari BottomNavigationBar( ) dapat berjalan sesuai dengan urutan halam yang telah ditentukan pada initState( ), maka saya membutuhkan fungsi void yang akan saya beri nama dengan changeDestination( ) { } dan akan dipasang menggunakan attribut onTap.

selesai sudah bagian tombol navigasi halamannya.

widget Scaffold( ) membutuhkan attribut body sebagai bagian untuk menampilkan konten utama dari aplikasi yang digunakan untuk itu saya akan menambahkan attribut body diantara attribut appBar dan attribut bottomNavigationBar.

karena sebelumnya saya telah buat sebuah variabel penentu halaman apa yang akan ditampilkan pada initState yang disebut dengan currentPage maka saya akan menggunakan variable tesebut sebagai penentu dari isi attribut body ini.

untuk saat ini aplikasi saya belum dapat dijalankan karena nantinya akan error sebab beberapa bagian telah saya masukkan nama widget halamannya namun halaman tersebut belum tersedia atau belum ada.

berikut adalah daftar import dari widget halaman yang akan saya buat selanjutnya:

Pastikan untuk mengikuti part show selanjutnya agar dapat terhindar dari error - error tersebut.