Bismillahirrahmaanirrahiim

Assalamu’alaikum teman-teman, apa kabar? Saya harap teman-teman sehat semua. Jangan lupa bersyukur ya hari ini. Pada kesempatan kali ini, saya akan memperkenalkan sebuah widget yang cukup berguna pada flutter dan memberitahu bagaimana cara menggunakannya, yaitu SliverAppBar.

Untuk AppBar sendiri, saya rasa teman-teman sudah tau apa itu AppBar. Bagi yang belum tahu, AppBar adalah suatu bagian dari suatu aplikasi, yang biasanya terletak pada bagian atas, dan berisi beberapa info atau menu penting mengenai aplikasi. AppBar biasanya tetap sama pada beberapa halaman, walaupun terkadang bisa saja menu untuk halaman tertentu berubah-ubah, tapi bentuk AppBar antar-halaman biasanya tidak terlalu jauh berbeda.

Lalu, untuk SliverAppBar sendiri, apa bedanya? Kata “Sliver” sendiri sebenarnya hanya kata-kata pemanis untuk suatu bagian app yang bisa di-scroll. Dengan SliverAppBar, kita bisa membuat AppBar yang bisa menghilang atau bahkan diperluas seiring kita men-scroll suatu halaman yang sedang aktif. Lalu bagaimana implementasinya? Check this out guys

SliverAppBar digunakan bersamaan dengan (atau lebih tepatnya hanya dapat bekerja dengan adanya) CustomScrollView. Kita menambahkan SliverAppBar pada atribut slivers yang ada di CustomScrollView. Atribut slivers menerima nilai array widget. Sebagai catatan tambahan, pada atribut slivers ini, tidak menerima widget standar yang tidak termasuk ke dalam jenis widget slivers. Oke, untuk mulai mencoba, mari kita mulai membuat project baru flutter. Silahkan gunakan IDE favorit teman-teman. Disini saya menggunakan Visual Studio Code.

Pertama, kita buat CustomScrollView pada atribut body di widget Scaffold. Kenapa body, bukannya atribut appbar? Karena atribut appbar pada widget scaffold hanya menerima appbar yang ukurannya tetap. karena itu kita gunakan pada atribut body. Setelalh itu, kita beri salah satu childrennya sebuah Sliver AppBar, seperti snippet berikut. Perlu diingat, ini di dalam body dari Scaffold, untuk menghemat tempat dan mempermudah pemahaman, saya hanya menambahkan baris kode yang penting mengenai SliverAppBar.

body: CustomScrollView(
        slivers: [
          SliverAppBar(title: Text("SliverAppBar"))
        ],
      ),

Lalu, untuk melihat bagaimana hasilnya, kita juga akan membuat list di dalam CustomScrollView, agar pada halaman HomePage ada sesuatu yang bisa kita scroll. ListView yang akan kita buat, bukan list biasa, melainkan SliverListView, karena atribut slivers pada CustomScrollView hanya menerima widgetsliversBaris kode nya dapat di lihat di bawah ini.

body: CustomScrollView(
        slivers: [
          SliverAppBar(title: Text("SliverAppBar")),
          SliverList(
            delegate: SliverChildListDelegate(
              List.generate(20, (index) {
                return Center(
                  child: Text(
                    'Data Ke - $index',
                    style: Theme.of(context).textTheme.headline3,
                  ),
                );
              }),
            ),
          ),
        ],
      ),

Hasilnya seperti ini:

Lalu, jika kita misalnya ingin membuat ada gambar pada AppBar ketika menscroll kebawah, sehingga AppBar membesar dan menampilkan gambar tersebut, kita bisa tambahkan beberapa atribut tambahan sebagai berikut.

slivers: [
          SliverAppBar(
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.asset('gambar/f.jpeg'),
              ),
              title: Text(
                "SliverAppBar",
                style: TextStyle(color: Colors.black),
              )),

Hasilnya seperti ini:

Mungkin sekian yang bisa saya sampaikan pada kesempatan kali ini, saya harap ini berguna bagi teman-teman, kalau masih penasaran bisa baca di dokumentasi resmi Flutter. Terimakasih. Wassalamu’alaikum warahmatullahi wabarakuh.