Friday, September 27, 2019

Tutorial Membuat SliverAppBar Flutter - Tutorial Flutter Indonesia

kucingtekno - Tutorial Flutter Indonesia kali akan membahas bagaimana cara membuat SliverAppBar Android di Flutter. Sebelum berlanjut kita sepakat memahami apa yang dimaksud SliverAppBar itu ? SliverAppBar adalah Komponen UI yang sering digunakan dimana gambar di latar belakang akan hilang digantikan dengan toolbar saat kita melakukan scrolling layar . Kalau masih apa itu SliverAppBar dan bagaimana cara membuat SliverAppBar mungkin akan paham dengan sendirinya setelah melihat contoh SliverAppBar di Flutter.

sliverappbar sebelum di scroll

sliverappbar setelah di scroll


Gambar diatas merupakan contoh SliverAppBar sederhana, mungkin setelah melihatnya kalian akan tahu maksudnya. Penggunaan SliverAppBar sering kita jumpai misal di tampilan PlayStore, Youtube dan lain-lain.

Tutorial kali ini saya akan mencoba membuat SliverAppBar di Flutter dengan sederhana dan sangat mudah dipraktekkan sendiri karena codingnya tidak terlalu banyak dan tidak rumit. Namun sebelumnya saya pastikan dulu kalian sudah paham sedikit bagaimana cara menggunakan Flutter Dasar.

Tutorial SliverAppBar Flutter ini merupakan request dari salah satu pengunjung yang sedang membaca Tutorial Membuat Webview di Flutter lalu menginginkan tutorial SliverAppBar dengan SliverGrid, namun kali ini saya contohkan SliverAppBar dahulu sedangkan untuk SliverGrid / Sliver List akan menyusul.

Berikut langkah - langkah Membuat SliverAppBar di Flutter :

Buat satu projek Flutter di Visual Code lalu beri nama terserah kalian, Buka file main.dart lalu sesuaikan dengan coding di bawah ini.


Jika sudah silakan running dengan menggunakan emulator atau smartphone langsung, jika benar tampilan SliverApp Bar maka akan muncul seperti gambar diatas.

Penjelasan Coding SliverApp Flutter :

icon: Icon(Icons.local_hotel), silakan ganti variabel local_hotel dengan icon yang kamu kehendaki ,bisa dengan menggunakan CTRL + SPASI untuk memilihnya arahkan pada kata local_hotel.

backgroundColor: Colors.red, untuh merubah warna appbar , saya gunakan red (merah) dan bisa diganti sesuai dengan keinginan.

title: Text('Beautiful Women', tambahkan judul di AppBar

background: Image.network( 'https://linkgambar', silakan ganti gambar dengan URL gambar dari internet.

Demikian Tutorial Membuat SliverAppBar Flutter sederhana , silakan praktekkan dan bisa dicustom lebih banyak lagi. Jika ada penjelasan maupun coding yang salah silakan tulis di kolom komentar, terima kasih salam kucingtekno.


Jika tidak jelas silakan komentar ya

Terima kasih atas kunjungan Anda.
Emoticon Emoticon