Flutter Animation - Membuat Animasi Properti Container | Koding Indonesia

Flutter Animation – Membuat Animasi Properti Container

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-temanHukum Fisika Pada Animasi Widget


Seperti yang teman-teman ketahui, class Container menyediakan cara mudah untuk membuat widget dengan properti tertentu height, background color, padding, borders, dan masih banyak lagi.

Animasi sederhana sering kali melibatkan perubahan properti-properti pada Container selama aplikasi dijalankan. Misalnya, ketika kita ingin membuat animasi perubahan warna latar belakang dari abu-abu menjadi warna hijau yang tujuannya untuk menunjukkan bahwa item telah dipilih oleh pengguna.

Untuk membuat animasi pada banyak properti di ContainerFlutter menyediakan widgetAnimatedContainer. Sama halnya seperti widget Container, AnimatedContainer  mengizinkan kita untuk mendefinisikan width, height, background colors, dan lain-lain. Namun saat AnimatedContainer di rebuilt dengan properti baru, AnimatedContainer secara otomatis teranimasikan antara value lama dan baru. Pada Flutter, jenis animasi ini dikenal sebagai “implicit animations”.

Artikel ini nantinya akan menjelaskan cara menggunakan AnimatedContainer untuk menganimasikan size, background color, dan border radius saat pengguna menekan tombol ▶. Berikut langkah-langkahnya:

  1. Membuat StatefulWidget menggunakan default properties.
  2. Membuat AnimatedContainer menggunakan properti.
  3. Memulai animasi dengan melakukan rebuilding menggunakan properti baru.

1. Membuat StatefulWidget menggunakan default properties

Pertama kita buat class StatefulWidget dan State, gunakan custom State class untuk mendefinisikan properti yang berubah selama aplikasi dijalankan. Dalam hal ini properti yang harus kita definisikan yaitu width, height, color, dan border radius. Namun kita juga dapat mendefinisikan properti-properti tersebut menggunakan default value.

Pada cuplikan program di bawah, properti termasuk ke dalam custom State class sehingga dapat di-update saat pengguna menekan tombol ▶.


2. Membuat AnimatedContainer menggunakan properti

Selanjutnya kita AnimatedContainer menggunakan properti yang didefinisikan pada langkah 1, lalu letakkan duration yang mendefinisikan seberapa lama animasi pada aplikasi berjalan.


3. Memulai animasi dengan melakukan rebuilding menggunakan properti baru

Langkah terakhir, mulai animasi dengan rebuilding AnimatedContainer menggunakan properti baru. Kemudian trigger rebuild tersebut menggunakan method setState() yang dipanggil menggunakan tombol ▶. Jadi ketika pengguna menekan tombol ▶, properti akan secara otomatis melakukan update width, height, background color dan border radius yang baru.

Berikut cuplikan kode dan simulasinya, jika teman-teman menggunakan VSCode jalankan projectnya dengan menekan F5, klik hot reload (⚡) atau klik tombol ▶, maka berikut hasil akhirnya (Klik tombol “▶”):


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//

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