Saturday, January 18, 2020

Membuat Animasi (Kemunculan) Tombol pada Flutter

Animasi Tombol Flutter
Membuat Animasi (Kemunculan) Button pada Flutter - Seperti yang kita ketahui bersama bahwa salah satu komponen utama yang mendukung  tampilan antar muka dan pengalaman pengguna pada aplikasi yang kita buat adalah dengan menambahkan animasi yang ciamik. Penambahan animasi yang tepat dapat meningkatkan nilai dari kualitas antar muka (UI) dan pengalaman pengguna (UX) dari aplikasi mobile yang kita buat.

Untuk itu, mempelajari dan mengeksplorasi animasi pada framework yang kita gunakan untuk membuat aplikasi mobile yaitu pada kasus ini adalah Flutter sangatlah penting. Kali ini , saya akan memberikan contoh penggunaan animasi saat tombol muncul ataupun menghilang. 

Konsep animasi yang akan kita pelajari kali ini masih sama seperti pada tutorial sebelumnya (artikel), dimana kita akan menggunakan widget AnimatedContainer yang mendukung berbagai tipe animasi untuk transformasi warna dan ukuran, lalu kita akan menambahkan widget tombol berupa RaisedButton kedalam AnimatedContainer.

Konsep Animasi

Pada contoh pembuatan kode animasi tombol menggunakan  AnimatedContainer dan RaisedButton kali ini adalah membuat animasi saat muncul dan menghilang. Sehingga properti/field yang kita mainkan adalah width dan heigth dari ukuran 0 (tidak muncul) menjadi ukuran tertentu (muncul).

Untuk lebih memperjelas konsep tersebut, dan seperti apa contoh kode animasi tombol dan hasil aplikasi nya, berikut adalah contoh kode lengkapnya.

Contoh Kode

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: