 |
| Membuat Animasi Widget Flutter |
Menambahkan atau Membuat Animasi Widget pada Flutter - Salah satu kesuksesan membuat aplikasi mobile untuk digemari oleh pengguna adalah membuat User Interface dan User eXperience dengan sebaik mungkin. Salah satu cara untuk membuat pengguna aplikasi kita betah dan tidak bosan saat memakai kita adalah dengan menambahkan berbagai animasi dalam aplikasi yang kita buat.
Animasi pada tampilan aplikasi yang kita buat, tentu saja dapat meningkatkan kualitas antar muka pengguna sehingga mengusai teknik-teknik dan implementasi animasi widget pada Flutter cukup lah penting. Setidaknya kita dapat mengimplementasikan animasi yang cukup sederhana dan menambahkan terhadap widget-widget yang kita buat pada Flutter.
Flutter sendiri sudah menyediakan berbagai macam widget bantuan untuk yang teah mendukung animasi tentu saja dengan maksud dan tujuan tertentu. Beberapa widget animasi yang bisa kita gunakan pada Flutter adalah AnimatedContainer, AnimatedAlign, AnimatedPadding, AnimatedCrossFade, AnimatedPositioned, dan masih banyak lagi widget animasi lainya.
Pada kesempatan tutorial kali ini, saya hanya akan memberi contoh satu diantara berbagai macam widget animasi yang ada pada Flutter di atas yaitu AnimatedContainer.
Jika sobat sebelumnya sudah familiar dengan Flutter, tentu saja sobat sudah tidak asing lagi dengan widget paling umum yang biasa digunakan pada Flutter yaitu widget Container. Nah, AnimatedContainer ini adalah versi animasi dari widget Container. Karena widget ini paling umum, maka dari itu saya memberi contoh tutorial animasi pertama kali pada Flutter dengan menggunakan widget AnimatedContainer.
Prinsip Animasi Pada AnimatedContainer
Sebelum kita mulai masuk pada implementasi pembuatan kode animasi dengan AnimatedContainer sobat perlu mengetahui beberapa prinsip animasi dengan widget Flutter ini. Pada dasarnya animasi pada widget ini atau widget animasi Flutter lainya adalah mengandaplkan perubahan nilai dari berbagai macam properti/field yang bisa dianimasikan, contohnya adalah width (lebar), height (tinggi), dan color (warna). Lalu ada properti yang menentukan jenis animasinya yaitu curve dan properti yang menentukan waktu animasi yaitu duration.
Untuk lebih memperjelas, bagaimana widget AnimatedContainer bekerja, bagaimanya perbedaanya dengan versi widget tanpa animasi (Container), berikut adalah contoh kode yang melibatkan widget dengan animasi dan widget tanpa aimasi, agar sobat lebih paham perbedaan dan hasilnya.
Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
0 komentar: