Flutter Effects - Membuat Typing Indicator | Koding Indonesia

Flutter Effects – Membuat Typing Indicator

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 Animasi Staggered Menu


Seperti yang kita ketahui aplikasi obrolan modern saat ini menampilkan indikator ketika pengguna lain secara aktif mengetik tanggapan pesan yang kita kirim. Indikator ini membantu mencegah respons yang terlalu cepat dan bertentangan antara kita dan orang lain. Dalam artikel ini, kita akan membuat speech bubble typing indicator yang dianimasikan masuk dan keluar dari tampilan. Contohnya sebagai berikut:

The typing indicator is turned on and off

Berikut langkah-langkah untuk membuatnya:

1. Mendefinisikan Widget untuk Typing Indicator

Perlu diketahui, Indikator pengetikan ada dalam widget-nya sendiri sehingga dapat digunakan di mana saja di sebuah aplikasi. Seperti halnya widget apa pun yang mengontrol animasi, typing Indicator harus berupa widget yang bersifat stateful. Widget menerima nilai boolean yang menentukan apakah indikator terlihat, kemudian typing Indicator yang berbentuk gelembung ucapan ini menerima satu warna untuk gelembung dan dua warna untuk fase terang dan gelap dari lingkaran yang berkedip di dalam gelembung ucapan besar.

Mendefinisikan widget stateful baru yang disebut TypingIndicator.

 2. Membuat Ruang untuk Typing Indicator

Secara default, typing Indicator tidak menempati ruang apa pun saat tidak ditampilkan. Oleh karena itu, ketinggian ruang indikator perlu bertambah saat indikator muncul dan tinggi akan menyusut saat indikator menghilang. Maka kita harus mendefinisikan animasi untuk ketinggian typing Indicator, lalu terapkan nilai animasi tersebut ke widgetSizedBoxdi dalam typing Indicator.

TypingIndicator menjalankan animasi maju atau mundur bergantung pada apakah variabel showIndicator yang masuk masing-masing true atau false,

Animasi yang mengontrol ketinggian menggunakan kurva animasi yang berbeda bergantung pada arahnya. Saat animasi bergerak maju, perlu disediakan ruang dengan cepat untuk speech bubbles. Karena alasan ini, kurva maju menjalankan seluruh animasi ketinggian dalam 40% pertama dari keseluruhan animasi tampilan. Saat animasi terbalik, speech bubbles perlu diberi cukup waktu untuk menghilang sebelum mengecilkan ketinggian. Kurva ease-out yang menggunakan semua waktu yang tersedia adalah cara yang baik untuk mencapai perilaku ini.

3. Menganimasikan Speech Bubbles

Typing Indicator menampilkan 3 speech bubbles, dua gelembung pertama berukuran kecil dan bulat. Gelembung ketiga berbentuk lonjong dan berisi beberapa lingkaran berkedip. Gelembung ini ditempatkan secara staggered dari kiri bawah ruang yang tersedia.

Setiap gelembung muncul dengan menganimasikan skalanya dari 0% hingga 100%, dan setiap gelembung melakukannya pada waktu yang sedikit berbeda sehingga tampak seperti setiap gelembung muncul setelah gelembung sebelumnya. Ini disebut Staggered Animation.

Warnai tiga gelembung di posisi yang diinginkan dari kiri bawah. Kemudian, animasikan skala gelembung sehingga gelembung tersebut terkenan efek Staggered setiap kali properti showIndicator berubah.

 4. Membuat Animasi Flashing Circles

Di dalam speech bubble yang besar, typing Indicator menampilkan tiga lingkaran kecil yang berkedip berulang kali. Setiap lingkaran berkedip pada waktu yang sedikit berbeda, memberikan kesan bahwa satu sumber cahaya bergerak di belakang setiap lingkaran tersebut dan animasi berkedip ini berulang tanpa batas. Sehingga kita akan menggunakan AnimationController berulang untuk mengimplementasikan flashing Circles.

Setiap lingkaran menghitung warnanya menggunakan fungsi sinus (sin) sehingga warna berubah secara bertahap pada titik minimum dan maksimum. Selain itu, setiap lingkaran menganimasikan warnanya dalam interval tertentu yang menghabiskan sebagian waktu animasi secara keseluruhan. Posisi interval ini menghasilkan efek visual dari satu sumber cahaya yang bergerak di belakang tiga titik.

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

Klik tombol bulat on / off di bagian bawah layar untuk mengaktifkan dan menonaktifkan gelembung Typing Indicator.


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