• Sab. Nov 26th, 2022

    Sih4nk

    Dari Kita Untuk Kita

    #03 Belajar Flutter : Bottom Navigation Bar

    Pada Materi kali ini kita akan membahas bagaimana membuat Bottom Navigation Bar dengan menggunakan flutter. Pada aplikasi flutter umumnya menggunakan bottomNavigationBar widget. Widget ini merupakan widget yang bersifat dinamis jadi baiknya menggunakan statefull widget. Dan karena untuk satu bottomNavigationBar dapat memiliki lebih dari satu widget maka widget ini juga dapat dikategorikan sebagai multiple children widget.

    Untuk membuat Bottom Navication Bar dapat menggunakan code berikut :

    jika run kan source tersebut maka akan menghasilkan tampilan sebagai berikut :

    pada Bottom Navigation Bar terdapat 4 menu icon. untuk menganti icon sesuai dengan keperluan dapat kita lihat katalog icon di sini : Kalatog Icon

    Pada kode diatas dapat kita lihat bahwa terdapat properti items untuk menempatkan item widget, currentIndex untuk menentukan item mana yang sedang aktif lalu properti lainnya untuk warna dan memunculkan label.

    Selanjutnya agar selected item menjadi dinamis (berubah saat di tap) maka kita perlu merubah nilai 0 pada currentIndex menjadi variable caranya:

    Buat variable dengan tipe integer dengan nilai 0 sebagai default value.

    lalu buat fungsi untuk memanggil fungsi setState yang berguna untuk mengupdate nilai _selectedNavbar

    setelah itu tambah property onTap dan isi valuenya dengan nama fungsi yang tadi kita buat. Jangan lupa rubah juga value currentIndex menjadi variable

    Disini kita juga akan membuat saat menu di klik dia akan berubah warna, untuk membuat tersebut dapat kita lihat pada source berikut :

    menu home akan menganti background bar dengan warna purple

    menu Gempa akan menganti background bar dengan warna blue

    menu Cuaca akan menganti background bar dengan warna Green

    menu Profil akan menganti background bar dengan warna pink

    untuk melihat hasil akhir sebagai berikut :

    Bottom Navigation Bar

     

    Untuk melihat properti bottom navigasi bar dapat dilihat di sini : BottomNavigationBar 

    Materi Belajar Flutter yang lainnya :

    #01 Belajar Flutter : Apa itu Flutter?

    Cara Mudah Install Flutter Tanpa Android Studio

    #02 Belajar Flutter : Aplikasi Pertama

    #03 Belajar Flutter : Bottom Navigation Bar

    #04 Belajar Flutter : Carousel Slider 

    #05 Belajar Flutter : GridView

    Tinggalkan Balasan

    Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

    //whairtoa.com/4/5415556