Flutter Widget: Toolbar Dinamis dengan SliverAppBar

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.

belajar silverappbar
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

load asset image flutter

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 :

contoh simple silverappbar

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.

appbar nonsticky

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

Toolbar Dinamis dengan SliverAppBar


Bonus

Dengan SliverAppBar kita dapat membuat Appbar menjadi lebih dinamis dan menarik. Sedikit bonus contoh menggunakan SliverAppBar dengan Floating Image

bonus contoh silverappbar

Selamat Mencoba 🙂

Default image
Omadi Jaya
Fullstack developer, Software Engineer @ Depok, Indonesia

Leave a Reply