Animate Page Transition In Flutter
Assalamualaikum dulur, gimana kabarnya, udah lama nih kagak ketemu, balik lagi ama saya, suku, kali ini yuk kita bahas gimana caranya buat animasi ketika transisi / berpindah antar halaman (navigation).
Nahh, oke seperti biasa, buat dulu project baru / silahkan buka project lama flutter nya, lalu buat dua halaman yang berisi scaffold dan beberapa komponen lainnya seperti ini :
Jika biasanya kita berpindah halaman hanya menggunakan Material Page Route, ataupun Generated Route (Named Routes) yang mana, kita tidak bisa mengcustom animasi yang terjadi ketika halaman berpindah alias kita hanya menggunakan default animation nya, maka untuk meng custom animasi tersebut kita akan menggunakan Page Route Builder,
So, Lets Rock !!
Pertama, kita akan membuat suatu class, untuk base / basis dari animasi yang kita custom untuk transisi kita, seperti ini
Nahh, disini saya contohkan, animasi nya berupa slide dari dari kiri ke kanan ketika kita berpindah halaman, di bagian transitionBuilder tepatnya, silahkan temen-temen perhatikan return nya, yaitu berupa SlideTransition, temen-temen bisa menggantinya jadi ScaleTransition ataupun yang lainnya jika ingin jenis animasi yang lain,
Oke jika sudah, kita tinggal menerapkannya pada navigasi kita, seperti ini
Nahh, sekarang coba kita jalankan dan hasilnya, kira-kira seperti ini :
Yapp, se simpel itu kita ber flutter, sekian dari saya wassalamulaiakum
Referensi :
