Bagaimana cara membuat toolbar dinamis dengan SliverAppBar pada Flutter ? Di Flutter, saat kita ingin membuat AppBar dengan ukuran “normal” seperti hanya memunculkan icon atau text dengan ukuran standar maka AppBar widget adalah pilihan yang tepat. Namun bagaimana jika membutuhkan design dan ukuran yang dinamis pada AppBar ? Seperti yang kita ketahui bahwa AppBar memiliki ukuran tinggi standar yang tidak dapat dirubah. Untuk detail cara penggunaan AppBar widget silahkan baca disini. Widget yang tepat untuk membuat Toolbar dinamis yaitu dengan SliverAppBar. Lalu seperti apa SliverAppBar widget dan bagaimana cara penggunaanya ? Berikut contoh kasus dalam membuat Toolbar Dinamis dengan SliverAppBar.
Tampilan hasil penggunaan SliverAppBar widget dapat dilihat pada gambar dibawah ini dimana ukuran awal header yang besar dengan background image lalu saat di scroll header menyusut dan sticky di atas seperti appBar pada umumnya.
Dan pada tutorial ini pun kita akan coba membuat Toolbar Dinamis dengan SliverAppBar dengan tampilan seperti gambar diatas
Sebelum memulai koding, karena tampilan contoh menggunakan background gambar maka kita harus simpan dahulu gambar yang akan menjadi background ke dalam folder assets/images
source Images :
https://id.pinterest.com/pin/596375175639609611/
https://belajarflutter.com/wp-content/uploads/2020/08/babymetal-1.png
Berikut contoh kode sederhana penggunaan SliverAppBar dengan FlexibleSpaceBar sebagai child
Dapat kita lihat bahwa dalam SliverAppBar Widget menggunakan properti pinned: true dengan expandedHeight: 200.0 yang artinya secara default appbar akan memiliki tinggi 200px. Saat di scroll maka Appbar akan mengecil ke ukuran standar dan sticky di atas. Contoh hasilnya Seperti ini :
Sekarang kita coba tambahkan Tab widget untuk menampilkan tab song dan gallery. Code nya seperti ini
Penempatan TabBar pada headerSliverBuilder memastikan bahwa Tab berada pada header. Namun terdapat sedikit masalah dimana walaupun telah di tempatkan pada header, tabBar ikut menghilang saat di scroll.
Untuk membuat TabBar agar sticky (tidak ikut mengilang saat scroll) memerlukan properti pinned: true sehingga perlu merubah penggunaan widget yang sebelumnya menggunakan SliverPadding menjadi SliverPersistentHeader Widget sehingga kode nya seperti ini
Bonus
Dengan SliverAppBar kita dapat membuat Appbar menjadi lebih dinamis dan menarik. Sedikit bonus contoh menggunakan SliverAppBar dengan Floating Image
Selamat Mencoba 🙂
