Hero Animation bisa dikatakan merupakan salah satu animasi paling mudah dan sederhana di flutter. Caranya yaitu hanya dengan menggunakan class Hero pada kedua item (awal dan akhir) dan dihubungkan dengan properti tag yang memilik nilai yang sama. Contoh sederhana penggunaan Hero widget seperti dibawah ini:
Hero(
tag: "ContohTag",
child: Icon(
Icons.airport_shuttle,
size: 100.0,
),
),
Struktur dari Hero Animation
Pada dasarnya, Hero Animation adalah implementasi dari 2 (dua) widget Hero dengan struktur implementasinya sebagai berikut:
- Hero widget sebagai start point. Widget hero yang digunakan untuk merepresentasikan grafis dan ditandai dengan sebuah tag yang ditampilkan pada source route.
- Hero widget sebagai endpoint, atau bisa disebut sebagai hero destination. Widget ini sama seperti widget yang ditampilkan pada source route, yaitu widget yang merepresentasikan grafis dan memiliki tag yang berada pada destination route.
- Pembuatan route yang berisi tujuan akhir dari hero animation. Route ini berfungsi untuk menentukan widget yang ada di akhir animasi.
- Menjalankan animasi dengan memanggil destination route yang berada di dalam stack navigator. Navigator akan melakukan operasi push dan pop untuk menjalankan hero animation dengan melakukan komparasi antara tag widget yang ada di source dan destination route.