Flutter Effects - Membuat Filter Foto Carousel | Koding Indonesia

Flutter Effects – Membuat Filter Foto Carousel

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 Nested Navigation Flow


Semua orang tahu kalau foto akan terlihat baik dengan menggunakan filter. Pada artikel ini kita akan membuat aplikasi scrollable filter carousel dengan menggunakan foto dan filter yang sudah ada (menggunakan filter pada properti color dan colorBlendMode dari widget Image. Contohnya aplikasinya sebagai berikut:

Photo Filter Carousel

Berikut langkah-langkah untuk membuatnya:

1. Tambahkan Selector Ring dan Gradien Gelap

Nantinya filter yang terpilih akan ditampilkan dengan Selector Ring, selain itu kita akan menggunakan gradien gelap pada filter yang tersedia untuk membedakan antara filter dan foto yang sedang kita edit. Selanjutnya buat stateful widget baru yang disebut FilterSelector untuk tempat implementasi selector.

Tambahkan widget FilterSelector ke widget tree yang ada dan posisikan widget FilterSelector tepat berada di bagian bawah tengah foto yang dapat terlihat.

Selanjutnya dengan menggunakan widget FilterSelector, kita tampilkan selector ring di bagian atas gradien gelap menggunakan widget Stack.

Ukuran selector cicrle dan gradien background tergantung dari ukuran individual filter pada carousal yang disebut itemSize (tergantung kepada width yang tersedia). Oleh karena itu, widget LayoutBuilder digunakan untuk menentukan available space dan kemudian kita dapat kalkuklasikan ukuran dari itemSize individual filter yang ada. Selector ring juga menyertakan widget IgnorePointer karena saat interaktivitas carousal ditambahkan, selector ring tidak boleh mengganggu tap dan drag event.


2. Membuat Item Filter Carousel

Setiap item filter pada carousel ditampilkan berupa circular image dengan jenis-jenis warna yang akan sesuai jika filter tersebut diterapkan pada foto. Selanjutnya, definisikan stateless widget baru yang disebut FilterItem yang fungsinya untuk menampilkan single list item pada layar.


3. Menerapkan filter Carousel

Item filter nantinya akan dapat di scroll ke kiri dan kanan dan scrolling ini membutuhkan semacam widget Scrollable, dengan menggunakan widget PageView kita akan membuat layout turunannya dari tengah space yang tersedia dan menyediakan snapping physics yang menyebabkan item langsung menuju ke tengah ketika pengguna melepaskan drag-nya. Selanjutnya konfigurasi widget tree agar memberi space untuk PageView.

Kemudian buat setiap widget FilterItem di dalam widget PageView berdasarkan index yang tersedia.

Widget PageView menampilkan semua widgets FilterItem dan kita dapat drag dari kiri dan kanan. Namun saat ini setiap widget FilterItem memenuhi seluruh lebar layar dan setiap widget FilterItem ditampilkan dengan ukuran dan opasitas yang sama. Kemudian nantinya ada 5 widget FilterItem yang ditampilkan di layar, dan widget tersebut akan menyusut dan memudar saat bergerak ke ujung kiri atau kanan.

Solusi untuk kedua masalah di atas adalah dengan menerapkan PageViewController. Properti PageViewController’s viewportFraction digunakan untuk menampilkan beberapa widget FilterItem di layar secara bersamaan. Membangun kembali setiap widget FilterItem saat PageViewController berubah, memungkinkan kita untuk mengubah setiap ukuran dan opasitas widget FilterItem saat pengguna melakukan scrolls.

Buat PageViewController dan hubungkan ke widget PageView.

Dengan menambahkan PageViewController, 5 widget FilterItem akan terlihat dilayar secara bersamaan dan foto akan berubah saat kita melakukan scroll ke kiri atau ke kanan. Namun, widget FilterItem masih pada ukuran yang sama.

Selanjutnya bungkus setiap widegt FilterItem dengan AnimatedBuilder untuk mengubah properti visual dari setiap widget FilterItem saat posisi scroll berubah.

Widget AnimatedBuilder me-rebuild setiap kali _controller mengubah posisi scroll, sehingga memungkinkan kita untuk mengubah ukuran dan opasitas FilterItem saat pengguna men-drags item filter.

Selanjutnya hitung skala dan opasitas yang sesuai untuk setiap widget FilterItem di dalam AnimatedBuilder dan terapkan nilai tersebut.

Saat ini, setiap widget FilterItem akan menyusut dan hilang saat bergerak menjauhi tengah layar.

Kemudian tambahkan method untuk merubah filter yang dipilih saat widget FilterItem diketuk atau di-tap.

Konfigurasi setiap widget FilterItem untuk menjalankan _onFilterTapped saat diketuk.

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


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