Flutter Effects - Membuat Efek Scrolling Parallax | Koding Indonesia

Flutter Effects – Membuat Efek Scrolling Parallax

Untuk teman-teman yang akan baru memulai belajar Flutter silahkan masuk ke artikel ini dulu ya teman-teman ➡ Aplikasi Pertamaku “Halo Semuaaa…“. Jika sudah yuk lanjut baca artikel ini…

Jangan lupa baca artikel sebelumnya ya teman-temanMembuat Filter Foto Carousel


Ketika kita melakukan scroll sebuah list cards (contoh: di dalamnya terdapat gambar) pada suatu aplikasi, mungkin kita akan memperhatikan bahwa gambar-gambar tersebut tampak bergulir lebih lambat daripada bagian layar lainnya. Hampir terlihat seolah-olah cards pada list berada di latar depan dan gambar yang ada di cards seolah-olah berada jauh di background list (Efek ini dikenal sebagai parallax).

Maka pada artikel ini kita akan menerapkan efek parallax pada sebuah list cards (dengan sudut membulat berisi beberapa baris teks). Setiap cards juga berisi gambar yang dimana ketika cards di-slide ke arah atas, gambar yang berada di dalam cards akan bergeser ke bawah. Contohnya sebagai berikut:

Parallax scrolling

Berikut langkah-langkah untuk membuatnya:

1. Membuat List untuk Menahan Parallax Items

Untuk menampilkan list dari gambar yang memiliki efek parallax, yang pertama kali harus kita lakukan yaitu menampilkan list.

Buat widget stateless baru bernama ParallaxRecipe dan di dalam ParallaxRecipe kita buat widget tree dengan SingleChildScrollView dan Column yang membentuk list.

 2. Menampilkan Item dengan Teks dan Static Image

Setiap list item ditampilkan berbentuk persegi panjang sudut membulat dengan background sebuah gambar dan gambar tersebut berisi 7 lokasi terkenal di dunia. Kemudian di atas gambar tersebut terdapat nama lokasi dan negaranya yang diposisikan pada kiri bawah. Di antara gambar background dan teks terdapat gradien gelap yang akan mempermudah pengguna untuk membaca teks lokasi dan negara penjelas gambar background.

Implementasikan widget stateless yang diberi nama LocationListItem yang terdiri dari visual yang sudah kita bahas sebelumnya. Untuk saat ini kita akan menggunakan widget Image statik untuk background-nya, pada langkah selanjutnya baru kita ganti widget tersebut dengan versi parallax.

Lalu tambahkan list items pada widget ParallaxRecipe.

 3. Menerapkan Parallax Effect

Ketika efek parallax scrolling berjalan, efek tersebut akan sedikit mendorong gambar background ke arah yang berlawanan dari list yang ada. Saat item daftar bergeser ke atas layar, setiap gambar background bergeser sedikit ke bawah. Sebaliknya, saat item daftar bergeser ke bawah layar, setiap gambar background bergeser sedikit ke atas. Secara visual, ini menghasilkan parallax efect.

Efek paralaks bergantung pada posisi list items terkini pada Scrollable parrent-nya. Saat posisi scroll list items berubah, posisi gambar background list item juga harus berubah. Ini merupakan tantangan yang menarik untuk dipecahkan. Posisi list items dalam Scrollable tidak tersedia sampai fase Flutter layout selesai. Artinya, posisi gambar latar ditentukan oleh fase paint, yang terjadi setelah fase layout. Untungnya, Flutter menyediakan widget bernama Flow yang dirancang khusus untuk memberi kita kontrol atas transformasi widget  child tepat sebelum widget di-paint. Dengan kata lain, kita dapat menghentikan fase painting dan mengambil kendali untuk mengubah posisi widget child sesuka kita.

Bungkus background widget Image dengan widget  Flow.

Definisikan FlowDelegate baru yang disebut ParallaxFlowDelegate.

FlowDelegate  mengontrol bagaimana children diukur dan di mana children dicat. Dalam hal ini, widget Flow hanya memiliki satu child yaitu gambar background. Gambar tersebut harus memiliki lebar yang sama dengan widget Flow.

Return Constraints lebar untuk child gambar background.

Gambar background sekarang memiliki ukuran yang tepat, tapi kita tetap perlu memperhitungkan posisi vertikal setiap gambar background berdasarkan posisi scroll-nya kemudian mengecatnya.

Ada tiga informasi penting yang kita butuhkan untuk menghitung posisi gambar background yang diinginkan:

  • Batasan yang ada di parent Scrollable
  • Batasan individu antara list item
  • Ukuran gambar setelah diperkecil agar sesuai dengan list item

Untuk meliat batasan dari Scrollable, kita harus meneruskan ScrollableState ke FlowDelegate.

Untuk melihat batasan individu antara list item, kita harus meneruskan list item’s BuildContext keFlowDelegate.

Untuk melihat ukuran akhir gambar background, kita harus menetapkan sebuah GlobalKey pada widget Image dan kemudian kita meneruskan GlobalKey tersebut ke FlowDelegate.

Setelah kita memiliki semua informasi yang diperlukan untuk mengimplementasikan parallax scrolling, selanjutnya kita implementasikan method shouldRepaint().

Sekarang terapkan perhitungan layout untuk efek parallax. Pertama, hitung posisi pixel dari list item di dalam parent Scrollable.

Selanjutnya gunakan posisi pixel dari list item untuk menghitung persentase dari atas Scrollable. List Item di bagian atas pada area yang dapat di-scroll harus menghasilkan 0%, dan List Item di bagian bawah pada area yang dapat di-scroll harus menghasilkan 100%.

Lalu gunakan persentase scroll untuk menghitung Alignment. Pada 0%, tetapkan Alignment(0.0, -1.0) dan pada 100% tetapkan Alignment(0.0, 1.0) dan setiap koordinat tersebut sesuai dengan Alignment top dan bottom.

Gunakan verticalAlignment bersamaan dengan ukuran list item dan ukuran dari gambar background, untuk menghasilkan Rect yang menentukan dimana gambar background harus diposisikan.

Gunakan childRect untuk melukis gambar background dengan transformasi yang kita inginkan dan perubahan transformasi inilah yang akan memberikan efek parallax.

Langkah akhir kita akan menambahkan detail pelengkap pada efek parallax, dimana ParallaxFlowDelegate mengecat ulang saat masukan berubah tapi ParallaxFlowDelegate tidak mengecat ulang setiap posisi scroll berubah. Oleh karena itu kita perlu meneruskan ScrollableState’s ScrollPosition ke superclass FlowDelegate sehingga FlowDelegate mengecat ulang setiap kali perubahan ScrollPosition.

Berikut cuplikan kode dan simulasinya, jika teman-teman menggunakan VSCode jalankan projectnya dengan menekan F5, klik hot reload (⚡) atau klik tombol ▶, berikut tampilannya (lakukan scroll ke atas dan ke bawah):


Jika ada pertanyaan silahkan komen dan jika artikel ini dirasa bermanfaat, jangan lupa like dan sharenya ya teman-teman. 😀😀😀😀😀😀😀 Sampai bertemu di artikel selanjutnya.
Terima Kasih, Assalamu’alaykum… Salam KODINGINDONESIA

Referensi : https://flutter.dev//

Author avatar
Anton Prafanto
Konten developer kodingindonesia.com & staf pengajar tetap di Universitas Mulawarman Samarinda